CSS Naked Day

A quien le interese, hoy es el CSS Naked Day 08.

Como yo ya no le veo sentido, no voy a participar, para los demás, lo único que tienen que hacer es quitarle la hoja de estilos a su página para mostrarle al mundo lo mal que escriben XHTML (aún cuando respeten estándares).

Usar nofollow de forma correcta

El atributo nofollow para la propiedad rel en HTML permite hacerle saber a los buscadores que dicho enlace no tiene relevancia, es decir, buscadores no indexan enlaces con este atributo.

Se le armó una polémica por allá del 2005, pues WordPress y otros CMS empezó a utilizarlo por default en todos los enlaces salientes que se publicaban en un blog. Tiempo después la opción fue deshabilitada pues la gran comunidad de bloggers, desarrolladores web,  SEOs, etc; estaban en desacuerdo.

Sin embargo, este atribudo puede ser útil sobre todo para blogs o páginas con enlaces repetidos (como en los tipo ‘publica tu comentario’ que usamos aquí). La idea es proporcionar al buscador lo que efectívamente sea útil para los usuarios y no hacerles indexar todos los enlaces que tenemos en la página.

Elementos que no necesita tu página web

Share This
Quieran admitirlo o no, ShareThis no tiene utilidad. Sobre todo si es un blog, la mayoría de las noticias son recicladas y si hay alguna tuya que sea interesante para las redes sociales, pues le agregas los links singularmente.

Metadatos en el título (categorías, comentarios, fecha, etc)
El navegante no necesita esos datos, si alguien llega buscando por autos eléctricos, facilitale la tarea y dale la información que busca lo más rápido posible, recuerda que solo tienes 50 milisegundos para llamar la atención

Hablando del título… ¿tan grande?
Es bueno hacerle entender al lector la importancia del título del artículo… pero, en serio… ¿es necesario poner títulos tan grandes? creo que no.

Conversor de texto a audio del contenido
Sin palabras… ok mejor sí… con palabras. Si un usuario con discapacidad visual visita tu página, tendrá las herramientas necesarias para que tu página sea entendible (siempre y cuando trabajes apegado a la semántica). Si no las tiene, segúramente alguien le estará leyendo tu página. Tu trabajo como desarrollador es crear un documento semántico, bien formado, estándar o como quieras llamarle, que el navegador -sea del tipo que sea- se encargue de interpretarlo.

Publicidad bajo el titulo el post
Al menos no tan exagerada, la separación entre el título y el contenido puede causar confusión. ¡Piensa en el lector!

Lista de artículos relacionados en la página principal
La lista de artículos relacionados puede ser útil para efectos de mantener al usuario navegando en nuestras páginas, igual que los metadatos, si los quieres incluir hazlo de forma mesurada.

Probablemente se me pasó uno pero los iré agregando…

Anuncio: se busca programador en Monterrey

Requerimos de programadores de alto nivel en JS con experiencia en ajax.

Será un plus si tienen experiencia desarrollando aplicaciones para Facebook, widgets u Open Social.

Interesados, favor de mandar un correo con su CV a chamba at gelattina.com

¿Hacks CSS o desarrollo limpio?

Creo que el primer consejo que alguien me dio para escribir hojas de estilo en cascada fue: no uses hacks, solo usa el selector child. Así que mi postura frente a los hacks CSS es totalmente en contra.

Los hacks en CSS pueden usarse para:

• Eliminar bugs de Internet Explorer 6 (o anteriores)
• Disminuir diferencias entre navegadores
• Conseguir efectos vistosos (y que se vean en todos los navegadores)

El uso de hacks en CSS implica que las líneas de código aumenten considerablemente, conflictos con otros elementos y sobre todo la dificultad de modificar las hojas de estilo.

Para el primer punto, en mi experiencia, no he tenido la necesidad de usar más que algunos ‘arreglos’ (fixes o como quieran llamarles) que se encargan de solucionar pequeños problemas con IE6, por ejemplo el clásico problema de los elementos flotados que se soluciona con la propiedad display:inline.

Para el segundo punto solo puedo darles el mejor tip de CSS que encontré en esta página web.

Y para el tercer punto, no veo la necesidad de usar efectos como dropdowns o efectos parecidos, aunque en otras ocasiones uno se ve obligado a usar hacks por los malos diseñadores y creen que están en 1999 (frase trillada, pero es la realidad).

Así, yo prefiero escribir mis hojas de estilo de forma muy plana, evitando perder tiempo en la búsqueda de la perfección en cada navegador y obviando detalles que sé que al tratar de solucionarlos me traerán más problemas con otros elementos. Estos detalles los dejo para cuando he terminado.

