Mantén los selectores cortos

Muy interesantes los consejos que podemos encontrar en el artículo Keep your CSS selectors short.

¿Qué es mejor?

html body .header .nav{}
.nav{}

¿Qué es mejor?

.widget{}
.widget > h2{}

Bueno, está claro que dependerá de la situación y de lo que queramos conseguir, pero en general, lo que nos explica este artículo es que cuanto más corto y genérico sea un selector en CSS, más compatible será, más portable y fácil de reutilizar será y, por tanto, será mucho mejor que usar selectores muy largos y específicos que sólo sirven para una parte muy concreta de una página web.

El autor de este artículo enuncia las siguientes ventajas de optar por selectores cortos, y las explica una a una:

  • Aumenta la eficiencia del selector.
  • Reduce la dependencia de la ubicación.
  • Aumenta la portabilidad.
  • Reduce las posibilidades de rotura de selección.
  • Disminuye la especificidad.
  • Puede hacer que el código más permisivo.

Bueno, esto es sólo una opinión, seguro que otro desarrollador web puede opinar lo contrario. Pero lo importante es tener una opinión, es decir, tener argumentos para defender una forma de actuar, y no simplemente “lo hago así porque sí”.

30 consejos para desarrolladores web principiantes

30 HTML Best Practices for Beginners ofrece treinta consejos para los principiantes del desarrollo web:

  1. Siempre cierra las etiquetas
  2. Declara el DocType correcto
  3. Nunca utilices estilos en línea
  4. Coloca todos los ficheros CSS externos en la cabecera
  5. Considera colocar los ficheros JavaScript al final
  6. Nunca uses JavaScript en línea
  7. Valida constantemente
  8. Descarga Firebug
  9. Usa Firebug!
  10. Mantén los nombres de las etiquetas en minúsculas
  11. Utiliza las etiquetas h1-h6
  12. Si estás construyendo un blog, reserva h1 para el título del artículo
  13. Descarga ySlow
  14. Envuelve la navegación en una lista no ordenada
  15. Aprende a escribir código para Internet Explorer
  16. Elige un editor de código genial
  17. Una vez que el sitio esté completo, ¡comprímelo!
  18. Corta, corta, corta
  19. Todas las imágenes necesitan el atributo alt
  20. Permanece despierto hasta tarde
  21. Mira el código
  22. Define el estilo para todos los elementos
  23. Utiliza Twitter
  24. Aprende Photoshop
  25. Aprende cada etiqueta HTML
  26. Participa en la comunidad
  27. Resetea el CSS
  28. Alinea el contenido
  29. Divide un PSD
  30. No utilices un framework…todavía

Cinco consejos para construir aplicaciones web más eficientes

El artículo Five tips for building a web application more cost-effectively proporciona cinco consejos para construir aplicaciones web más eficientes:

  1. Invierte en la especificación: una especificación es costosa y difícil, pero mejorará el desarrollo y evitará problemas.
  2. Utiliza un framework: todo son ventajas cuando se usa un framework, tanto durante el desarrollo inicial como durante el mantenimiento futuro.
  3. Compra una plantilla: no hay que reinventar la rueda, y una buena plantilla puede mejorar la usabilidad.
  4. No incorpores demasiados desarrolladores: no siempre más desarrolladores ayudan a que el proyecto vaya más rápido.
  5. No descargue todo el peso sobre el desarrollador: quizás también sea necesario un administrador de bases de datos, un diseñador de interfaces, etc.

El artículo original en inglés:

From the small business looking to improve its business processes to multinational corporations that need to manage important data and transactions, a growing number of companies are building their own web applications.

The benefits are countless, but so too are the potential risks and costs. Software development, after all, is a tricky business, and for companies that aren’t in the business of developing software, building a web application can be very difficult.

Here are five tips for making the undertaking more cost-effective.

Invest in a spec.

