el 33

Optimiza la carga de tu sitio web

Un estudio de Yahoo revela que en los sitios web más populares el tiempo de carga total de una página viene condicionado por un 20% del lado del servidor y un 80% del cliente. Esto no quiere decir que dejemos de optimizar el servidor, pero sí que tengamos en cuenta consejos o buenas prácticas para que tu sitio web cargue más rápido.

El tiempo de respuesta de una página es muy importante de cara al usuario, no suelen tener mucha paciencia ( yo tampoco… ), por lo que la primera carga se debe tener muy en cuenta (sin ningun elemento cacheado en el navegador) . En Yahoo han creado una serie de pautas para que tengamos en cuenta a la hora de analizar el rendimiento de nuestro sitio:

Han añadido muchos consejos más que podéis ver en la página
para desarrolladores de Yahoo, me acuerdo que hace poco sólo estaban éstas 13 y ahora ya van sobre las 40. Cito sólo éstas, porque existe una extensión para Firefox en la que comprueban las trece pautas puntuándolas y con la teoría necesaria para poder solucionarlas. Se llama YSlow y la derecha podéis ver una captura evaluando mi sitio web, parece que no tengo muy buena puntación…

Ésta extensión se basa en FireBug, para los que no la conozcan es una extensión impresionante que te ayuda a depurar tu sitio web. Puedes controlar el HTML y CSS en tiempo real, analizar las peticiones que se realizan e incorpora un completo debugger de JavaScript.

Una de las prácticas importantes es reducir las peticiones HTTP, los navegadores sólo aceptan dos peticiones concurrentes del mismo dominio, por lo que a mayor número de archivos mayor número de peticiones y por consecuencia, mayor tiempo de carga.

Sitios web con mucho tráfico como Google y Yahoo reducen el número de peticiones HTTP para los iconos, botonos, pequeñas imágenes con una técnica basada en la propiedad de CSS background-image y background-position, en la que combinan las imágenes en una para después mostrar sólo el segmento adecuado.

En un principio no había encontrado una aplicación web en la que subier mis imágenes a combinar y me devolviera las propiedades CSS necesarias para cada imagen. Ya me había apuntado contento otra cosilla a hacer en mi libreta, para aprender un poco de la librería para gráficos GD de PHP. Pero me resultaba un poco raro que no lo hubiera hecho nadie por lo que buscando un poco más, me he encontrado con que un desarrollador de Yahoo ya la había implementado. La verdad es que la aplicación funciona muy bien, y está disponible hasta el código fuente, otra vez será ; )

Lucha por tu sueño

Mucha gente ha llegado a donde está con perseverancia en lo que creía, luchando por la meta que se ha propuesto sin bajar la cabeza cada vez que se encontraba un bache. Estos vídeos reflejan un poco lo dicho, hay que luchar todo lo que puedas para conseguir lo que deseas. Disfrutarlos : )

Discurso de Steve Jobs subtitulado en español en la universidad de Stanford, la mayoría lo habréis visto pero es inevitable no ponerlo.

No tiene mucho que ver con la temática de los vídeos anteriores, pero me parece muy bueno.

En definitiva, disfruta la vida intentando conseguir tus metas.

Alternativa a Word: LaTeX

Todos estamos acostumbrados a la hora de realizar cualquier documento a ver, a medida que lo redactamos, su aspecto final, este tipo de procesadores de texto se denomina WYSIWYG (acrónimo de What You See Is What you Get). Cuando hablamos de LaTeX es totalmente diferente, el resultado final no lo verás hasta procesarlo, pero la calidad del documento hace que valga la pena para gastar un poco de esfuerzo en cambiar la forma en la que escribes con procesadores de texto clásicos (Word, Open Office, etc.).

La elaboración de un documento se basa en crear con cualquier editor de texto un fichero con el contenido que quieras, añadiendo etiquetas que dotarán de formato tu texto. Tras esto, sólo debes procesarlo y ver la salida final. Dichas etiquetas son macros construidas a partir del lenguaje TeX, por lo que su uso para algunos es difícil, pero por experiencia propia puedo decir que se aprende rápido y tienes mucha documentación por si no te acuerdas de algo (por ejemplo cómo se hace una lista numerada).

A continuación dejo un pequeño ejemplo de la facilidad de LaTeX para escritura de fórmulas matemáticas complejas. Su potencia hace que puedas hacer desde cartas (sin preocuparte del formato, ya lo hace por ti), presentaciones, trípticos, libros y por supuesto tus trabajos típicos de clase/universidad.