¿Ustedes usan hacks en sus hojas de estilo o prefieren escribir código plano?

Editores de código

Dentro de la amplia gama de opciones que hay en cuestión de editores web gratuitos, no he encontrado alguno que me convenza al 100%.

En Maestros del Web escribieron un buen artículo, recomendando algunos editores muy detalladamente, el detalle (valga la repetición) en varios de ellos está en que son de pago, aunque yo creo que si en realidad se acomoda a tus necesidades, el dinero es lo que menos importa.

En mi caso, busco editores multilenguajes (principalmente html, xml, php y css), con colores amenos -que vengan configurados por default, no me gusta estar configurando colores y es el principal motivo por el que no uso editores como Notepad++. Además de eso, busco que sean fáciles de usar, que las opciones estén a simple vista, sin tantas complicaciones. Algo muy importante para mí también es el auto-completado de código.

Esas características solo las he encontrado en 2 editores (para windows), con los que me he acomodado muy bien. El primero de ellos es TSW Webcoder, que llevo usándolo ya casi 4 años (antes era gratuito, desde el 2005 tiene costo). Soporta PHP, XML, HTML, CSS, contiene la librería de funciones de php y mysql, un gestor de proyectos muy completo, gestor FTP muy sencillo… es el que más me a gustado.

El otro editor que uso comunmente es TopStyle, que he usado ya por 3 años, aunque el problema con este último es que soporta solo html, css y coloreado básico para lenguajes de programación del lado del servidor, la ventaja está en su interfaz limpia y revisión de propiedades css instantánea.

Ambos tienen editor visual (si es que lo necesitas), validación de código XHTML y CSS vía W3C. La desventaja de ambos es que son de pago.

¿Tú qué editor usas?

Internet Explorer 8: 3 diferentes renderizados

[Esta es una noticia para desarrolladores, si no lo eres, tal vez no te interesa perder tiempo] Si hasta ahora Internet Explorer 6 era el dolor de cabeza de todo desarrollador de hojas de estilo, espera a leer esto.

Los desarrolladores de Internet Explorer 8 anuncian a través del blog de IE que la nueva versión (IE8) tendrá 3 tipos de renderizado y, como ya menciono, la comunidad desarrolladora ha puesto el grito en el cielo.

Las 3 versiones serán las siguientes:

• Quirks mode: que ya existía y es el que se activa (por decirlo así) cuando no hay un doctype definido en una página web (trata muy bonito con tablas dentro de tables e iframes)
• Standards mode: también ya existía y en IE7 tuvo una importante mejora; cubrieron muchos bugs, pero al dejar vivo el quirks mode, muchos desarrolladores siguen ejerciendo su profesión como hace 10 años
• IE8: Internet Explorer 8 implementará una nueva forma de renderizar las páginas, el cual será más estándar, pero se tendrá que agregar una etiqueta <meta /> para que el navegador entienda que queremos que se renderice de este modo nuestra página

Definitivamente Microsoft da un paso adelante y dos pa’trás, como el cangrejo. ¡Que desaparezca el renderizado quirks mode! ¡que los malos códigos se muestren como malas páginas! ¡que los desarrolladores hijos de su 1999 aprendan a usar html y css!

Si quieres lee todo el artículo en el blog de IE8.

¿El fin de IE6?

Desarrolladores: pelen los ojos (en español internacional: abran bien los ojos).

Al parecer, Internet Explorer 7 será una actualización obligatoria de Windows a partir del próximo 12 de Febrero, la actualización se hará a través de Windows Update y, por ahora lo que me preocupa es la forma en qué harán esta actualización.

De forma tradicional, Windows XP te da 3 opciones de actualización: automáticas, solo descarga y solo notificación, tú eliges la que quieras y, si IE7 REALMENTE se hace una actualización obligatoria se instala sin preguntarte -que sinceramente no lo creo-, los usuarios pondrán el grito en el cielo. Por otro lado, yo ya había visto en mi Windows Update la actualización de IE7 y no entiendo muy bien este movimiento de Microsoft, pero si el 12 de febrero es fecha para que IE6 de alguna u otra manera deje de funcionar, que mejor.

Probablemente sea el fin de IE6, con él se mueren nuestros dolores de cabeza y probablemente también muera Position is Everything

Jingle Bells para Gelato

Ya está en línea un nuevo theme para Gelato llamado Jingle Bells, diseñado por mí, programado por mí, para el mejor software de micro-blogging (y no es hipertextual): Gelato.

