Archive for the ‘ css ’ Category

Los mejores CMS del 2010-2011 filtrados y opensource


Lista con los mejores CMS open source para el Q4 2010, Q1 2011, para novatos

Sin dudas el mejor CMS es aquel que programemos nosotros, pero si llegaste a este post posiblemente tengas apenas digerido el include del php o quizás ni eso,  por eso filtro esta lista, con los que podrás montar webs de una manera rápida, sencilla y profesional, demás esta decir que cada uno tiene sus traducciones al español y contenido de testeo el cual reemplazaremos pero nos sirve para ver como queda, además recomiendo probarlos en el Server local (simulador de webhosting en modo local xampp para Windows y lampp para linux) recomiendo que tengan a mano el firebug del firefox y un editor de codigo, ya tendrán ustedes el suyo propio sino el htmlpad va muy bien, ya verán para que….

CMS MADE SIMPLE

CMS completamente open source, con una gran galería de templates en calidad y cantidad, de rápido montaje y muy efectivo a la hora de entregar el control a sus dueños finales, este proceso de entregar el site y que el dueño final se sienta cómodo es critico, ya que si entregamos un joomla los dueños finales puede desde asustarse a la primera vista del panel de administración hasta perderse y modificar cosas del núcleo que desembocarían en un caos total, cms made simple en este caso se presenta en castellano con los contenido bastante separados, además de incluir los permisos de users y grupos para evitar conflictos mayores.

JOOMLA CMS

Debido a que nuestro nuevo sitio lo tenemos que entregar rápido, y aún no conocemos Joomla (supuestamente), baja a segunda posición, si bien es muy poderoso, es complejo de dominar, lo cual hace que nuestra entrega se vea demorada, ahora, si tienes 10-20  días para entregar el site, métete de lleno con el joomla, la comunidad de desarrolladores es la mas grande, los módulos para instalar son muchos, las templates son muchos, si ya conoces joomla, y no te gusta por h o por b, puedes probar made simple, el anterior, pero mi recomendación es que continúes con joomla, el cual subiría de posición si ya tienes conocimiento de joomla o eres experto en html, php y css ideal para sites de todo tipo, incluye comercio electronico, portales, foros y demas.

WORDPRESS

Cae a tercera posición, wordpress en una primera instacia te permite alojar tu blog en sus mismos servidores, pero cuando quieres avanzar y alojar tu blog en un servidor propio, tienes que pagar las redirecciones 301, además en sus servidores cada pequeño detalle que quieres tener, suma su dinero, si bien su css es mas dúctil que el resto, recomendación, monten wordpress en un servidor propio a la primera oportunidad, no dejen el blog en wordpress, a favor tenemos el hecho de que es muy fácil de publicar post sin complicaciones ni riesgos y además tiene ventajas a la hora de hacer seo comparado con Blogger. Ideal para blogs

Drupal

A medio camino entre joomla y made simple en términos de complejidad, también es una buena opción, tiene una gran comunidad de desarrolladores, buen soporte SEO y permisos de acceso editables y flexibles, drupal tendría la segunda posición en cualquier circunstancia si ya conoces made simple y joomla y tienes una opinión formada de ambos

MODX

Curioso y complejo, a medio camino ente un cms y un Framework. Tienes que programar de movida  todo el layout para que arranque, de ahí en mas tendrás que programar todo el front end entero, modx si bien es exageradamente complejo a la primera, la potencia es mucha y te da control total al finalizar el site

Quieren probarlos a todos? Perfecto tienen que instalar el xampp, lampp según tengan win o linux tiene licencia gnu y pesa muy poco para descargar, a que esperan? Luego de instalarlo les queda adentro de las carpetas de xampp una carpeta llamada htdocs sueltan el contenido del rar del cms que bajen ahí, luego en el navegador en la barra de direcciones tipean localhost y ya pueden ver su cms andando, quizas tengan que hacer una base de datos en el MySQL solo crean una nueva base de datos, pongan el nombre de la nueva base de datos y ya

Anuncios

SJR Parking Systems, nuevo sitio con css3 producido por Jarivia


SJR Parkingsystems, nuevo sitio con CSS3 producido en  Jarivia

vray hdri desarrollo web omer sjr parking systems

SJR Systems Parks es una empresa próxima  a vender sistemas de optimización de espacio en estacionamientos en colombia, basados en utilizar el espacio superior de un coche ya estacionado por medio de plataforma de elevamiento hidráulico,  SJR vende sistemas OMER LIFT, lider del segmento en europa, bajo las estrictas normas europeas que dan cuenta de la calidad de sus productos.

dada la inusual pero nesesaria naturaleza de sus productos se usaron animaciones 3D de sus productos, para mostrar tanto su diseño, como su comportamiento en aplicaciones reales, brindadole un alto valor agregado al sitio.

para el sitio se uso tecnología css3 y ajax, técnicas seo de posicionamiento a nivel de código y redacción con técnicas seo en algunas áreas cruciales.

desde Jarivia agradecemos a SJR por haber confiado ciegamente en nosotros.

52 Framework, framework para Html 5 y Css 3


