Consejos para ordenar tu código CSS

Escrito por Elías el 17 de Mayo de 2008

Cuando se empieza con el uso de las hojas de estilo en cascada no se presta atención a la forma en la que la estamos construyendo, que estructura le damos. Esto es un verdadero problema para el futuro, cuando quieras modificar algo o por alguna razón no seas tu el que toque la hoja, te volverás o volverás loco al que le toque, ya que no encontrará ninguna lógica por la que guiarse haciéndose el trabajo mucho más pesado y con peores resultados finales.

En el blog erracticwisdom nos dan 5 consejos para construir un CSS más estructurado y robusto. Es curioso como sin haberlo leído antes, yo mismo adopté de forma lógica algunos de los que comentan. Otros los empezaré a usar desde ahora mismo. Paso a adaptar el artículo al español, recomendado encarecidamente que se tenga en cuenta cuando te pongas con tu CSS. Me lo agradecerás en el futuro.

1.- Indenta el código

Ve construyendo el código css añadiendo indentación, una técnica usada en otros lenguajes. Y hazlo de forma lógica, un elemento superior estará situado más a la izquierda y lo que en él se contenga se irá “empujando” hacia la derecha y por debajo de él. Un ejemplo:

2.- Condensa todo lo posible

CSS permite dar propiedades por separado o esas mismas “resumidas” en una sola línea. Siempre se pone el típico ejemplo de los márgenes:

Mal uso:

Buen uso:

3.- Divide el código en secciones

En un blog por ejemplo contamos con una serie de bloques que se repetirán casi siempre: cabecera, contenido, barra lateral y pie. Dentro del CSS divide la estructura por bloques, usando comentarios para indicar donde empieza y termina:

• Cabecera
• Contenido
• Barra
• Pie

Dentro del CSS crearemos títulos con los comenatrios:

4.- Hojas de estilos en CASCADA. Aprovéchalo

Como bien dicen en el artículo quizás este sea el punto más complicado. CSS interpreta las instrucciones en cascada, lo que quiere decir que si definimos que por ejemplo la etiqueta H2 no tendrá margen y lo hacemos en la parte superior del documento, así se interpretará siempre, al no ser que lo modificamos en algún cajón inferior. Para que esto resulte tenemos que hacer un planteamiento previo serio: Todos los párrafos tendrán tal tipografía y serán de tal color. Lo definiremos al comienzo con lo que todos los textos de las diferentes partes del sitio tendrán ese estilo, no tendremos que repetirlo una y otra vez.

5.- Usa varias hojas de estilo

En el artículo original además recomiendan algún compresor de CSS para este último consejo, que yo no aconsejo. Pero sí el usar varias hojas de estilo diferentes, no muchas tampoco, podríamos contar por ejemplo con dos. Una para resetear el CSS y poner los estilos “generales” y en la otra crear la estructura.

Enlace: 5 Tips for Organizing Your CSS

Publicado en: CSS&XHTML, Tips
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

61 Themes Wordpress

Escrito por Elías el 16 de Mayo de 2008

Como casi no tenemos galerías donde acudir en búsqueda de themes para wordpress, aquí va otra más. Dejando las ironías a un lado en mi lectura diaria de fuentes me topo con SkinPress, una galería donde recopilan templates para varios sistemas, siendo la sección con más número de ellos, con mucho, la de wordpress.

En especial destacaría de esta galería su simpleza, es el recurso idóneo para de un vistazo y rápidamente encontrar un diseño decente para nuestro blog montando con wordpress. Recalcar lo de diseño decente, porque entre los 61 hay de todo, encontrando bastantes con interfaces bonitas y resultonas visualmente. He dicho!

Enalce: SkinPress - Themes Wordpress 

Publicado en: Templates&Themes
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

20 herramientas para facilitar el desarrollo web

Escrito por Elías el 16 de Mayo de 2008

Esto de los recopilatorios de aplicaciones está de moda y personalmente lo bien que me parece. Los “tools” en línea y de los otros no son ninguna panacea, pero sabiendo usarlos con mesura y conocimiento este tipo de herramientas pueden mejorar nuestros resultados y sobre todo ahorrarnos tiempo. En esta ocasión Six Revisions (expertos en hacer listas) juntan 20 herramientas útiles para facilitar y aumentar nuestra efectividad en el proceso de desarrollar un trabajo web.