Si a estas alturas no sabes qué es Gelato, lee nuestro primer review sobre Gelato y no olvides visitar mi blog personal gestionado por Gelato.

Tip definitivo de CSS

Tip definitivo de CSS: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Creando un menú desplazable

Hay un interesante tutorial para hacer un menú desplazable en HTML Dog, en el cual se emplea HTML+CSS+JavaScript.

Ojo, que es JavaScript no intrusivo, en realidad el script se utiliza solo para asignar una clase en Internet Explorer 6 (dado que este no soporta las propiedades y selectores recomendados por la W3, como la selector :hover para elementos que no sean anchors).

He visto que algunas personas logran ese efecto usando solo javascript, lo cual no es muy confiable, mientras que otros encierran listas enteras (<ul>) entre anchors (<a>) y bueno, si quieres realizar un trabajo semántico, usable y accesible, toma en cuenta este tutorial.

Link: Son of Suckerfis Dropdowns - HTML Dog

Recursos para desarrolladores (por Apple y Microsoft)

Apple y Microsoft tienen algunos buenos documentos para desarrolladores web:

• Best practices para desarrollo web (Apple)
• The XMLHttpRequest Object (Apple)
• Atributos de CSS (Microsoft)

En general, las dos bases de datos de estas compañías son interesantes y tienen buenos artículos, aunque cada una está enfocada a su plataforma (MacOS y Windows).

Fuentes para programar

Si he de ser sincero, no recuerdo qué fuente utilizaba en Windows para programar, pero en Ubuntu estoy usando una que se llama Andale Mono…

Está muy agradable, pero si tienen otra sugerencia se los agradecería.

Maestros del Web cumple 10 años

Me atrevo a decir que todos los desarrolladores web latinos nos hemos dado una vuelta por Maestros del Web alguna vez, algunos de nosotros incluso estamos registrados en Foros del Web (de Maestros del Web) y en alguna ocación hemos intercambiado opiniones (y mentadas con otros foreros).

Y bueno, muchos que hoy en día nos dedicamos a esto, algún día nos leimos algún manual o artículo de Maestros del Web, el sitio para desarrolladores web latinoamericanos por excelencia, que un día como hoy pero de 1997 fue fundado, por Christian Van Der Henst.

¡Felicidades a Christian y a todo el equipo que hoy trabaja en Maestros del Web!

Tags: [tag]Páginas Web[/tag], [tag]Cumpleaños[/tag]

Guía para desarrollares web móvil

Una guía (libro) en PDF para desarrolladores web móvil… hace un tiempo estuve buscando algo parecido y no encontré nada en internet… hay manuales y tutoriales pero nada serio, que bueno que ya empieza a haber más documentación acerca del desarrollo para móviles. | Vía CSS Beauty… y yo que creía que en CSS Beauty ya no había nada productivo XD

[How To] Hacer que tu feed no aparezca en los resultados de Google

Cómo hacer que tu feed no aparezca en los resultados del buscador web de Google. A veces buscando en Google te encuentras con resultados de feeds (me sucede a menudo), eso es muy molesto para cualquier persona…

Rediseño de IMDb

IMDb ha rediseñado el template que usa para las páginas de información (películas, directores, actores, etc). Está programada sin usar doctype, pero con CSS… y sin tablas (eso sí, un chingo de muchos divs). ¿Qué tal?

¿Dónde colocar el código?

A propósito de los gestores de estadísticas… ¿dónde es mejor colocar el código JavaScript que te dan estos servicios?

Yo los coloco en el pie de página, antes de cerrar la etiqueta <body>

Tags: [tag]Webmasters[/tag]

La validación no sirve para nada

… si no se aplica correctamente… y para muestra…

La página oficial del Gobierno del Estado de Nuevo León, la cual valida de forma correcta como un documento XHTML 1.0 Transitional.

Esto nos demuestra que la validación vale cacahuate cuando uno no es un buen desarrollador (ok ok, cuando uno no desarrolla apegado a los estándares).

Entonces… ¿para qué rayos sirve el validador?

Pues es muy útil para saber donde tienes errores/horrores que te pueden dar dolores de cabeza (no me digan que nunca han pensado esto: “méndigo sidebar, acomódate al lado del contenido”).

Tags: [tag]XHTML[/tag], [tag]Estándares Web[/tag]

Gánate un iPod de 30GB

