En el momento de maquetar una página web mediante hojas de estilo CSS nos puede surgir la necesidad de ver exactamente cual es el color que les estamos dando a una cierta propiedad. Dicho de otro modo, en las hojas CSS vemos códigos de colores representados en hexadecimal pero no vemos el color en sí.

Pues bien, CSS Color Extractor es una servicio web que te permite introducir el código CSS y te extrae y muestra visualmente cada uno de los colores que se utilizan en esa hoja de estilo. Así de sencillo.

CSS Color Extractor nos puede ser útil para utilizarlo puntualmente aunque dudo que pueda ser práctico si cada vez que hacemos un cambio relativo al color tenemos que estar consultándolo. Un problema que le encuentro es que el recuadro que muestra cada uno de los colores es minúsculo. ¿Qué les costaría hacerlo más grande? Es de todos sabido que no te produce la misma impresión un color estampado en una hoja que un color estampado en una pared entera.

¿Utilizáis alguna herramienta de este tipo mientras diseñáis páginas web?

No existen artículos relacionados.

El pasado mes de marzo os comentaba en Un Blog Más la aparición de un blog orientado a desarrolladores web y propiedad de la red de blogs Blogs Media: Sentido web. Al final de ese artículo escribí la siguiente frase: “Ya veremos como evoluciona”.

Pues bien, ya han pasado varios meses por lo que creo que es buen momento para explicar como ha evolucionado desde mi punto de vista.

En lineas generales, Sentido web ofrece buen contenido, especialmente útil para los desarrolladores web, manteniendo un ritmo constante de publicación de artículos (característica que últimamente no consigo mantener por estos lares ).

Si tuviese que dar alguna crítica una valoración constructiva diría que, en varias ocasiones, publican artículos que son traducciones de artículos ya escritos en inglés. De todas maneras, como he comentado, también escriben artículos de calidad que son de “cosecha propia”. Tenéis un ejemplo en: ¿Qué es un LDAP?

Gracias a este blog, además, he descubierto páginas web/blogs interesantes que se mueven en la misma temática. Si estás interesado en el desarrollo web y te peleas disfrutas realizando aplicaciones web yo te recomendaría darle un vistazo. En caso contrario, seguro que hay blogs mucho más interesantes para tí.

DISCLAIMER: No tengo ningún tipo de relación con los componentes de Blogs Media ni de Sentido web. Se trata de una opinión basada en el tiempo que llevo leyendo este blog y no influenciado por ninguna persona ni ningún ingreso en mi cuenta bancaria

No existen artículos relacionados.

Si no se especifica lo contrario el navegador muestra una página “por defecto” de error. Ahora bien, es posible configurar el servidor web para que devuelva una página “personalizada” en el caso de que se produzca este error (también es posible hacerlo para otros códigos de error).

En Area 404 han recogido una selección de las páginas de error 404 mejor diseñadas que no tiene desperdicio. Las hay para todos los gustos…

• Filosóficas
• Geeks
• En formato ASCII
• Para adultos
• …

No existen artículos relacionados.

Dzone se trata de una web del estilo de Digg / Menéame en la que los usuarios envían artículos relacionados con el desarrollo web y es la propia comunidad de usuarios la que se encarga de filtrar los artículos que deben salir a portada a través de sus votos.

Hace ya algunas semanas que lo sigo a diario y tengo la impresión de que he encontrado una fuente de noticias inagotable relacionadas con mi profesión. Para ello, he añadido el feed de las noticias que aparecen en portada en mi bloglines. El número de noticias que se publican es, en determinadas ocasiones, muy elevado aunque parece que ya están trabajando para filtrarlo y que tan sólo aparezcan las “mejores”.

Si no te espanta leer artículos en inglés y quieres estar informado continuamente en asuntos relacionados con el desarrollo web no puedes perderte Dzone.

No existen artículos relacionados.

• Nivel 0 – Respuesta: “CSS? Esto no es un videojuego multijugador?” Corresponde a personas que nunca han creado una página web.
• Nivel 1 – Respuesta: “Sí, lo utilizo para eliminar el subrayado de los enlaces algunas veces”. Ha desarrollado alguna vez alguna página web simple y utilizan el CSS porque no tienen más remedio.
• Nivel 2 – Respuesta: “No, no me gustan los divs. Las tablas son mucho mejor para trabajar con ellas”. Seguramente, es el tipo de persona que se ha peleado con los divs para conseguir el mismo efecto que con una “table” y, al final, ha decidido seguir utilizando tablas porque no ha conseguido que le saliese bien con “divs”.
• Nivel 3 – Respuesta: “Sí, he oído que está bien trabajar con CSS pero yo no lo utilizo por…” Corresponde a gente que ha utilizado el CSS en algunas ocasiones y que conoce sus beneficios pero que, por algún motivo, no le dejan aplicarlo.
• Nivel 4 – Respuesta: “CSS? Y tanto! Utilizo divs en todas mis plantillas”. Corresponde a la gente que diseña utilizando divs en cualquier lado de la página sin pensar que los visitantes pueden acceder con navegadores antiguos o navegadores que no soporten CSS, por ejemplo.
• Nivel 5 – Respuesta: “Utilizo CSS para el diseño, es mejor que las tablas porque…” Es el punto donde se encuentran la mayoría de desarrolladores web. El punto en el que se sabe porque se utiliza el CSS y cuando y como se debe utilizar.
• Nivel 6 – Respuesta: “¿Qué versión de CSS? Sí, lo he hecho. Has leído mi libro sobre…” Corresponde al tipo de gente que conoce las limitaciones del CSS y que cosas podrían mejorarse. Además, proporcionan posibles soluciones. La mayoría se han leído de arriba a abajo la especificación de CSS del W3C.