Enlace: 20 Useful Tools to Make Web Development More Efficient

Publicado en: Recopilaciones, Recursos&Software, Utilidades
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Tres consejos CSS para obtener diseños Cross Browser

Escrito por Elías el 15 de Mayo de 2008

Vamos a seguir con el tema de los diseños cross browser, traducido al castellano conseguir que un sitio se vea igual en todos los navegadores, quien dice igual dice lo más parecido que se pueda. En esta ocasión tres consejos que nos dan desde el blog Onyx Design para aplicar en nuestra hoja de estilos que paso ha adaptar de forma totalmente libre al español para su mayor difusión.

• Resetea:

Los navegadores otorgan por defecto diferentes valores a las etiquetas html, como es el caso de h1. Si lo usamos tal cual, sin tocar nada, un texto entre las etiquetas h1 /h1 no se verá igual en los diferentes navegadores, unos le dan un tamaño más grande, otro más pequeño, diferentes espacios etc. Para solucionar esto existen los CSS reset, que no es ni más ni menos que poner a cero todas las etiquetas y selectores más usados para comenzar el diseño igual en todos los navegadores.

Existen multitud de CSS reset, aunque no es oro todo lo que reluce, también existen detractores de esta técnica.

• Cuidado con el uso de selectores:

CSS incorpora varios selectores con los que conseguir diferentes fines, como puede ser :befote y :after, pero como era de esperar estos no funcionan en todos los navegadores. Cuidado cuando los uses.

• Valida:

Validar la hoja de estilos es una buena idea, siempre tendremos más posibilidades de que funcione en todos si tenemos un CSS que cumpla los estándares del W3C. Ahora bien, tampoco te obsesiones con el asunto, personalmente pienso que la W3C en ocasiones también suelta errores bastante absurdos o que precisamente se producen por intentar que el sitio se vea decentemente en los diferentes navegadores.

Tres consejos básicos que está bien tener en cuenta, sin tomarlos como una biblia, porque en estos mundos de la maquetación cada uno tiene mucho que decir.

Enlace: CSS coding for cross browser compatibility

Publicado en: CSS&XHTML, Navegadores, Tips
1 Comentario » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Crear sitio personal con CushyCMS y Twitter

Escrito por Elías el 15 de Mayo de 2008

Hace poco tiempo hablaba sobre CuchyCMS en nativos2020, un interesante servicio para crear y sobre todo administrar webs css+xhtml de forma bastante simple. Cuando lo vi y probé se me ocurrieron varias cosas que se podrían hacer con él. Desde nettuts van un poco más allá y se nutren del servicio que nos presta el cms online y tiwitter en una unión verdaderamente interesante para conseguir un sitio personal.

El artículo está explicado de forma bastante pormenorizada con códigos incluidos y explicaciones. Es recomendable pasarse y verlo, tanto para los que tengan conocimientos decentes de maquetación css+xhtml como los que no, los primeros conocerán más a fondo un cms potente y como incluir twiiter en un sitio y los segundos, observando, sacarán varias conclusiones útiles para el futuro, como puede ser que para conseguir un buen diseño no es necesario usar miles de imágenes, letras y colores.

Enlace: How to Build a Maintainable Site using CushyCMS and Twitter

Publicado en: CSS&XHTML, HerramientasOnline, Tutoriales
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

css4free - Templates web gratuitos

Escrito por Elías el 13 de Mayo de 2008

Seguimos engrosando la lista de sitios para descargar templates web en CSS-XHTML listos para usar. En esta ocasión se trata de css4free con las características comunes a todas estas galerías: portada con los últimos añadidos de los que vemos una mini-captura, opción de verlo en funcionamiento, comentar, descargar, número de votos y ranking. Cuenta también con navegación por tags y ver los más votados hasta la fecha.

El sitio ya cuenta con un número decente de templates pudiendo encontrar de todos los tipos y estructuras con licencias GPL o CC.

Enlace: css4free

Publicado en: Templates&Themes
2 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

76 ejemplos de buenos footers

Escrito por Elías el 13 de Mayo de 2008