Writing a good specification has a cost and it isn’t always easy. For these reasons and more it’s easy to ‘skip the spec’ and jump right to development. Unfortunately, this usually isn’t productive, as the lack of a spec makes it much more difficult for your developer(s) to ‘get it right’ the first time.

Use a framework.

When in the hands of an experienced developer, a development framework can reduce the amount of code that needs to be written, promote code reuse, encourage cleaner code, and implement the proper separation of the data, presentation and logic layers. These can produce immediate cost savings. But the cost-saving advantages of using a framework are long-lasting too: an application built with a framework is generally easier to maintain, and ownership of it can usually be transferred to another developer or team far more easily.

Buy a template.

A good web application is a usable web application. Therefore it’s not wise to skimp on a design. But not skimping on design doesn’t mean you have to reinvent the wheel either. If you’re building an administrative tool, for instance, there are plenty of quality administrative templates that can be purchased at low cost from sites like ThemeForest. Where such templates are viable, potentially thousands of dollars can be shaved from development costs.

Don’t bring on too many developers.

When building a web application, many companies assume that the more developers they have on the project, the faster it will be developed. For large projects, this assumption may not be incorrect. But for most projects, the reality is that more developers can slow the process, in turn making the application more expensive to develop.

Don’t put it all on the developer.

Some web applications can reasonably be built from start to finish by a single developer. But others, which are more complex, may require work that a developer isn’t best capable of handling. Instead of asking for a developer to be a jack of all trades, consider what other roles (project management, DBA, UI designer, etc.) may be required.

Consejos para optimizar el rendimiento

El artículo Piensa un poco en los lectores de tu sitio web: optimiza lo fundamental, intercala y elimina, escrito por Ricardo Galli, creador entre otras cosas del sitio web Meneame, proporciona unos consejos muy sencillos de cómo optimizar el rendimiento de un sitio web:

  1. Minimizar las inclusión de CSS y Javascript
  2. Retrasar la carga de Javascript que no sea necesaria para mostrar la página
  3. Maquetar de forma que se pueda “dibujar” parte de la página aunque no se haya bajado todo el HTML
  4. Utilizar dominios diferentes para el contenido estático
  5. Usar dominios diferentes, no subdominios, para contenido estático
  6. Definir tiempo de caducidad para el contenido estático
  7. Comprimir el contenido de texto

Y la conclusión final: ¡No necesitas servidores más rápidos! debes intercalar

Consejos para mejorar el rendimiento de una página web: el cliente

La mejora del rendimiento de una página web es un elemento clave en el desarrollo de un sitio web, pero muchas veces se descuida. Cuando un sitio web soporta una gran carga de peticiones y se “hunde” su tiempo de respuesta, optimizar las páginas web puede ser la única solución ya que puede ser difícil o imposible optimizar el servidor web (está perfectamente configurado y no hay dinero para comprar otro).

Mejorar el rendimiento de una página web es muy importante porque influye en la experiencia de usuario y puede ser la clave para que un usuario retorne a nuestro sitio web o no vuelva nunca más.

En Internet podemos encontrar numerosos artículos sobre cómo mejorar el rendimiento de una página web. Los siguientes artículos se refieren a optimizan en el lado del cliente, aunque también hay algunos consejos que se tienen que aplicar en el lado del servidor:

Yahoo! Best Practices for Speeding Up Your Web Site

35 consejos (best practices) ordenados en 7 categorías (contenido, servidor, cookie, CSS, JavaScript, imágenes y móvil). Algunos ejemplos de los consejos:

  • Minimiza las peticiones HTTP: cuantos menos ficheros, menos peticiones al servidor, mucho mejor. Por ejemplo, combina los CSS y los scripts en uno solo.
  • Coloca CSS y JavaScript en ficheros externos: cuando un CSS o un código en JavaScript sea empleado en muchas páginas, colócalo en ficheros externos. De este modo, el navegador los podrá guardar en la caché y se reducirá la descarga de infomación.
  • Utiliza GET en las peticiones AJAX: si se usa POST, se envía dos paquetes TCP. Con GET se puede reducir, pero recuerda que las URL tienen un tamaño limitado (sobre 2 Kb).