Maestros del Web ha lanzado un cocurso llamado ¿Cómo le enseñarías a alguien a realizar una página web?, donde el objetivo principal es difundir e incentivar el desarrollo web en los hispanos, así como la creación de este tipo de contenidos para hispanos (y en eso sí que estamos algo jodidos).

Lo que tienes que hacer es crear una página web donde pongas un manual de desarrollo web, puedes usar cualquier tipo de media (audio, video, imágenes), en español, todo bajo una licencia Creative Commons.

El premio es un iPod de 30GB y en tu conciencia cargarás con algo bueno como “he ayudado a alguien a hacer una página web” :p

Tienes que inscribirte y enviar tu trabajo antes del 30 de noviembre de 2006. El ganador se dará a conocer el 15 de diciembre de este mismo año.

Nos copiaron

Con el revuelo que está causando la noticia de que la UNAM es la mejor universidad de habla hispana (según la revista Times del Reino Unido), pues me puse a buscar información de universidades y me dió por visitar la web de la universidad donde estudiaba el año pasado: Centro de Estudios Universitarios de Monterrey.

Como algunos saben (y otros no), en ese mismo año me dieron la oportunidad de trabajar en el nuevo portal de la UANL (universidad en la que estudio actualmente) y cuando llegué a la primera página mencionada (la del CEU) me llevé una gran sorpresa… a mí me parece una copia mal hecha, una ofensa para mi diseñadora de cabecera… una copia de la copia… en fin, ustedes juzguen:
- Página de la UANL (desarrollada de enero de 2005 a septiembre de 2005 y lanzada en enero de 2006).
- Página del CEU (lanzada a mediados de 2006).

Me parece de muy mal gusto que hasta le pongan el logo de W3C-HTML-COMPLIANT y la barra amarilla bajo la cabecera está mortal, para cagarse de risa… lo peor es que todavía está en desarrollo y en el aviso de ‘en construcción’ solo faltó un gif animado (aunque no aplica para este tipo de páginas, se hubieran molestado en poner ‘beta’)… disgusting… chale, que mala copia.

“Bomberazo” en YouTube.com

Ya varios sitios han demostrado sus ocurrencias para poner mensajes avisando sobre mantenimiento de los sites, YouTube no se está quedando atras, vean lo que han puesto esta noche (22/Jun/2006 11.30 PM tiempo de México):

Problema con Doctypes

Tengo un problemita con un documento HTML e Internet Explorer.

Tengo un documento.html y un documento.css. El documento.html está estructurado en 4 columnas. Se ven perfectas en Internet Explorer y Firefox (y los demás).

El problema viene cuando agregas un comentario antes del doctype, Firefox sigue mostrándolo igual, pero Internet Explorer interpreta mal la hoja de estilos o el html, porque muestra todo descuadrado, como que si el modelo de cajas estuviera mal.

(Así es, ese comentario no debe ir ahí, pero lo agrega un sistema y yo no puedo quitarlo)

Lo que he descubierto es que Internet Explorer está interpretando el html como si fuera HTML 3.2 (o anterior), porque sin el comentario pero con un doctype de html 3.2, me hace el mismo despapaye (desmadre).

Lo que tengo que hacer es buscar una forma (hack o algo) para que se vea bien sin tener que eliminar el comentario.

¿Alguna idea?

GRACIAS

P.S: por lo pronto he contacatado a los webmasters gurús de CSS y XHTML para que me ayuden.

Desarrollando para móviles

Nuevos retos: móviles. No hay mucho que decir… lo de siempre…

Diseño básico… XHTML estructurado… fuera JS, fuera Flash. Media=”handheld” basta.

Lo único malo es que no hay documentación suficiente para poder aprender, así que todo será a prueba y error.

Para empezar, estaba medio desorientado, pero ya agarré la onda… el proyecto es desarrollar una página para móviles (PDA’s, Palms, handhelds en general, hasta los famosísimos UMPC’s, también celulares que de la primera generación que entraban a internet), así que, lo que haré será:
- Desarrollar un solo código HTML para handhelds y dispositivos de pantalla normal.
- Desarrollar 2 hojas de estilo: 1 para pantallas normales y otra para handhelds (ahí entra <link rel=”stylesheet” type=”text/css” media=”handheld” />).
- Desarrollar otra página para móviles de la primera generación con internet, esto sería con WML.

De esta forma creo que abarcaría la mayoría de los navegadores para móviles… ¿alguien tiene experiencia en esto que quiera compartir?

Ahorra 730 terabytes de ancho de banda cambiando a CSS

Ahorra 730 terabytes de ancho de banda cambiando a CSS