El footer o pie de una página casi siempre se tuvo como parte menor de un diseño sin darle mucha utilidad, usándose siempre para colocar cosas como las licencias o el nombre y url del autor. Este aspecto cada vez se va desmitificando más y los footers pasan a ser otra parte del sitio con extensas utilidades posibles, es un espacio que bien aprovechado puede dar un buen resultado. Un ejemplo claro lo podemos ver en el rediseño de isopixel, blog en el que soy redactor, y que antes su pie de página no tenía ninguna utilidad fundamental hasta ahora, donde se deció colocar elementos “sociales” relacionados con la temática del blog, como son fotografías de flickr y vídeos de youtube.

Para ver más ejemplos como el que comento desde el blog Elements of Design recopilan 76 diseños de pies de páginas de diferentes sitios, teniendo todos en común ser footers con interesantes utilidades y diseños.

Enlace: Footers (76 examples)

Publicado en: Diseño, Inspiración
2 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Tres formas para conseguir un “Sliding panel”

Escrito por Elías el 12 de Mayo de 2008

Un recurso interesante para nuestros diseños puede ser los paneles con efecto sliding que se muestran-ocultan al pulsar un botón. Ahorra espacio dentro de la interfaz y genera un bonito efecto visual que seguro le gustará a nuestros visitantes. Como de casi todo ya contamos con varias opciones para conseguirlo, aquí va un pequeño recopilatorio con tres de ellas:

Div plegable/desplegable: Artículo escrito por mi donde explico como conseguir el mencionado efecto con el uso de un script proporcionado por dynamic drive. En el artículo explico de forma simple como conseguir un cajón que se despliega y pliega al picar sobre un botón.

Simple slide panel - Práctica forma para añadir información adicional: Tutorial realizado por el amigo Nikko donde explica como conseguir un cajón con las características mentadas mediante un código en jQuery salido desde web designer wall. Lo más interesante es como organiza el contenido que se muestra dentro del cajón y los estilos.

Sliding top panel using mootools: Manual del blog woork con el que conseguir un cajón que tenga efecto Sliding, usando para ello mootols. Interesante en este caso también los estilos que le da, con un resultado final no tan simple como el primer artículo ni tan completo como el de Nikko. Una solución a tener en cuenta.

Publicado en: CodesWeb, Tutoriales
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Más sobre browser bugs

Escrito por Elías el 12 de Mayo de 2008

Otro más para añadir a la lista de sitios que hablan sobre el tema de browser bugs. Esta vez se trata de Position Is Everything, donde dos profesionales del asunto se han dedicado a recopilar los diferentes fallos conocidos de posicionamiento CSS para los diferentes navegadores, currándose artículos para cada uno donde explican porque falla y como lo podemos solucionar. Como en entregas anteriores el diseño del sitio es feo con ganas, pero la información que contiene es interesante y nos puede salvar de quebraderos de cabeza futuros.

Enlace: Position Is Everything

Publicado en: CSS&XHTML, Navegadores, Tips
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Qbrushes - Brushes photoshop de calidad

Escrito por Elías el 7 de Mayo de 2008

Nueva galería de reciente creación centrada alrededor del maravilloso mundo de los pinceles para photoshop. Las características de la galería son las típicas: portada con los últimos añadidos, página individual para cada pincel, opción de votar, comentar, veces descargado, url del autor y breve descripción del paquete. Además de todo esto prometen una peculiaridad que si se cumple cuando vallan creciendo les reportará interesantes beneficios: prometen filtrar todos los contenidos que se les manden para quedarse solamente con los mejores brushes. Por el momento sí lo van cumpliendo, pero claro, aún cuentan con un número bastante reducido de pinceles y categoría. Veremos como evolucionan.

Enlace: Qbrushes 

Publicado en: Brushes&Patterns, Photoshop
2 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Mejora la seguridad de tu wordpress con WP Security Scan

Escrito por Elías el 7 de Mayo de 2008

Un punto vital en nuestro blog montado con wordpress es la seguridad, sin ella nos podemos quedar totalmente al descubierto pudiendo sufrir considerables dolores de cabeza en el futuro. Existen consejos bastante básicos y fáciles de aplicar para los que no se necesitan grandes conocimientos, pero si aún así no te aclaras, juanguis encuentra un interesante plugin para facilitarnos la tarea, WP Security Scan.

