Recursos para diseñadores web

HTML y CSS

Diseñar una web es una tarea bastante compleja y más si no contamos con recursos suficientes que nos faciliten la tarea con algunos elementos básicos de una web como pueden ser los fondos, los colores o las fuentes.

Algunas webs nos ofrecen soluciones para esos tres elementos básicos a la hora de conseguir una web con un diseño atractivo. También existen bastantes lugares donde nos enseñan a combinar ciertos elementos para lograr diseños realmente buenos y no llegar a resultados horripilantes o simplones.

Por ejemplo, si lo que estas buscando, posiblemente sea lo primero que te hayas planteado, unos colores principales para la web, tienes que partir por saber como combinar colores en la web, para ello un tutorial bastante ilustrativo para combinar colores en tu plantilla y no morir buscando una combinación errónea.

Después de saber como combinar los colores dentro de una página web, lo siguiente es tener algunos colores que nos gusten y que sean atractivos en tus diseños. La siguiente web nos propone bastantes colores, originales todos ellos con sus códigos RGB y hexadecimal, tanto en modo aleatorio como clasificados por escala de colores.

También puedes optar por el uso de texturas para los fondos principales de tu web, si es así, deberías conocer algunos sitios donde poder disfrutar de estos recursos tan elegantes si se combinan bien. Entre ellos puedes intentar hacerlos tu mismo, con este generador de texturas, o si lo prefieres, puedes elegir algunas texturas ya creadas en este pequeño directorio de texturas.

Por último, y no menos importante para conseguir un buen diseño web, es la elección de una fuente idónea para la página. Para ello puedes visitar y elegir alguna de los tipos de letra disponibles que tenemos en este directorio de fuentes.

Si además quieres darle toques diferentes incorporando algunos iconos temáticos con diseños simples pero elegantes, lo mejor es visitar este directorio de iconos que posee una gran cantidad de ellos, a precios competitivos y con una amplia colección. Podrás disfrutar de colecciones si buscan alguna temática en especial u obtener iconos determinados.


Biblioteca de libros de programación en español

Si hay una cosa importante para ser un buen desarrollador es conocer el inglés de tal manera que puedas leer documentación y manuales en la lengua de Shakespeare, pero si no es así o prefieres tener manuales en español, te convendría disfrutar de la biblioteca que se está montando en GitHub con todo tipo de recursos para la programación, tanto de lenguajes, PHP, Javascript, CSS, como metodología, bases de datos y algoritmos.

La iniciativa no solo esta en español, sino que dispone de de bastante idiomas, por supuesto en inglés, pero también alemán, italiano, portugués, ruso y otros muchos. Además esta abierta a las nuevas contribuciones, por lo que el número de recursos probablemente siga creciendo.

Podemos encontrar estos recursos en versión web, otros en PDF y por supuesto podremos adjuntar nuestra ayuda siguiendo las instrucciones convenientes para seguir aumentando esta comunidad.

A la par se está intentando crear una sección que incluya podcasts sobre programación, aunque actualmente solo está disponible en checo e inglés y no tienen mucho contenido, pero promete convertirse también en una referencia.

Podéis disfrutar de todos los recursos en inglés y español.

Publicado el

Media Queries

resposive

Seguro que mucha gente se acuerda de lo tedioso de programar y diseñar una web para que se viese correctamente tanto en móvil como en las pantallas convencionales de los ordenadores, el tener que programar dos hojas de estilos, tirar de javascript para conseguir que nos reconociese la pantalla desde la que navegábamos y mil historias más.

Gracias a dios todo evoluciona y el diseño web no podía ser de otra manera. En las últimas versiones de CSS, concretamente con CSS3, nos encontramos con las media queries que se trata de expresiones para restringir las características de los elementos en un ancho, alto o color determinado. Podemos lograr con esto que algunos elementos de la página web, véase los divs, imágenes o cabeceras tengan diferentes propiedades en función a un tamaño de pantalla o a un color.

Media Queries y los tamaños de la pantalla

Posiblemente el ejemplo más interesante y con el que más rendimiento podemos encontrar al usar las media queries sean el cambio de resolución o tamaño de pantalla y la visualización de algunos elementos. Además de conseguir resultados rápidos, las media queries resultan muy sencillas de usar, consiguiendo un diseño resposive en pocos pasos.

