La mente humana es como una gran computadora que alamcena cantidades exhorbitantes de información, sin embargo tiene una característica que las computadoras no… la mente humana OLVIDA jejeje… si, siempre se nos olvidan cosas pero bueno afortunadamente como desarrolladores tenemos algunas herramientas que nos pueden ayudar a recordar o que nos evitan la necesidad de no olvidar, al menos cuando hablemos de CSS, aqui les dejamos una interesante compilación de herramientas auxiliares para diferentes partes y funciones de los CSS, no los hemos probado todos pero si uds lo hacen dejen sus comentarios. Conforme las vayamos usando les comentaremos al respecto.

Revisa la lista de herramientas AQUI

Hay algunas ocasiones en que la inspiración simplemente se nos va, o no tenemos mucho tiempo para dedicarle a los detalles básicos de diseño y combinación de colores, pero no se preocupen siempre hay herramientas que nos pueden ayudar al respecto en esta ocasión les presetamos Firdamatic una sencilla y bástante útil herramienta online que nos permite de forma muy rápida crear un primer bosquejo de nuestra plantilla online con algunas características básicas de orden, combinación de colores , tipos de fuente y algunas otras características. Todo esto llenando un sencillo formulario. Luego solo tenemos que copiar el código generado y Listo. Tendremos nuestra plantilla lista para empezar a introducir nuestra información.

Puedes acceder a esta herramienta dando click AQUI. Espero les sirva mucho.

Fuente: http://www.wannabegirl.org/firdamatic/

CSS es el lenguaje de Hojas de Estilo más usado actualmente por su versatilidad y sencillez de entender. Así que en esta ocasión les dejamos una herramienta online que nos ayudará para visualizar de manera mas ágil nuestros diseños conforme los vamos agregando, algo muy útil para aquellos que empiezan en este rollo de la maquetación y que nos vamos mas por el “prueba – error”

CSSDesk es una herramienta online muy popular debido a su facilidad de uso, simplemente necesitamos ir introduciendo nuestro código css y html e inmediatamente iremos viendo los resultados en el espacio de previsualización que se actualiza automáticamente.

Con esta herramienta se hace muy sencillo ir haciendo pruebas para ver como se van ajustando los elementos de nuestro sitio. Espero que les sirva mucho. Puedes probar la herramienta dando click AQUI.

Fuente: http://cssdesk.com/

Algunos aspectos a tener en cuenta para disminuir la velocidad de carga de un sitio son cachear el contenido, optimizar las imágenes, comprimir lo más posible el código html, realizar la menor cantidad de “llamadas a la base de datos de tu WordPress”, etc.

Pero algo que también podemos hacer es comprimir el CSS (hoja de estilos) de nuestro blog, que si bien solo ahorrara algunos kb adicionales, a la hora de ganar unos milisegundos todo suma y más cuando el ancho de banda de tu hosting no es ilimitado.

Como en todo, a la hora de optimizar debemos poner en la balanza “cuan legible” queremos que quede nuestro CSS versus su tamaño final. Si crees que ya tienes tu CSS completo y sin la necesidad de editarlo con cierta asiduidad, pues comprímelo lo más posible para disminuir su peso al mínimo.

CleanCSS es rápida y la variedad de opciones que posee, sumado a la intuitiva y simple interfaz web, la hacen mi elegida. Puedes acceder a esta herramiente en este ENLACE.

Fuente: http://www.mp3dseo.com/

Todos en alguna ocasión cuando empezamos o una vez que ya tenemos nociones de web, nos preocupa como hacer que nuestro sitio sea mas amigable y que cause una buena impresion, bueno pues aquí les dejamos unos pequeños y muy sencillos tips que nos pueden ayudar a mejorar la experiencia de los usuarios de nuestras web.

Cambiar el color del texto seleccionado

En Firefox, Safari y Opera puedes cambiar la combinación de colores por default por uno que combine mejor con tu diseño y lo haga mas vistoso:

