rienzie - Piensa en Geek » css

rienzie con XHTML, CSS y RSS válido y optimizado

Àngel Carrión — Wed, 05 Mar 2008 18:35:33 +0000

Como decía en el anterior post, llevo un día de optimización interna del blog para poder hacer que validen los estándares web del blog, tanto XHTML, CSS, RSS como para reducir todo lo que pueda el tiempo de carga para agilizar la navegación y no saturar el ancho de banda.

XHTML 1.0 Transitional válido

He estado bastante tiempo corrigiendo pequeños errores, algunos no tanto, como etiquetas de imagen mal cerradas, listados dentro de párrafos, códigos de zync y el de algún que otro botón y mucho código de vídeo que he podido validar gracias al plugin que comenté con anterioridad.

Al final lo que conseguido y puedes ver en el enlace en W3C validator para comprobarlo.

El botón que lo garantiza es este:

CSS válidas y optimizadas

Este punto me ha costado algo menos ya que tenía el archivo corregido hacía poco y solo he tenido que limpiar algún valor mal escrito.

El botón que lo garantiza es este:

Borrado de los selectores no usados

Lo que sí ha valido la pena ha sido la optimización del archivo CSS. He conseguido un plugin para firefox que hace lo que tenía planeado hacer desde hacía tiempo: Limpiar mis CSS de selectores que usa la web. El plugin se llama Dust-Me Selectors y es una maravilla. Lo instalas y después de reiniciar Firefox te aparece en la parte inferior derecha de la ventana un icono con una escobilla rosa donde podemos elegir que debe hacer. Si le das doble clic te analiza la pagina en la que estés y te muestra los selectores usados y los no usados para que puedas eliminarlos.

Descarga directa ( Dust-Me Selectors )

Reducción del archivo CSS optimizado

Otro punto importante en la optimización de las CSS ha sido la reducción del tamaño, ya conseguido en parte con la herramienta anterior, pero que he acabado de redondear gracias a Clean CSS, una web que reduce el peso de tu archivo CSS dejándolo a gusto del consumidor. Solo tienes que indicar la URL de tu archivo o copiar el código en la caja, elegir el tipo de compresión y copiar el resultado obtenido. Yo he conseguido rebajar el peso de unos 15Kb a unos 8Kb.

En mi caso he usado una compresión alta, y ahora el archivo es casi ilegible. Si usas una compresión alta recomiendo guardar una copia que puedas leer y editar fácilmente.

RSS válido

En este punto no he tenido que hacer nada, ya que con WordPress y Feedburner los feeds validan, aunque con algún que otro error…

El botón que lo garantiza es este:

Espero que te haya servido de ayuda o de motivación para validar los estándares web de tu página y aprovecho para seguir un meme antiquísimo donde tenía como reto validar el XHTML y como decía Metal·lize, también las CSS.

Tutoriales para aprender HTML, CSS, PHP, MySQL, AJAX, DHTML, ASP y MYSQL Server

Àngel Carrión — Tue, 19 Feb 2008 08:53:54 +0000

En Punto Geek he encontrado esta hermosa lista de tutoriales vía web para aprender HTML, CSS, PHP, MySQL, AJAX, DHTML, ASP y MYSQL Server. He hechado un vistazo y la verdad pueden ser bastante útiles para empezar a meterse en ésto del desarrollo web mediante la programación y el diseño. Quiero destacar que los tutoriales son muy faciles de entender y muy intuitivos. Recomendados al 100%.

Visto en ( Punto Geek )

Genialidades del diseño web

Àngel Carrión — Wed, 28 Nov 2007 00:39:50 +0000

Hace ya un tiempo hice un post sobre Best Web Gallery, una galería con los mejores diseños de webs del momento. Si no los mejores, de los mejores que conozcan ellos, claro.

En la galería podemos encontrar los mejores trabajos clasificados en categorías según el tipo de web (portoflio, blog) y por como están desarrollados y trabajados (ajax, css, flash, ilustracion, blog…)

Como hacía un tiempo que no entraba y he encontrado cosas buenas os dejo aquí algunos de los mejores para que nunca os rindáis en vuestros diseños y aprendáis trucos y estructuras nuevas. Por supuesto que a mi también me sirven, si no no hablaría de ello.