\[ (\alpha_1 , \alpha_2 , \cdots, \alpha_n) \in\mathbf{R}^n \]

Para un usuario común meterse en el lío de aprenderse etiquetas, errores de compilación si se equivocan en algún comando y demás no les suele gustar mucho… Para los que somos programadores se puede aprender casi al vuelo, otra cosa es dominarlo bien y saber resolver pequeños problemas con facilidad.

Desde que aprendí LaTeX no uso otra cosa para realizar mis trabajos y presentaciones, queda muy profesional y una vez que te mueves con soltura no vuelves al Word ( Open Office en mi caso). Tengo un amigo al que le gustaba una presentación que había hecho con un paquete de LaTeX (Beamer), por lo que le instalé la distribución MikTex y el editor TeXnicCenter en Windows para que pudiera hacerlo por sí mismo. Está claro que le dí una plantilla con mi presentación en la que poder insertar sus datos, pero se manejó bien insertando imágenes, listas, listas numeradas… buscando en internet si no sabía cómo hacer algo.

Tras esto me paso lo mismo con mi currículum, con otro módulo de LaTeX. Lo que pasaba es que les costaba un poco desenvolverse y a la mínima…se iban al Word. Así que, para aprender un poco de C# con .NET creé una aplicación en la que los usuarios elegían una plantilla (modelo de carta, currículum o trabajos generales) y el programa interpretaba el archivo creando tantos campos de texto, secciones, subsecciones, listas, etc. como se había indicado en la plantilla. Tras esto el usuario sólo se preocupa de insertar su texto, la aplicación se encargaba de crear el fuente en LaTeX para despues procesarlo y generar el pdf. La sintaxis de una plantilla es asequible pero está muy limitada a ésta, para comprenderlo mejor podéis ver la página del proyecto, llamado DokuGen ( nombre ideado por Álvaro : ) )

Aquí tenéis la presentación del proyecto y de paso es un ejemplo de presentación realizada en este potente procesador de texto:

| View | Upload your own

Para no tener que mirar la documentación frecuentemente hice una plantilla con las opciones básicas de LaTeX, os dejo el código fuente y el resultado final.

Cheat sheets para desarrollo web

Cuando desarrollas cualquier aplicación en cualquier lenguaje, siempre viene bien tener documentación a mano, ya sea por si no te acuerdas de alguna función, no dominas la sintaxis perfectamente o simplemente, porque no te apetece buscar en google : )

Voy a hacer una pequeña recopilación de cheat sheets ordenados por diversas temáticas, la mayoría de ellas sobre desarrollo web . Es una selección de las chuletas que tenía en mi pc, en mis favoritos, y alguna otra que he encontrado en google. Al fin y al cabo, es una forma de organizarme un poco y si le sirve a alguien mejor.

HTML/XHTML

• I love Jack Daniels HTML cheat sheet: etiquetas de HTML.
• XHTML: referencia más completa junto con los atributos aceptados por cada etiqueta.
• HTML/XHTML: referencia básica con ejemplos.

CSS

• I love Jack Daniels CSS cheat sheet: todos los elementos CSS, unidades de refencia, modelo de cajas, etc. Muy completa.
• Chuleta CSS Atenea Popular: referencia en español recién salida del horno.

Javascript

• I love Jack Daniels Javascript cheat sheet: funciones de Javascript, expresiones regulares y el objeto XMLHttpRequest.
• Javascript in 10 minutes: recuerda la sintaxis de Javascript con ejemplos.

PHP

• I love Jack Daniels PHP cheat sheet: se centra en expresiones regulares y fechas.
• Emezeta Card PHP cheat sheet: impresionante chuleta la verdad, muy completa y trabajada.

MySQL

• I love Jack Daniels MySQL cheat sheet: recuerda consultas básicas, tipos de datos y funciones disponibles en PHP para su utilización.
• MySQL: recurso muy útil con los comandos más utilizados en consola.

Expresiones regulares:

• I love Jack Daniels Regular Expressions cheat sheeth: buena chuleta con todo lo necesario.
• Regex: referencia básica de expresiones regulares.

SEO:

• The Web Developer’s SEO Cheat Sheet: interesante cheat sheet sobre posicionamiento web.

Subversion:

• Subversion cheet sheet: simple y buena referencia para recordar los comandos básicos de svn.

Otros:

• Htaccess cheat sheet: acciones más comunes sobre el fichero .htaccess.
• Filtering & Escaping Cheat Sheet: simple pero útil información sobre el filtrado de datos.
• LaTeX cheet sheet: muy útil para aquellos que les guste como a mí este lenguaje de marcado para escribir documentos.