No se vosotros, pero yo me he sentido identificado en alguna de esas fases por las que ya he pasado. Actualmente, si tuviese que decidir en que nivel me encuentro creo que diría que estoy entre el 4 y el 5.

Me queda muchísimo por aprender sobre las hojas de estilo CSS pero podría afirmar que me he pasado el número suficiente de horas peleándome con ellas como para saber las ventajas que aportan en cuanto a la separación del contenido de la presentación, estructuración,…  así como los inconvenientes y problemas que te pueden generar (diferentes interpretaciones según el navegador, posición relativa vs posición absoluta, floats,…).

Y tú… ¿en qué nivel te situarías?

No existen artículos relacionados.

Francamente espectacular lo que se puede conseguir con un poco de imaginación y hojas de estilo CSS. Clearbits se trata de un conjunto de iconos cuyo color y forma se puede cambiar mediante CSS. Sorprendente, no?

He llegado a Clearbits a través del Blogpocket. La idea consiste en trabajar con iconos basados en gifs transparentes y del resto ya se encarga el CSS. Una prueba más del poder que tienen las hojas de estilo CSS.

No existen artículos relacionados.

1. Identa las estilos que heredan de otros y escribe las estilo “padre” aunque no contengan información de manera que puedas diferenciar fácilmente las definiciones generales del resto.

   Un ejemplo:
   
#main_side {
width: 392px;
padding: 0;
float: right; }

   #main_side #featured_articles {
   background: #fff; }

   #main_side #frontpageads {
background: #fff;
margin: 8px 0; }


   Opinión personal: La verdad es que nunca me lo había planteado pero ahora que lo veo tiene toda la lógica. Cuando la hoja de estilos contiene pocos estilos puede parecer que no sea necesario, pero si tiene muchos, creerme, se puede convertir en algo imprescindible si no te quieres volver loco.

2. Utiliza abreviaciones en la definición de las propiedades de manera que puedes escribirlo lo mismo en una sola línea.

   Un ejemplo:
   
margin:5px 0 4px 10px;

   es mucho mejor que:
   
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;


   Opinión personal: Este consejo lo superé ya hace tiempo. Inicialmente, siempre me liaba cuando ponía todos los píxeles en la misma línea sobre cual hacía referencia al superior, al inferior,… Al cabo del tiempo leí un pequeño truco: Tan sólo debes recordar que el primero es el superior y el resto sigue el orden de las agujas del reloj.

3. Divide la hoja de estilos en secciones. De esta manera, te será más fácil encontrar el estilo que andas buscando en un momento determinado. Las secciones pueden ser: Estilos globales, estructura de la página, cabeceras, menús, contenido principal, pie de página, formularios,…

   Ejemplo:
   
/*****************************/
/******** CABECERA *********/
/****************************/


   Opinión personal: Cuando estaba buscando un tema para UnBlogMas vi que muchos de los que habían organizaban sus CSS de esta manera lo que indica que es una buena técnica.

4. Escribir las propiedades comunes de los elementos en las definiciones generales y no las vayas duplicando en las definiciones particulares.

   Un ejemplo: Si sabes que todos los elementos h2 no van a tener ni padding ni margin, definelo en el propio elemento h2 genérico y no en las definiciones de, por ejemplo, los h2 de los menús y los h2 del contenido. Es decir, generaliza.

   Opinión personal: Por experiencia propia, entiendo que ésta es la mejor forma de hacerlo en teoría, pero en la práctica resulta complicado debido al gran número de herencias que pueden existir en una hoja de estilos CSS. Es algo que me gustaría solucionar con el tiempo.

5. Utiliza una herramienta que te permita comprimir el contenido de tu CSS de manera que ocupe el mínimo espacio posible en disco y, por lo tanto, se pueda descargar más fácilmente.

   Un ejemplo: Puedes probar con CSS Compressor o Online CSS Optimizer

   Opinión personal: No he utilizado nunca una herramienta de este tipo aunque no descarto la posibilidad de hacerlo cuando se me presente la oportunidad.

Y hasta aquí los 5 consejos que espero que os sean útiles y os faciliten el trabajo de escribir vuestras hojas de estilo CSS.