A continuación os pondré los enlaces a los mejores y nuevos trabajos, del tipo que sean, que he encontrado. Aunque antes he de decir qu primero hay que pararse a contemplar obligatoriamente es la propia galería.

Elitist Snob

Es el blog personal de Kent Pribbernow, un diseñador y escritor de tecnología. Me parece increíble la sencillez y elegancia que tiene el blog. Diseño suave y fácil para el usuario y mut perfeccionista. Perfecta adaptación de las diferentes secciones del sidebar y muy buena estructuración. Sólo le encuentro una pega, y es que la cabezera podría ser algo más acorde con el contenido o incluso desaparecer. De todas formas muy buen diseño.

Pixelmator

Que decir… Elegancia y sencillez en estado puro. No se puede esperar menos de un programa para Mac. Iconos perfectos, estructura perfecta, colores y fotografías del flash de la cabecera perfectos… Una “delicatessen“.

Fight for Kisses de Wilkinson

Este trabajo es el más curioso que he encontrado, no sólo por el diseño si no por lo que promociona:
Se trata de una web para promocionar una cuchilla de afeitar de Wilkinson, y para ello ~~han desarrollado~~ se han dejado los cuartos en una web hecha íntegramente en flash con secciones increíbles:

El trailer es digno de premio, hecho en 3D, muy bueno y divertido. Incluso tiene una historia que mantiene la temática del sitio web.
Presentan los personajes de la historieta con otro apartado dedicado a ellos. Muy bien hecho todo.
Dispone de un juego que es el final de la historia, lo que no se ve en el trailer. Una muy buena manera de vendernos las cuchillas a base de vicio. Hay que descargarlo.
Apartado “Goodies” con salvapantallas, fondos de escritorio, targetas para enviar vía e-mail, y una herramienta un tanto inútil para poner tu nombre en el tatuaje del brazo de un forzudo.
También tiene un apartado “Mejores puntuaciones” para el juego.

Como trabajo web es una pasada, sólo pondría pegas a lo de siempre: es arriesgado desarrollar una web íntegramente con flash, pero vende mucho, por lo tanto el trabajo está hecho. Ya nos han vendido la maquinilla, o por lo menos sabemos que existe, que es lo que cuenta. Lo que no me explico es como hacen tanto dinero esta gente…

En fin, una pasada: entretenida, bien diseñada e ilustrada y buena usabilidad.

Y con esto ya estaríamos, sólo os invito a dar un paseo por la galería y que gozéis del arte de la nueva era.

Enlace ( Best Web Gallery )
Enlace ( Elitist Snob )
Enlace ( Pixelmator )
Enlace ( Fight for Kisses, de Wilkinson )

Optimiza tus CSS fácilmente (web)

Àngel Carrión — Mon, 08 Oct 2007 11:11:12 +0000

¿Alguna vez te has planteado limpiar un poco tus archivos CSS para bajar de peso tu web y no has tenido muchas ganas de ponerte a borrar y cambiar de todo?

Pues con esta herramienta (Clean CSS) online podremos hacer arreglos y mejoras de visualización, validación, manejo y peso a nuestras hojas de estilos. Sin duda una gran herramienta de uso muy facil.

Enlace ( Clean CSS )
Visto en ( More than 100 Web 2.0 Online Generators )
A su vez visto en ( Anieto2k )

Meme. 3 consejos para ser un buen blogger

Àngel Carrión — Thu, 20 Sep 2007 09:21:50 +0000

Desde Blogdeldía me pasan un meme cuya intención es enseñar a ser un buen blogger a los menos experimentados.

Se trata de una nueva sección llamda “Blogging tips” en la que recogerán artículos de distintos bloggers para ayudar a otros a mejorar sus blogs.

El meme en cuestión es corto, sólo tres puntos, por lo que voy a ser algo más extenso. Sólo por gusto.

Pues bien, ahí van los míos:

Tu contenido: no parar de actualizar el blog de una manera constante, sin hacer parones largos o de golpe cargar mucho el blog.
Es algo lógico: el lector tiene que acostumbrarse a un flujo de posts. Si se acostumbra a muchos diarios estará bien, mientras cada día publiques mucho. Esto puede tener un lado negativo: la gente selecciona entre tus posts, es decir, que no aprecian o se interesan por todos, sino por uno o dos de tus posts del día.

