EntityCode – Referencia de Entidades HTML

Todos los que nos dedicamos al desarrollo web, hemos lidiado alguna vez con las entidades HTML, o sea, esos caracteres especiales que no pueden ser introducidos (al menos no fácilmente) por medio del teclado. Esto es gracias a que muchos de los navegadores web utilizan la codificación de caracteres ISO-8859-1 (también conocido como latin1), así como muchos de los sitios y aplicaciones web que en algún momento hemos desarrollado.

Existen mucha stablas y cheat sheets que con todos o la mayoría de estas entidades, pero hoy me encuentro con una interesante aplicación web que nos muestra d emanera muy atractiva estas entidades HTML, usando magistralmente XHTML y CSS válido, así como efectos gracias a jQuery. La aplicación en cuestión se llama EntityCode.

entidades

Como podemos observar en la imagen, EntityCode nos muestra el caracter en cuestión, el nombre y número de la entidad (lo que debemos escribir en nuestro código HTML), una breve descripción del caracter, así como la forma de uso del mismo.

Afortunadamente, el uso de UTF-8 ha evitado el dolor de cabeza de las entidades HTML, pero no está de más el tenerlas presentes, para cualquier emergencia.

Minify combina y minimiza tus .js y .css

Desde que descubrí Minify lo utilizo en todos mis proyectos. Su funcionalidad es simple: combinar, minimizar y cachear los archivos .js y .css que utilicemos en un website, con la finalidad de agilizar la carga de nuestras páginas. Está basado en PHP5, usando las cabeceras y codificación HTTP para dar sus resultados.

Pasos para configurar y usar Minify:

  1. Descargar la última versión disponible de Minify.
  2. Descomprimir el archivo descargado y copiar la carpeta “min” dentro de DOCUMENT_ROOT del website donde queremos aplicar Minify. Si no conoces la ubicación mencionada, utiliza: <?php echo($_SERVER[DOCUMENT_ROOT]); ?>
  3. Entra en el browser a http://example.com/min/ o http://localhost/min/, dependiendo si tu instalación es online o local.
  4. Usa el formulario para agregar todos tus .js o tus .css que utilices. ¡Ojo! No combinas ambos en la misma lista, en vez de eso, crea dos listas para generar dos enlaces respectivos.
  5. minify

  6. En este punto, tenemos dos opciones para usar Minify. La forma “sencilla” y directa es utilizar el enlace generado para insertarlo en nuestro <header>, pero recomiendo ampliamente la forma “elegante”, modificando el archivo /min/groupsConfig.php para especificar todos y cada uno de nuestros archivos .js y/o .css. Ejemplo:
  7. return array(
    'gespadas' => array('//gespadas/jquery.js', '//gespadas/twitter.js', '//gespadas/captify.js', '//gespadas/ajax.js'),
    );

    De esta forma, en nuestro <header> del website, insertamos:

    <script type="text/javascript" src="/min/g=gespadas"></script>
  8. ¡Eso es todo! Minify se encarga del resto.

Ahora cada vez que alguien visite nuestro website, no hará varias llamadas al server por cada .js y .css, si no sólo hará una (o dos si usamos ambos) llamada, la cual será minimizada (gracias a gzip/deflate) y cacheada del lado del cliente de manera automática. ¡Una maravilla!

Enlaces:

Google Ranking

Todo desarrollador web conoce, o al menos ha escuchado hablar del PageRank. Me permito hacer referencia a la definición oficial:

PageRank realiza una valoración objetiva de la importancia de las páginas web resolviendo una ecuación de más de 500 millones de variables y 2,000 millones de términos. En lugar de contar los vínculos directos, PageRank interpreta un vínculo de la página A a la B como un voto para la página B por parte de la A. A continuación, valora la importancia de la página en cuestión contando la cantidad de votos recibidos.

Lo que no todo desarrollador conoce, es que el PageRank es sólo un algoritmo de un grupo de muchos otros algoritmos, que en conjunto se les conoce como Google Ranking. El equipo encargado de mantener dichos algoritmos hoy ha dado a conocer datos muy interesantes del Google Ranking. A continuación presento la traducción literal de un fragmento del comunicado oficial:

Google Ranking es una colección de algoritmos usados para encontrar los documentos más relevantes para las búsquedas de los usuarios. Lo hacemos para millones de búsquedas diarias, de una colección de billones y billones de páginas. Estos algoritmos se ejecutan por cada consulta introducida en la mayoría de los servicios de búsqueda de Google. A pesar de que nuestro buscador más utilizado es Google Search, los mismos algoritmos de ranking son también usados (con algunas modificaciones) por otros servicios de búsqueda de Google, entre los que se incluyen Images, News, YouTube, Maps, Product Search, Book Search, y otros más.