selection   { background:#c3effd; color:#000; /* Safari y Opera */ }

-moz-selection { background:#c3effd; color:#000; /* Firefox */ }

Evitar que Firefox “salte” al mostrar y ocultar la barra de scroll

Firefox esta configurado para mostrar y ocultar la barra de scroll vertical según si el contenido de una página sobrepasa o no el alto de la ventana (el “fold”). En sitios interactivos con contenido dinámico que pueda cambiar una y otra vez, este efecto provoca un salto desagradable. Esto lo resolvemos asi de fácil:

html { overflow-y:scroll; }

Aplicar esquinas redondeadas a los contenedores

Además de ser un cambio agradable en Firefox y Safari, también ayuda a identificar mejor los elementos.

input      { -moz-border-radius:10px; -webkit-border-radius:10px; }

Define los saltos de página para imprimir

Muchos usuarios necesitan imprimir el texto de tu sitio web. No olvides ordenar los temas en las hojas ubicando saltos de página para no cortar una oración a la mitad:

.page-break  { page-break-before:always; }

Íconos específicos en atributos

Si colocas muchos enlaces define íconos específicos para diferenciar por ejemplo cuales son links de descarga y cuales links a otras páginas, muchos usuarios te lo agradecerán… aunque no lo digan XD

a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Cambiar el cursor por un puntero en los links y botones

Este simple efecto causa mucho impacto en los usuarios, hay muchos diseños que podemos usar ademas de la clásica manita apuntando. Recuerden que en los pequeños detalles están las grandes diferencias.

input[type=submit],label,select,.pointer    { cursor:pointer; }

Hacer “cliqueable” toda el área alrededor de los links

Esto no solo hará más comoda la experiencia para el usuario sino que nos evitará preocuparnos tanto por la accesibilidad de nuestro link. Esto lo hacemos poniendo la propiedad display en Block en nuestros links.

#navigation li a    { display:block; }

Fuente: http://davidwalsh.name/css-enhancements-user-experience

La maquetación de CSS es muy reccurrida en la actualidad para poder organizar y presentar los contenidos de una manera mas elegante y vistosa, y con relativamente poco esfuerzo. Sin embargo, como en todo, hay algunas cosas que debemos cuidar para que esta tarea no resulte en un esfuerzo inútil.

Algunas cosas a considerar son:

1. Organización:

Planea y organiza tu hoja de estilo según la especificidad de los elementos. Esto te ayudará a minimizar las pruebas/error de tu css. Recuerda que siempre tendras que ir monitoreando como va ajustando tu css, así que es preferible que de un principio tengas una estrutura sólida sobre la cual trabajar.

2. Propiedades repetidas:

Es muy común ver propiedades repetidas, sobre todo las de tamaño de fuentes o color. Por lo tanto lo mejor es planificar para evitar la redundancia y lograr una hoja de estilo mas optimizada, define claramente tus estilos, si es necesario usa estilos combinados de este modo reduces la redundancia en código.

3. Nombre de Clases e ID

Intenta darle nombres globales a tus etiquetas para que sea comprensible a cualquier webmaster. Recuerda que no siempre serás tu quien utilice el código, por lo tanto es mejor usar un estilo estandarizado para la definición de nombres, o al menos que sean nombres específicos evita los clásicos clase1, textobonito, etc.  =)

4. Amigo Borde

La propiedad Border puede ser un gran ayudante a la hora de posicionar y flotar divs u otros elementos. Asignale un borde de 1 pixel a las cajas para ver sus limites de padding y margin, esto te ayudara a encontrar errores y después puedes quitar el borde.

5. Pixeles

Un problema muy común es el de la barra del menu que se cae para abajo. Bueno te cuento que un simple pixel puede lograr esta catástrofe, mide bien tu diseño y ten en cuenta que los navegadores no son 100% similares, trata de pensar en un diseño flexible, y realiza tus pruebas en diferentes navegadores, recuerda que la idea es que otras personas visiten tu página y no todos usan tu navegador favorito.

6. Diseño Abierto

Debido a los típicos problemas de cajas, margenes y rellenos te recomiendo diseñar ampliamente sobre el lienzo. Optimiza contenidos para que te puedas extender por todo el espacio disponible sin necesidad de meterte a los temas de hacks y hojas alternativas.

7. Evita los Hacks

Aunque muchas veces nos ayudan a resolver algunos problemillas de compatibilidad entre navegadores, es una realidad que al final del dia trabajan sobre características cambiantes de los mismos, por lo tanto después de una actualización estos remedios caseros dejan de funcionar.

8. Estudia los elementos de linea y los de bloque

Es simple, en CSS existen elementos de linea como son los enlaces y los de bloques entre los que encontramos los párrafos. Si estudias que tipo de elemento existen vas a poder predecir como reaccionaran en el lienzo. También podrás cambiar su esencia con Display Inline o Display Block.

Consejos y tips para maquetacion css

9. Comenta la lineas

De inicio nos parecerá un desperdicio de espacio, pero te daás cuenta conforme vayas avanzando que esto te ahorrará mucho tiempo en codificación, después las puedes borrar o dejarlas así para que tu código sea más entendible por otras personas.

10. Pixels, Em y Porcentajes

Tu decides el alcance que puede tener tu web, como tambien el diseño al cual se tiene que adaptar. Si diseñas con pixeles sabes que estas limitado pero podes lograr un diseño mas armónico, y con Em y Porcentajes tenes mas compatibilidad entre diferentes dispositivos. La decisión es tuya: armonía o flexibilidad?

11. Posicionamiento

Css te ofrece un amplio campo de posibilidades en la maquetación, el uso de Float, Absolute, Relative… Cual es mejor? Todos. Tenes que entender su reacción en el lienzo para ver que te conviene usar en el proyecto que estas. Por ejemplo, el Float quizas sea un buen compañero en sitios donde haya contenido dinámico, porque las columnas tienen que ir creciendo con el nuevo contenido. La posición absoluta te da mas libertad en el diseño porque puedes colocar los elementos donde te guste y en combinación con Z-index es excelente para los diseños líquidos. Pero lo mejor es usarlas a todas, sacando el máximo potencial de css. No te limites, explota todas las características que te ofrece CSS.

Consejos y tips para maquetacion CSS

Sin duda alguna hay muchas otras cosas que se pueden y deben considerar, lo importante es que tu te vayas sintiendo cómodo y la mejor estrategia es la que te haga sentir más cómodo. Te invitamos  compartir tus tips y consejos para otros visitantes del blog.

Consultado en: www.puentecromatico.com