De la misma manera también podrías publicar un post al día, o cada dos, o cada semana. Pero en ese caso tus artículos tendrían que ser brillantes para que cada vez que actualices, tus lectores estén impacientes por leerte. Ejemplo ( Eduard Punset ).

Lo más importante: no publicar posts como churros. Así es imposible garantizar calidad.
El diseño de tu blog. Es lo primero que ven tus visitantes. Si no les gusta posiblemente no volverán, si les gusta lo más seguro leeran algunos de tus posts, incluso mirarán en tus archivos, categorías o páginas.
A parte de la apariencia del blog en general, que eso es algo que se aprende pasando muchas horas en el ordenador analizando otros blogs y probando muchos estilos, colores y tamaños en tus CSS; tus artículos deben tener un estilo a seguir en todos los posts.
Por ejemplo: colocar siempre, o siempre que se pueda, una imagen para acompañar. Esta imagen debe estar relacionada al máximo con el contenido y seguir una armonía con los colores del blog. De esa manera todo tendrá será más agradable de leer y los visitantes no tendrán ganas de abandonar tu página.

Tampoco es bueno para tu diseño colocar publicidad muy agresiva. Con algo de adsense basta.

Hay que ser meticuloso y detallista con todas las partes del blog. Es importante ser perfeccionista y conseguir que todo sea lo más perfecto posible. Con ello me refiero a no dejar que algunos posts se dispersen por la página, que tus sidebar se pueda chequear perfectamente (organización) y que todo lo que haya en el blog tenga su momento de gloria en tu ordenador.

El texto. Lo incluyo en diseño porque me faltan puntos y lo considero algo visual y útil: El texto debe tener un buen margen en el blog, debe tener el “padding” ajustado para que ningún “blockquote” o listado se separe o se junte mucho. La letra debe ser clara y legible, y los títulos tienen que captar la atención del lector para que se entere de que va el artículo o los puntos del artículo.
A la hora de escribir se deben resaltar los puntos más importantes, enlazar todo lo que se pueda (si conviene) y dejar clara cada parte del texto. Por ejemplo citaciones de autores, alertas, fuentes…
No hace falta que diga que hay que ser cuidadoso con la ortografía y el vocabulario.

Último consejo para el diseño: si utilizas TagCloud no te olvides de él. Dale importancia en la posición del blog. Eso hará que la gente se de un buen paseo por las categorías más machacadas.
Como decía en el punto anterior: ORGANIZAIÓN. Si tu blog es un desastre nunca podrás captar la atención de la gente, porqué se perderán.
Hay que dejar claro donde están todas las cosas: buscador, categorías, RSS (muy importante que sea visible), páginas, TagCloud y Blogroll. Los archivos por meses, últimos comentarios, últimos posts, y todo lo demás es sobrecargar. No poner herramientas “lammers” como los mapas en pequeño, contadores, lectores de Mybloglog…

Dejar clara también la paginación. Como se va a la siguiente y anterior página, y como ir a una en concreto (ver la paginación en la parte inferior de este blog) sería una buena opción.

Con estos tres puntos, algo extendidos, se puede conseguir tener un blog en condiciones. A partir de ahí todo es perfeccionable:
Puedes hacer amigos comentando en otros blogs, en comunidades de internet y otros sitios; puedes inscribirte en sitios para promocionarte, puedes usar buenos plugins para que tu blog sera más sofisticado…

Muy importate: no sobrecargues tu blog de vídeos y cosas innecesarias, asegúrate de que tu post está perfecto antes de publicar, lee mucho, no tengas prisa por hacerte un sitio en la blogosfera (si te cebas con el blog te quemarás), escribe en HTML y… NO TE OBSESIONES, hay cosas más importantes que tu blog.

Hasta ahí mis consejos. Espero que os hayan sido de ayuda y no os hayáis aburrido leyendo toda la parrafada. Yo por lo meons he disfrutado escribiéndolo.

Meme enviado por ( Marta Sanz de Blogdeldía por correo )