Hay veces en que las ideas parecen venir solas, y otras en las que es necesario salir en busca de la inspiración. Para esto último existen multitud de webs que, a modo de galerías, nos dan ideas para nuestros diseños web y nos permiten estar al tanto de las tendencias en este mundillo, que es tan cambiante o más que en otras disciplinas del diseño. ¿Necesitas ideas? Pues toma nota de estas recomendaciones:

CSS Manía

Todo un clásico que lleva siguiendo la evolución del diseño en Internet desde el año 2004, con multitud de actualizaciones casi a diario que convierten a esta galería en toda una referencia. Una fuente casi inagotable de ideas que no puede faltar en tus lecturas diarias si lo de diseñar webs está entre tus proyectos presentes o futuros.

Enlace | CSS Manía

CSS Impress

Otra propuesta a la que merece la pena seguir la pista por la gran cantidad de actualizaciones que nos trae, convirtiéndose en un flujo constante de ideas con las que enriquecer nuestras creaciones. Cuenta además con la interesante posibilidad de buscar en categorías organizadas por colores, por si nos apetece crear algo en un tono determinado y buscamos ejemplos que vayan en este estilo.

Enlace | CSS Impress

Designflavr

Esta galería no se centra en el diseño web, sino que ofrece ideas sobre arte visual en general, pero podemos navegar exclusivamente por su categoría CSS si así lo deseamos. Al repartirse entre más disciplinas se actualiza menos que otras webs del estilo, pero las ideas que ofrecen son siempre muy impactantes y atrayentes.

Enlace | Designflavr (sección web)

Crossmind

La gran ventaja de esta galería es que nos permite filtrar nuestras búsquedas en base a multitud de parámetros: por color, por elementos de diseño, por posibilidades multimedia, por la tecnología empleada… Ideal para cuando busquemos ideas muy concretas. La pega es que no cuenta con algo tan básico como un feed para seguir sus actualizaciones.

Enlace | Crossmind

Design By Grind

Lo interesante de esta última propuesta es que está especializada únicamente en páginas web diseñadas utilizando la técnica de Grind, o cuadrícula, la cual a pesar de no estar muy extendida todavía, ofrece resultados bastante buenos. Ideas y consejos para dotar a tu próximo diseño de una calidad superior de estructuración.

Enlace | Design By Grind

En esta segunda parte del artículo seguiremos desgranando varias de ellas, con especial atención a las que hacen referencia a los diversos lenguajes de programación empleados para crear el gigantesco entramado del que disfrutamos cada vez que nos disponemos a navegar por Internet.

• HTML (HyperText Markup Language): Es el lenguaje de marcado más extendido a la hora de la creación de páginas web de manera estructrada, basándose en la definición de etiquetas que añaden unos atributos concretos a los elementos que rodean. De la unión de este lenguaje con el XML (Extensible Markup Language) surge el XHTML (Extensible HTML), el cual ofrece una mayor flexibilidad.

• CSS (Cascading Style Sheets): Lenguaje centrado en la parte estética de las páginas web, o de cualquier documento basado en lenguajes de marcado compatibles. Se basa en la definición de una hoja de estilos separada del contenido propio del documento, lo que facilita la accesibilidad al mismo y la flexibilidad de su uso.
• PHP (PHP Hypertext Pre-processor): Como veis, se trata de un acrónimo recursivo, pues la primera letra se refiere al propio acrónimo en sí. Se trata de un lenguaje de tipo interpretado para el desarrollo web que resulta bastante versátil en su cometido. Para poder emplearlo en alguna web determinada, el servidor debe estar preparado para hacerlo funcionar.
• RSS (Really Simple Syndication): Se trata del formato más empleado en la actualidad para la definición de los feeds de contenido de las páginas web. Está basado en el lenguaje XML antes comentado, y se identifica universalmente por su conocido icono naranja.



• DHCP (Dynamic Host Configuration Protocol): Protocolo destinado a la obtención de una dirección IP para nuestra conexión a Internet de manera aleatoria, en lugar de disponer permanentemente de una única dirección
• WEP (Wired Equivalent Privacy): Algoritmo para ofrecer seguridad e una red inalámbrica, cuyo uso ya no es recomendado debido a que los niveles de protección que ofrece son bastante bajos a día de hoy.
• WPA (Wi-Fi Protected Access): Este protocolo para la protección de redes inalámbricas fue definido por la Wi-Fi Alliance para superar los bajos niveles de seguridad ofrecidos por el anteriormente explicado WPE. Cuenta con una evolución aún más robusta denominada WPA2.
• SEO (Search Engine Optimization): Conjunto de técnicas destinadas a la optimización de una web para mejorar su posicionamiento orgánico en buscadores, esto es, sin pagar para aparecer en los resultados destacados. El término también sirve para hacer referencia a personas que se encargan de realizar dichas técnicas de manera profesional, a modo de consultores para empresas.
• W3C (World Wide Web Consortium): Organización de carácter internacional que se encarga de velar por la regulación y desarrollo de la multitud de estándares empleados en la web. Fue fundada en 1994 por Tim Berners-Lee y realiza una labor imprescindible para el correcto desarrollo de este gigantesco entramado.