52 FRAMEWORK, Destilando la potencia de CSS 3 en conjunto con HTML 5

html5 y css3 son el nuevo standar de diseño web y la tendencia de la próxima década, y de la mano de la comunidad del software libre nos llega este nuevo framework, recordemos que un framework css como el blueprint 960 nos ofrece la capacidad de escribir directamente las etiquetas html para luego modificar pequeños detalles de la hoja css, ademas de entre otras cosas, el reseteador css para equilibrar a todos los navegadores y crear verdaderas plataformas  web cross browsers;

basada en esta premisa y con las actualizaciones css de nivel 3 y html 5 nos encontramos con 52 FRAMEWORK CSS3 HTML 5

veamos cuanto de poder hay debajo del titulo y cuanta flexibilidad ofrece

  • sombras para textos y objetos de cajas
  • bordes rendondeados
  • con pocos hacks es posible habilitar todas las funciones para todos los navegadores
  • script embebidos sin nesecidad del atributo type
  • nuevos campos de introducción de texto (email, url etc)
  • usa los tags más comunes de html5 (header, nav, section, article, footer, y proximamente mas)
  • usa el nuevo selector css 3 “selection” que permite manipular las propiedades del texto seleccionado
  • usa una grilla de 16 columnas de 52 pixeles de ancho cada una separados por 8 pixeles
  • css3 gradientes para elementos block

ver demo de 52 framework

pagina oficial de 52framework

el software es código abierto y esta en constante desarrollo, y estan abiertas las plazas para participar del proyecto

Minifyme, como comprimir código javascript y css


comprimiendo código javascript y css

la velocidad de la carga de una web a veces, cuando no todas, resulta un factor decisivo tanto en la navegación como en el posicionamiento, sobre todo cuando por agregarle demasiado código, la pagina resulta pesada y lenta, minifyme se convierte en una gran pequeña solución, comprimiendo código javascript y css,  reduciendo las llamadas http nesesarias para renderizar la página

minifyme, utilidad para comprimir codigo javascript y css

pseudoclases dinamicas, :hover :active :focus, como darle mas interactividad a los links con CSS


con CSS y un poco de imaginacion podemos darle mucha mas nteractidad a nuestros documentos html, en este caso para los estados sobre, activado, y focus.

  • la pseudoclase :hover entra en actividad cuando un puntero esta sobre el link o elemento sin activarlo
  • la pseudoclase :active entra en actividad en el momento que el usuario presiona el mouse sobre el elemento, hasta que lo suelta
  • la pseudoclase :focus se activa cuando se hace foco sobre un elemento, como por ejemplo cuando nos ponemos a rellenar yy escribir dentro de un formulario
  • a:hover{color:red;}
    a:visited {color:blue;}

    un elemento puede combinar muchas pseudo clases a la vez

    CSS 2.1 no define si el padre del elemento en cuestion esta hover o active, es indiferente
    a:hover tiene que ser puesto despues de a:link y a:visited, de lo contrario las caracteristicas de hover bañaran el link entero por el tema de la cascada
    ejemplos
    a:focus { background: yellow }
    a:focus:hover { background: white }

pseudoclases css :link y :visited, como darle formato a links en css


los navegadores normalmente muestran los links de dos formas, separando los ya visitados, de los no visitados

  • La pseudoclase:link solicita los eslabones que aún no han sido visitados.
  • La pseudoclase:visited se aplica una vez que el eslabón ha sido visitado por el usuario.

Los dos estados son mutuamente exclusivos.

La el lenguaje del documento determina cuales elementos son links Por ejemplo, en HTML4, las pseudoclases de eslabón se aplican a los elementos con un atributo de “href”. Así, las dos declaraciones CSS siguientes 2.1 tienen un efecto similar:

a:link { color: red }
:link { color: red }

en el siguiente link
external link (A class=”external” href=”http://out.side/”>external link</A)
para el estado visitado
a.external:visited { color: blue }


mandame a Menéame


mandame a Fresqui


mandame a Twitter

Bordes rendondeados con CSS 3


con css3 ya podemos darles bordes redondeados con solo puro código, veamos el ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jarivia rounded corners</title>

<style type="text/css">
#redondo {
padding: 3px;
background: #CD5C5C ;

/*para navegadores basados en webkit*/
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;

/*para navegadores basados en mozilla*/
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px

/*para navegadores basados en konqueror*/
-khtml-border-radius-bottomright:8px;
-khtml-border-radius-bottomleft:8px;
-khtml-border-radius-topright:8px;
-khtml-border-radius-topleft:8px

/*las instrucciones oficiales que trabajaran con el behavior*/
border-radius-bottomright:8px;
border-radius-bottomleft:8px;
border-radius-topright:8px;
border-radius-topleft:8px

/*el behavior para el resto*/
behavior:url(border-radius.htc);
}
</style>
</head>
<body>
<div id=redondo> <p>contenido<br>en<br>redondo</p> 
</div>
</body>
</html>

por supuesto tienen que bajarse este archivo border-radius.tc que como indica la ruta, tiene que estar al lado del html final

http://code.google.com/p/curved-corner/