Es obvio que como desarrolladores, si queremos que nuestros proyectos y sitios web sean encontrados por gente en cualquier parte del mundo, debemos preparar y elaborar nuestros sitios de tal forma que sean más fácil para los robots de Google encontrarlos. ¿Cómo lograrlo? No hay una receta de cocina perfecta, pues para ello necesitaríamos conocer exactamente a la perfección los algoritmos del Google Ranking, y no creo que el tesoro más preciado de la Gran “G” salga a la luz pública, pero si podemos seguir ciertas pautas para llegar a los primeros lugares en los resultados de las búsquedas de Google:

  • Mi primera recomendación es… ¡usar estándares web! Por el momento los más apropiados son XHTML 1.0 y CSS 2.1, mientras que XHTML 2, HTML 5 y CSS 3 sean liberados como nuevos estándares.
  • Conocer técnicas SEO (Search Engine Optimization), que incluso nos serán útiles para otros buscadores, no sólo para Google.
  • Leer cuidadosamente los lineamientos para webmasters, escrita por la gente de Google. EN estos lineamientos, hay tips muy interesantes que siempre hay que tomar en cuenta.
  • Utilizar las herramientras de Google para Webmasters. Con ellas, podrás realizar monitorear la actividad online de tus sitios web: diagnósticos, checar estadísticas, verificafr enlaces entrantes, subir sitemaps, etc.
  • Utilizar Google Analytics, el cual ha sido rediseñado para ayudarnos a conocer de dónde vienen los visitantes de nuestros sitios web, y de que manera interactúan con ellos.
  • Utilizar Google Website Optimizer. Esta herramienta es sumamente interesante, pues permite ejecutar pruebas a nuestros sitios web para evaluar sus puntos débiles y, de esta manera, mejorar la usabilidad de los mismos.
  • Estar pendiente de los anuncios y noticias de Google para webmasters, y para ello, Google tiene su Webmasters Central Blog.
  • Participar en el Grupo de Webmasters de Google. Siempre es bueno tratar con otros colegas sobre nuestras dudas.

Repito nuevamente, no existen reglas exactas, pero si queremos ganar un lugar en esta Web cada vez más competitiva, debemos actualizarnos y estar siempre preparados.

Firefox 3.0 – A la Conquista del Guinness

Dando seguimiento a las descargas de Firefox 3, podemos decir que es prácticamente un hecho, por dos motivos: el primero, no existe un récord anterior con el cual hacer competencia; el segundo, es que la meta trazada por los chicos de Mozilla era de 5 millones (Firefox 2 tuvo 1.6 millones de descargas el día de su liberación), y en el momento en que estoy escribiendo estas líneas, el contador acaba de alcanzar los ¡¡¡7 millones de descargas!!!, y eso que aún quedan aproximadamente 3 horas para que finalice el plazo. ¿Quieren saber cómo va la cuenta? Pueden checar el contador de descargas oficial, el cual se actualiza en tiempo real. Así mismo, pueden checar el mapa de descargas.

De todas formas, apenas sea oficial, ya lo publicaré en otro post. Por mientras, puedes personalizar y descargar el certificado de agradecimiento por haber descargado Firefox 3. Aquí tienen el mío como muestra (denle click a la imagen para descargar el de ustedes).

Firefox 3 Gracias

Por cierto, con motivo de la celebración del lanzamiento de Firefox 3, se ha realizado un lavado de cara al sitio de Mozilla y a su Blog, así que los invito a visitarlos.

Otra novedad, es el lanzamiento de Firefox 3.0 Portable, gracias a los chicos de PortableApps. Nay que recordar que dicha aplicación es compatible sólo para Windows.

¿Otra novedad? ¡Claro! Los inteligentes chicos de Ubuntu, ¡ya pusieron Firefox 3.0 en los repositorios oficiales! Por lo tanto, si eres usuario de Ubuntu, ya habrás recibido la notificación para actualizar Firefox. Si no, usa apt-get o Synaptic para actualizarlo.

Hace un mes, publiqué las novedades para usuarios de Firefox 3; ahora quisiera hacer un repaso de las bondades de Firefox 3 para los desarrolladores web:

  • Está basado en el motor de renderizado Gecko 1.9, lo cual significa estabilidad y velocidad.
  • Mejoras en la compatibilidad con JavaScript 2 y mejor soporte con aplicaciones XUL.
  • Aún no hay soporte completo para HTML 5 y CSS 3. Recordemos que ambos aún son  considerados “Working Draft” por la W3C, por lo que XHTML 1.0 y CSS 2.1 siguen siendo los recomendaciones del Consorcio.
  • Lee, interpreta y renderiza el código HTML más rápido que nunca.
  • Pasa de manera excelente la prueba del Acid 2, y ha mejorado considerablemente la del Acid 3.
  • Visualiza fuentes complejas y gráficos mucho mejor que Firefox 2.
  • Compatibilidad mejorada con SVG.
  • Mejor soporte a navegación fuera de línea (offline).
  • Pronto podremos disfrutar de las bondades de Firefox 3.1, programado para finales de año (ya se puede descargar la versión alpha), el cual contará con mejor soporte para CSS 3 e integración nativa con XHR (XMLHttpRequest), para una mejor ejecución de AJAX.