Si nos ponemos con los ejemplos podemos imaginar un div que queremos que desaparezca cuando se navega desde un teléfono móvil, ese div lo tratamos de manera normal en el principio de nuestra declaración en CSS, tan sólo debemos pensar en la medida a partir de la cual queremos hacerle desaparecer, por ejemplo 480 pixels, entonces tendremos que incluir lo siguiente en nuestro CSS:

@media screen and (max-width: 480px) {
.contenedor{
display: none;
}
}

Con este pequeño fragmento podremos hacer desaparecer el div contenedor cuando el tamaño de la pantalla desde la que navegamos sea menor a 480 pixels de ancho. Con esto se abre un abanico de posibilidades como por ejemplo, hacer que un elemento de la web se coloque en diferentes posiciones según se vaya reduciendo el ancho de la pantalla, que se sobreponga encima de otros elementos, con el z-index, pero también podremos jugar con los colores de la pantalla o con el alto de la pantalla, tan sólo tendremos que cambiar la propiedad max-width por max-height.

Publicado el

Añadir anuncios entre párrafos

anuncios

Si existe algún tipo de anuncio que me ha funcionado especialmente bien en todas las webs que he tenido, ha sido la inclusión de pequeños bloques de anuncios entre el contenido de los artículos. Pero a veces, principalmente dependiendo del tipo de plantilla, es bastante difícil colocar los anuncios de esa forma, por eso, tras mucho tiempo haciéndolo de una manera poco ortodoxa, he encontrado una pequeña función que soluciona drasticamente este problema.

Lo único que hay que hacer es copiar el código de más abajo en el archivo functions.php de nuestro WordPress e implementar en el lugar correcto el código del anuncio que queremos incluir entre el contenido.

/*
@author Brad Dalton - WP Sites
@link http://wpsites.net/web-design/ads-specific-paragraph-single-posts/
*/
add_filter( 'the_content', 'wpsites_adsense_middle_content' );
function wpsites_adsense_middle_content( $content ) {
if( !is_single() )
 return $content;
 $paragraphAfter = 2; //Número del párrafo después del que quieres que aparezca el anuncio
 
 $content = explode ( "</p>", $content );
 
 $new_content = '';
 
 for ( $i = 0; $i < count ( $content ); $i ++ ) {
 
   if ( $i == $paragraphAfter ) {
 
     $new_content .= '' //Dentro de las comillas introduces el código del anuncio
 
     $new_content .= $content[$i] . "</p>";
 
   }
 
 return $new_content;
 
 }

Puedes visitar el GitHub del creador de este fragmento de código, https://gist.github.com/braddalton/5487953


url

4 herramientas para optimizar el rendimiento de tu web

url

Uno de los principales problemas a los que se enfrenta un administrador de páginas es a la carga de la web. A veces se necesitan herramientas que nos ayuden a encontrar los fallos o aquellos recursos o motivos que nos pueden llevar a tener un tiempo de carga elevado que puede motivar la salida de los visitantes de la web.

Aquí os muestro algunas herramientas que pueden ayudar a optimizar esa velocidad de carga:

GTMetrix: Esta web realiza un informe detallado de todos los recursos de tu web y te propone posibles soluciones de cara a mejorar la velocidad de carga de la web. Bastante detallado y con un gran diseño, los informes te pueden ayudar a mejorar bastante la velocidad de tu web, además, permite descargar el informe en PDF. Como única nota negativa es que sólo está disponible en inglés.

Google Page Speed: Este servicio de Google analiza tu web y te presenta un informe detallado de todos los recursos que en tu web genera deficiencias en la carga y las posibles mejoras a realizar en tu web. Otra ventaja, a parte de ser de Google, es que ofrece tanto un informe para PCs como para dispositivos móviles. Este si que lo tenemos en español.

Pingdom: Esta herramienta genera un gran gráfico en el que podemos ver todos los recursos, HTML, Javascript, CSS, imágenes, etc., y su tiempo de carga con el tamaño del archivo. También nos obsequia con un resumen sobre mejoras que podemos aplicar para mejorar el tiempo de carga. Además, podremos guardar un histórico para comprobar si los cambios realizados han mejorado el tiempo de carga.

WooRank: Aunque realiza un análisis más global, por ejemplo, destacando algunas facetas del dominio, como antigüedad, o de las visitas, como la procedencia o la cantidad de tráfico, también dedica un espacio a la revisión de la optimización, comprobando la existencia de frames, errores de código y algunos aspectos interesantes. El informe que genera es muy agradable de ver e intuitivo y además en español.