Bueno, siendo francos, no todo es tan terrible, y lo cierto es que es una afición/profesión que también concede muchas alegrías a quienes la llevamos a cabo. Y como toda ayuda recibida es poca en este terreno, hemos pensado que os podrían resultar interesantes unos cuantos consejos para optimizar vuestra web, y hacer así que ésta cargue algo más rápido; porque lo creáis o no, cada décima cuenta.

La forma más evidente de conseguir una mejora en el tiempo de carga es, claro está, contratar un servidor más rápido. Pero para lo que yo estoy aquí es para contaros cómo podéis mejorar ese aspecto sin gastaros ni un duro. Tomad nota:

• El CSS y el Javascript en archivos externos: Este primer punto es una práctica muy recomendable por muchas otras razones además de por aligerar el tiempo de carga. En cualquier caso, centrándonos en el tema que nos atañe, con esto conseguiremos que el navegador sólo tenga que cargar una vez los elementos de diseño y almacenarlos en la caché, en vez de cargar nuevos elementos cada vez que el visitante abra una nueva página.
• Aprovecha las propiedades CSS que pueden agruparse: Existen varias propiedades que pueden agruparse para ocupar menos líneas de código, como por ejemplo en el caso del fondo de elemento, que nos permite aglutinar todo dentro de Background, en lugar de separarlo en Background-color, Background-image, etc. Hay muchos casos como éste que os pueden ayudar a optimizar vuestro código CSS.
• Optimiza las imágenes: Es uno de los errores más habituales que se cometen en diseño web, y de los que más fácil solución tienen. Intenta siempre buscar un compromiso entre la calidad de las imágenes que implementes en tu web y su peso (en Photoshop, la opción “Guardar para web y dispositivos” es ideal) y piensa que cada formato comprime mejor según las características de la imagen. Por ejemplo, con fotografía o simplemente con imágenes que impliquen mucho degradado de color, lo ideal es JPEG; si los cambios de color son bruscos (como por ejemplo en textos, o capturas web, etc), lo mejor es PNG o GIF. ¡Ah! Y por favor, olvídate de BMP.



Menú de “Guardar para web y dispositivos” en Photoshop




• La información mejor en texto que en imagen: Una vez más, este consejo es ideal por otras razones además de por el tiempo de carga, como por ejemplo la usabilidad o el mejor posicionamiento en buscadores. En lo que a adelgazamiento se refiere, recurre al uso de texto en formato imagen sólo cuando sea imprescindible por cuestiones de diseño, ya que ahorrarás unas preciosas décimas de carga a tus visitantes.
• Evita redundancias de código: Esto enlaza en parte con el segundo consejo que he comentado, aunque en este caso voy más allá, fijándome también en el lenguaje HTML o PHP de tu página. Por lo tortuoso que puede llegar a resultar un desarrollo, es inevitable que queden “residuos” o elementos redundantes en nuestro código, que están suponiendo un lastre para la página. Dedicar un tiempo a detectar aquello que sea innecesario en nuestro trabajo puede dar resultados muy valiosos.
• Usa elementos multimedia sólo cuando sean necesarios: Un consejo tan evidente como desatendido en demasiadas ocasiones, pues obviamente son las cargas más pesadas que podemos ofrecer a nuestros visitantes. Dejando a un lado el hecho de que personalmente el diseño web en Flash me parece algo caduco, si te decides a incluir partes de tu web en dicho formato, te aconsejo que sea porque no tienes más remedio. ¿Y aún piensas que lo de poner música a tu página es un exitazo? Te aconsejo que lo reconsideres.
• Los hacks para Internet Explorer por separado: Y al rey de la fiesta me lo dejo para el final. Sí, el dichoso Internet Explorer que tanto hemos sufrido muchos de nosotros. Lo quieras o no, una vez que termines tu trabajo y éste luzca espectacular en los navegadores decentes, te verás obligado a una prórroga de trabajo para adaptar tu CSS al browser de Microsoft. Una práctica muy recomendable es la de incluir todos los hacks (esto es, los “apaños”) en una hoja de estilos distinta que sólo se cargue cuando el visitante la abra con dicho programa, para que así quienes accedan a nuestra web con otro navegador no tengan que sufrir la carga de ese material extra.
]]> http://www.anexom.es/tecnologia/diseno-web/consejos-para-hacer-que-tu-web-cargue-mas-rapido/feed/ 15