Sin duda, Firefox está causando una revolución, y cada día que pasa los usuarios de todas partes del mundo se están dando cuenta de la enorme necesidad de usar un navegador más seguro, rápido y confiable, y en Firefox están encontrando lo que otros navegadores (léase Internet Explorer) jamás les habían ofrecido. ¡Hurra por Firefox! :-D

Actualización [13:15 hrs CST]

Las descargas ya rebasaron los 8 millones. Conforme se acerca el final del periodo de 24 horas, la gente se está poniendo las pilas y la “velocidad” de descargas en este momento oscila entre 10,000 y 12,000 descargas por minuto… verdaderamente sorprendente :-)

Actualización [13:20 hrs CST]

Más tardé en escribir la actualización previa, en que fuera declarado concluido el periodo de 24 horas. El resultado final: 8.2 millones de descargas de Firefox 3.0 (el número exacto no ha sido mencionado oficialmente). Ahora sólo falta que la gente de Guinness hagan el comunicado oficial del récord, lo cual puede demorar algunos días. Apenas tenga el dato, lo publicaré en este Blog. ¡Gracias a todos por participar! :-D

Compatibilidad de CSS en Clientes de Correo

Email MarketingSi eres parte del grupo de marketing de tu empresa, sabrás que un recurso muy utilizado hoy en día es el envío de correos electrónicos visualmente atractivos y dirigidos a los clientes de la empresa. Igualmente, la gran mayoría de los servicios web es común que envíen a sus usuarios newsletters o notificaciones con textos e imagenes inteligentemente distribuidas para hacerlos más atractivos.

Pues bien, este tipo de mensajes, obviamente escritos en HTML, en la mayoría de ellos usan técnicas de la “vieja escuela”, a.k.a. Web 1.0; en otras palabras, usan etiquetas obsoletas y tablas para el diseño.

¿Cómo mejorar y actualizarnos? ¡Simple! Usando Hojas de Estilo CSS. Pero hay un “pero”: debido a la gran cantidad de clientes de correo (tanto de escritorio como basados en web), cada uno de ellos trata a las hojas de estilo de manera diferente, o sea, no todos reconocen los mismos selectores, atributos y valores. Es por ello que hay que tener presente que debemos usar técnicas que sean compatibles con la mayoría de los clientes de correo, o al menos con los más populares.

Por suerte, alguien ya se tomó la molestia de hacer pruebas, y ha publicado una tabla de compatibilidad de CSS en diversos clientes de correo para escritorio (Outlook 2003 y 2007, Windows Mail, Mac Mail, Entourage 2004 y 2008, Thunderbird 1 y 2, AOL 9 y 10, AOL Mac, Lotus Notes 6 y Eudora) y en clientes de webmail (Yahoo! Mail, Gmail, Hotmail, Live Mail, AOL Web y .Mac Web).

Tabla de Compatibilidad de CSS en Emails

Los invito a descargarla, estoy seguro les será sumamente útil, incluso para sus correos personales.

Descarga: Tabla de Compatibilidad (en PDF).

Vía: WebAppers.

CSS Cheat Sheet

Gracias al buen recibimiento de las cheat sheets (guías rápidas) de PHP y SEO anteriormente publicadas, aquí les traigo una nueva, realizada por Ateneu Popular, la cual está muy completa, con un diseño sumamente claro, y considero debe ser una referencia casi obligada para todo diseñador web.

CSS Cheat Sheet

Se las recomiendo, su peso es de 1.5 megas, en formato pdf (dentro del zip descargado se encuentra el pdf). Si el enlace dejara de funcionar, que me avisen para subirla directamente a este servidor.

Descarga: CSS Cheat Sheet.

Vía: Kabytes.

Recursos para Programadores Web

Siguiendo con los post multi-noticias, aquí les dejo tres de los más recientes recursos para programadores web, espero les sean de utilidad.

Google Doctype

[ Google Doctype ]Recién lanzado, Google Doctype pretende ser la referencia obligada para todo desarrollador web, ya que es una enorme biblioteca de recursos como xhtml, css, javascript, DOM, etc, todo escrito por desarrolladores, para desarrolladores. Obvio, es OpenSource, bajo licencia Creative Commons, y abierto a todo el público para contribuir con aportes, a la manera wiki. Enlace: Google Doctype. Vía: Google Code Blog.

Yahoo! SearchMonkey

[ Yahoo! SearchMonkey ]Yahoo! no se detiene, pues acaba de abrir al público su plataforma de desarrollo web SearchMonkey; el objetivo, es que los programadores y desarrolladores hagan uso de microformatos y estándares de la web semántica, dándoles la infraestructura necesaria para construir sus propias aplicaciones. Enlace: SearchMonkey. Vía: Y! DevBlog.

Video Tutoriales de JavaScript

Si quieres aprender JavaScript, o bien, pretendes volverte experto en este lenguaje, aquí les dejo unos video tutoriales de Douglas Crockford, uno de los gurús de JavaScript del mismísimo Yahoo!. Vía: Catonmat.

  • JavaScript Básico: I, II, III, IV.
  • JavaScript Avanzado: I, II, III.