Una vez instalado se encargará de escanear nuestro wordpress en busca de fallos típicos de seguridad: robustez de tu contraseña, permisos de archivos y directorios, seguridad de la base de datos, ocultar la versión instalada de wordpress y protección del directorio wp-admin. En próximas versiones prometen añadir más características como escaneo de posibles XSS, facilitar la tarea de control de permisos, detección de intrusiones etc.

Enlace: WP Security Scan | Vía: puntogeek 

Publicado en: CMS, Plugins, Seguridad
1 Comentario » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

25 video tutoriales básicos de Gimp

Escrito por Elías el 6 de Mayo de 2008

Cada vez va siendo más usual encontrar diferentes tipos de recursos para el que en la actualidad es la alternativa libre más solidad en lo que a programas de edición de imagen se refiere, Gimp, obteniendo poco a poco una posición relevante dentro de este mundo y compitiendo directamente con su homologo privado, photoshop.

Para quitarle el miedo y empezar por algún sitio con el Gimp en Six Revisions recopilan 25 video tutoriales básicos con los que abrir boca, desde las funciones básicas hasta explicaciones de la interfaz pasando por numerosos efectos.

Enlace: 25 GIMP Video Tutorials to Help Get You Started

Publicado en: Gimp, Tutoriales
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

markItUp : Universal Markup Editor

Escrito por Elías el 6 de Mayo de 2008

Genial descubrimiento de Alma, markItUp, un completo plugin basado en jQuery con el cual convertir nuestros textareas en verdaderos editores de texto. Por ejemplo, como bien dicen desde webmaster libre, en los comentarios de un blog montado con wordpress se permite el uso de determinadas “tags” html para dar estilos, pero el problema está en que la mayoría de los usuarios no saben nada de html (ni tienen porque), con lo que suele ser común que los comentarios sean puestos sin ningún tipo de estilo, como los molestos enlaces sin el uso de “a href” que descuadran los cajones. Con este plugin podríamos añadir las opciones que quisiéramos en forma de botón para que a nuestros lectores les sea mucho más fácil la publicación de sus comentarios.

Esta solamente es una idea básica de uso, la potencia del markItUp va más allá, con gran número de opciones para configurar y los mejor de todo bastante fácil de usar.

Enlace: markItUp! Universal Markup Editor | Vía: Webmaster Libre

Publicado en: CodesWeb, Plugins
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

CSS Optimizer - Optimiza el peso de tus CSS

Escrito por Elías el 5 de Mayo de 2008

Otra herramienta online que viene para ayudarnos a mejorar la experiencia de los usuarios que visiten nuestros sitios mediante la disminución de peso de la hoja de estilos. Solamente tendremos que indicar la url a la hoja, subirla de nuestro ordenador o pegar directamente el código y pulsar un botón. Automáticamente nos devolverá el código css reducido hasta en un 40%, proceso que consigue mediante la eliminación de espacios principalmente. Pero no es oro todo lo que reluce, personalmente no recomiendo este tipo de sistemas, ya que hace las conversiones de forma automática y puede cargarse algo los estilos, además de que la maquetación de una hoja es un punto vital, los espacios si tienen su sentido, suelen usarse para separar elementos y que nos sea más fácil modificarla en el futuro. Mi recomendación es hacer la hoja optimizada desde un primer momento para luego no tener que acudir a este tipo de herramienta.

Enlace: Online CSS Optimiser | Vía: pixelco.us

Publicado en: CSS&XHTML, HerramientasOnline
0 Comentarios » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!

Wallpapers de IronMan

Escrito por Elías el 5 de Mayo de 2008

Una de las películas más esperadas por un servidor y muchos otros para este 2008 era IronMan, la última adaptación al cine de un comic de la factoría marvel que se estrenó hace muy poquito en españa y resto del planeta. Todo gran lanzamiento en el cine tiene su repercusión en la red, en esta ocasión traigo hasta aquí un recopilatorio de hongkiat con unos cuantos wallpapers de IronMan, disfrútenlos.

Enlace: Really Nice IronMan Wallpapers

Publicado en: Diseño, Iconos&Wallpapers
1 Comentario » | Reacciones otros blogs | Comparte en marc.sociales/mail: Click!