14 Rules for Faster-Loading Web Sites

Orece los siguientes 14 consejos, algunos muy parecidos a los de Yahoo! (o quizás fue al revés):

  • Rule 1 – Make Fewer HTTP Requests
  • Rule 2 – Use a Content Delivery Network
  • Rule 3 – Add an Expires Header
  • Rule 4 – Gzip Components
  • Rule 5 – Put Stylesheets at the Top
  • Rule 6 – Put Scripts at the Bottom
  • Rule 7 – Avoid CSS Expressions
  • Rule 8 – Make JavaScript and CSS External
  • Rule 9 – Reduce DNS Lookups
  • Rule 10 – Minify JavaScript
  • Rule 11 – Avoid Redirects
  • Rule 12 – Remove Duplicate Scripts
  • Rule 13 – Configure ETags
  • Rule 14 – Make AJAX Cacheable

Estos consejos están escritos por Steve Souders, autor de dos libros sobre este tema: High Performance Web Sites y Even Faster Web Sites.

Exploremos la Web de forma más rápida

Consejos, ejemplos y artículos de Google. También podemos encontrar artículos destinados a dispositivos móviles, como Make the mobile web faster.

Consejos para optimizar un sitio web en los buscadores

He encontrado la página 10 consejos para omptimizar tu sitio web para los buscadores. Dice:

Todo el mundo sabe lo importante que es que tu sitio web esté optimizado para los buscadores, ya que no es lo mismo aparecer en la primera página de los resultados de búsqueda de Google que aparecer a partir de la tercera. Pero esta tecnología, conocida como SEO, no es exacta y por lo tanto no hay unas normas fijas que nos lleven al éxito, mi recomendación claridad y calidad de contenidos.

Aunque esta claro que la calidad de los contenidos es lo más importante, voy a dar 10 consejos básicos que nos pueden ayudar a optimizar nuestro sitio web:

  1. Crea buenos contenidos y consigue enlaces. Si tus contenidos son realmente útiles y valiosos empezarán a lloverte enlaces de modo espontáneo. Estos son los enlaces que más valoran los buscadores, ya que son los que mejor reflejan la relevancia de un sitio web.
  2. Optimiza el contenido de las páginas del sitio web. A la hora de escribir el contenido de cada página, piensa en las palabras clave para las que quieres posicionar esa página y procura usarlas con frecuencia, pero nunca forzando el texto, ya que tiene que ser legible a las personas.
  3. Optimiza los títulos de cada una de las páginas de tu sitio web. Busca títulos lo más descriptivos posible y asegúrate de que todas las páginas de tu sitio tienen títulos diferentes.
  4. Comprueba que las URLs de tus páginas son correctas. Procura que no contengan muchos parámetros y que sean lo más cortas posibles.
  5. Comprueba los enlaces en tus páginas. Todos los enlaces de tus páginas deben estar descritos en HTML, ya que ni javascript ni flash pueden ser seguidos por los buscadores.
  6. Revisa el tráfico de tu sitio web. Con cierta regularidad echa un vistazo a las estadísticas de acceso de tu sitio web, cuáles son los contenidos más visitados, las palabras clave que más tráfico te están dando, etc.
  7. Comprueba el número de página que tienes indexadas. Si es más bajo de lo que debería, trata de ver si tu sitio tiene barreras de rastreo.
  8. Comprueba la posición en los buscadores de tu sitio web para tus principales palabras clave. Además debes hacer un seguimiento de la evolución de tu sitio web para esas palabras clave.
  9. Crea y optimiza un Robots.txt y un sitemap. Crea un sitemap y referéncialo desde el robots.txt para facilitar la tarea a las arañas de los buscadores.
  10. Analiza la actividad de las arañas de los buscadores. Te interesa saber qué páginas se han descargado las arañas, cuándo lo han hecho, y, sobre todo, si han tenido problemas en ese proceso.