No existen artículos relacionados.

1. Hace que parezcas profesional
   El resto de diseñadores verán tu trabajo y sabrán que eres una persona que estás atento a los cambios y actualizado en temas tecnológicos.
2. Hace que tus clientes se sientan bien
   Tus clientes te lo agradecerán. Añadiendo a los estándares web, buenas prácticas en cuanto a accesibilidad se refiere, conseguirás que tus clientes descubran lo fácil y cómodo que resulta encontrar su información. Además evitarán las quejas de personas con discapacidad, usuarios que acceden con su Macintosh, a través de su móvil…
3. Maximiza el número de visitantes
   Nunca sabes como van a acceder los visitantes a las webs que diseñes. Hay múltiples maneras de hacerlo y existen una gran variedad de navegadores y resoluciones de pantalla. Poniendo las cosas fáciles a tus visitantes conseguirás que todos accedan sin ningún problema y no restringirás el acceso a aquellos que utilizan un determinado navegador o una determinada resolución de pantalla.
4. Carga de páginas más rápida y reducción de ancho de banda
   Si estructuras correctamente tu código separando el contenido de la presentación conseguirás que el tamaño de los documentos sean menores y, por tanto, se puedan descargar más rápidamente consumiendo menos ancho de banda. Ten en cuenta que la mayoría de web contratan un plan de hosting con un límite de utilización de ancho de banda mensual por lo que si se consume menos es posible tener más visitas al mismo precio.
5. Proporciona una base para la accesibilidad
   Utilizando únicamente estándares web no tienes porque conseguir una web accesible. De todas maneras, los estándares web facilitan la tarea de hacer una web accesible. Asegurándote que tus documentos web son válidos, bien estructurados y semánticos es el primer paso para hacer tu web accesible.
6. Mejora tu posición en los buscadores
   Contenido bien escrito junto a una estructura limpia, bien estructurada y semántica es un paso muy importante para estar bien situado en los principales buscadores. Pónselo fácil, ellos te lo agradecerán. Con esto conseguirás un aumento de número de visitas que, al fin y al cabo, es lo que deseará el cliente.
7. Hace tu código fácilmente mantenible
   Separando el contenido de la presentación y generando un código estructurado conseguirás que las modificaciones del mismo sean más amenas y que no te tengas que pelear con ficheros en los que todo está mezclado y no se entiende nada.
8. Garantiza el contenido en un futuro
   Nadie sabe si el código que escribes hoy se podrá interpretar de aquí 50 o 100 años. De todos modos, utilizando estándares web facilitas que este código sea pueda interpretar en un futuro con versiones posteriores de navegadores, tecnología…
9. Te deja la sensación de buen trabajo hecho
   Quien te va a decir que quiere una web que no tenga más visitantes, que no mejore su posición en los buscadores, que no sea más rápida. Lo que aportan los estándares web está bien visto.
10. Es lo correcto
    Crear webs utilizando estándares es lo que se tendría que haber hecho desde el principio. No ha sido así, pero ahora puede ser el momento de hacerlo.

Mi opinión respecto a estos 10 consejos es que son ciertos. Cada vez son más las páginas que proliferan siguiendo estándares web cosa que está muy bien aunque todavía hay mucho camino por recorrer. No hay que olvidar que todavía hay muchos bugs en los navegadores por lo que no siguen completamente los estándares y hay que adaptar el código a cada uno de ellos.

De todas formas parece que estos problemas se van arreglando poco a poco y espero que algún día desarrollar con estándares web sea algo que todos veamos como una necesidad y no como un capricho.

No existen artículos relacionados.

De rebote, durante el día de hoy, he ido a parar a Webcreme. Como su nombre indica se trata de la “creme de la creme” en lo referente al diseño web.

Puedes encontrar diseños espectaculares de webs realizadas tanto con CSS como versiones en Flash por las que merece sacarse el sombrero. Un enlace realmente interesante si quieres inspirarte en diseñar alguna web o, sencillamente, admiras las webs de diseño.

No existen artículos relacionados.

La verdad es que hay muchas páginas que te enseñan como hacer un menú con CSS pero lo realmente bueno de esta página es que te muestra muchas formas de hacer diferentes tipos de menús. La mayoría de las otras te lo muestran pero únicamente de una manera. Además, no te muestra menús complicadisimos sino que empieza por sencillos menús y los va mejorando.

Se pueden conseguir vistosos efectos al igual que con otras tecnologías como el Flash tan solo con un poco de CSS y, lo mejor de todo, de esta manera estás siguiendo los estándares web.

Para los que dominen poco el inglés, decirles que la página se encuentra en este idioma aunque no es muy dificil entenderla. La página te enseñar a hacer menús de dos tipos: aquellos que no tienen submenús (Listomatic) y aquellos que si (Listomatic2).

Url de la página en cuestión: http://css.maxdesign.com.au/listamatic/

No existen artículos relacionados.