Este artículo esta dividido en las siguiente categorías:

• Tipografía
• Javascript
• HTML
• Imágenes
• Diseño
• CSS
• Varios

Tipografía

Fount

Esta utilidad te ayudará a identificar cualquier tipo de fuente que veas en Internet.

FitText

FitText te permite hacer que el  texto de tus sitios web sean flexibles, esto con el fin de ser utilizados tanto en sitios web normales como sitios web móviles.

Kerning

Con esta utilidad podrás programar junto a CSS algunas increíbles formas de presentar el texto de tu web.

jFontSize

Esta utilidad te permite poner un botón con el cual los usuarios redimensionen el tamaño del texto.

Javascript

Zeon.js

Esta herramienta te ayuda a encontrar errores en tu código JavaScript.

WOW Slider

Esta utilidad te permite incluir Sliders o Carruseles de imágenes en tu sitio web.

Vogue

Vogue te permite recargar la hoja de estilos CSS en el navegador web el el sitio que estés modificando.

yepnope.js

Con esta utilidad puedes decidir cargar solo los scripts que tus usuarios necesitan en tu sitio web.

jQuery Waypoints

Este plugin de jQuery te permite ejecutar diferentes funciona al hacer scroll sobre un elemento en tu sitio web.

jQuery Plugin Boilerplate

Este sitio te muestra una guía para que puedas desarrollar tus propios plugins de jQuery.

Placeholder

Este plugin de jQuery te permite habilitar el atributo placeholder de los formularios en los navegadores que no lo tienen.

Doctor JS

Este sitio analiza tu código JavaScript en busca te problemas y te da en reporte en formato JSON.

HEAD.js

HEAD.js te permite cargar todos tus scripts de JavaScript de una sola vez y en paralelo.

Enkoder

Este sitio te permite codificar en JavaScript tu dirección de email para evitar recibir Spam en él cuando lo publiques en tu sitio web.

JavaScript Garden

Este sitio te muestra una guía detallada sobre todo lo que necesitas saber sobre el lenguaje de programación JavaScript.

Augment.js

Esta librería te permite habilitar métodos modernos de JavaScript.

CamanJS

Esta librería en JavaScript te permite manipular imágenes gracias al Canvas de HTML5.

Share Count JS

Con esta librería en JavaScript  puedes mostrar y combinar tu número de seguidores, fans, etc en las redes sociales de forma sencilla y rápida.

Neon Javascript Library

Esta es un framework para JavaScript que recopila las funciones más usadas en un archivo de tan solo 4 kb.

glfx.js

Esta librería te permite aplicar una gran cantidad de efectos las imágenes de tu web.

spin.js

Con esta librería puedes generar el gráfico de ‘cargando’ sin necesidad de imágenes.

Mobilize.js

Este es un framework de JavaScript y HTML5 con el que puedes transformar tus sitios web en sitios web para dispositivos móviles.

HTML

HTML Email Boilerplate

Este sitio web te ofrece una plantilla base para enviar tus emails en formato HTML y que se vea igual en todos los proveedores (Gmail, Hotmail, Yahoo, etc.).

Fractal

Este sitio te ayudará a validad tus plantillas de HTML para emails y te dirá que errores tienen el código.

Mobile Boilerplate

De los mismos creadores de HTML5 Boilerplate, nos traen una plantilla base para que desarrolles tu sitio web para móviles.

320 and up

Este sitio te provee los archivos necesarios para desarrollar tu sitio de 320px hacia arriba. Se basa en HTML5 Boilerplate.

Canvas Loader Creator

Este sitio utiliza el canvas de HTML5 para generar una imagen de carga para tu sitio web.

Kendo UI

Este sitio te proporciona un framework para mejorar la interfaz de usuario de tu sitio con HTML5.

CanvasText

Con esta librería podrás modificar el texto de tu sitio de formas sorprendentes utilizando la característica canvas de HTML5.

PhoneGap

Este es un framework basado en HTML5 que te proporciona todo lo necesario para crear aplicaciones móviles que funciones en todos los dispositivos móviles.

Mobile Design

En este sitio puedes leer un libro sobre diseño web y de aplicaciones para dispositivos móviles, completamente gratis.

Imágenes

 Aviary

Este sitio te proporciona una forma fácil y en línea de editar tus imágenes.

Placehold.it

Con este sitio serás capaz de utilizar sus imágenes como imágenes de ejemplo en tus diseños.

iPiccy

Este es otro editor en línea de imágenes.

PunyPNG

En este sitio puedes comprimir tus imágenes JPG, GIF y PNG sin perder la calidad de la imagen.

Adaptive Images

Con los archivos que te da este sitio puedes hacer que tus imágenes se adapten al tamaño de la ventana del navegador.

JPEGmini

Utilidad web con la que puedes comprimir al máximo tus imágenes en formato JPG.

Default Icon

Esta página te proporciona una colección de 653 pictogramas que puedes usar en tus diseños web.

NoisePNG

Con esta aplicación podrás crear una imagen con ruido en formato PNG para el fondo de tus diseños.

Imagine

Con esta librería en PHP puedes manipular las imágenes de tu sitio web.

Diseño

DinPattern

En DinPattern encontrarás una gran galería de patrones para el fondo de tus diseños.

bgMaker

Con este sitio podrás crear pixél a pixél el diseño del fondo de tu sitio web.

Pattern Cooler

Aquí encuentras una gran colección de patrones de fondo y además puedes editarlos en línea.

Tartan Maker

Este sitio te ayuda a generar un patrón para el fondo de tus diseños web.

Striped Backgrounds

En este sitio web puedes crear un fondo en forma de barra verticales o puedes encontrar una buena paleta de colores para tu diseño.

Dotted Background Generator

Este sitio genera un fondo con puntos en diferentes tamaños.

Palette Creator

En este sitio puedes crear una paleta de colores para utilizar en tu próximo diseño web.

Kuler

Sitio web donde puede encontrar una gran cantidad de paletas de colores para tus diseños.

Color Palette Generator

Esta herramienta te permite generar una paleta de colores sacados de una imagen que puedes especificar.

Color Scheme Designer

En este sitio también puedes crear tu propia paleta de colores.

Pictaculous

Con esta herramienta puedes subir una imagen y obtener la paleta de colores que la compone.

ColorMunki

Aquí también puedes generar una paleta de colores para tu diseño web.

RoundedCornr

Este sitio genera el código necesario para hacer bordes redondeados en tu diseño.

Tabs Generator

Con esta aplicación puedes generar los tabs para tus proyectos web.

Patternizer

Con este sitio puedes generar fácilmente un patrón para el diseño de tu sitio web.

CSS

CSS Sprites

Esta herramienta web te ayudará a crear el sprite de tus imágenes de una forma más fácil.

Fluid Grids

Con esta herramienta puedes generar una plantilla de columnas fluidas de CSS.

LESS CSS

Herramienta que te permite extender el lenguaje CSS, añadiendo la posibilidad de crear funciones, variables, hacer operaciones y más, y así escribir menos código CSS.

LESS Boilerplate

Este sitio te proporciona una plantilla base para poder trabajar más fácil con LESS CSS.

Stripemapper

Con Stripemapper puedes generar un stripe utilizando una simple imagen y Phyton.

CSSsitemap System

Este sitio te presenta un sistema para poder hacer un mapa del tu sitio web utilizando CSS.

Normalize.css

Con este CSS puedes hacer que tu web se vea más consistente e igual en todos los navegadores. Es un reemplazo al ya famoso CSS Reset.

holmes.css

Este archivo de CSS te ayuda a descubrir algunos que tengas en el estilo de tu sitio web.

CSS Crush

Este es un preprocesador de CSS basado en el lenguaje PHP que extiende el lenguaje CSS y lo compila minimizado y con compatibilidad entre navegadores.

CSSPrefixer

Con esta herramienta puedes modificar tu CSS para ponerle los prefijos de cada navegador.

CSS Pivot

Con esta herramienta puedes probar cambiar el estilo CSS de cualquier sitio web que desees.

PCSS

Este es otro preprocesador de CSS que le añade funciones, variables, etc.

GridCalc

Con esta aplicación podrás calcular y generar una plantilla de columnas de CSS.

CSS3 Button Generator

Esta herramienta te permite generar un botón solo con CSS3.

CSS3 Button Generator

Otro sitio que te ayuda a generar botones utilizando solo CSS3.

CSS Button Generator

Otro sitio que te ayuda a generar botones solo con CSS3.

CSSWARP

Con esta herramienta puedes hacer que un texto predeterminado se vea  en forma ondulada o circular.

CSS Text Shadow

Con esta herramienta puedes generar muy buenos efecto utilizando las sombras de los textos de CSS3.

CSS Border Radius Generator

En este sitio puedes generar fácilmente el código necesario para tener bordes redondeados en tu diseño.

Prefixr

Esta aplicación te permite ponerle los prefijos de todos los navegadores a tus estilos en CSS.

Google+ UI Buttons

Botones totalmente realizados en CSS3 con el estilo visual de Google+.

Button CSS3 UI

Framework con botones realizados totalmente en CSS3.

CSS Load

Este sitio te permite generar spinners de carga solo mediante CSS.

CSS Button

Con este sitio web puede crear botones o editar los ya existentes en la galería.

Prefix Free

Con esta librería puedes poner los prefijos al CSS solo cuando estos sean necesarios, o sea, dependiendo del navegador en que se esté mostrando tu sitio web.

Animate.css

Este sitio te provee el código CSS3 necesario para hacer gran cantidad de animaciones sin necesidad de utilizar otra cosas sino CSS.

Varios

Chop

Con este sitio puedes compartir código con tus usuarios o con quién quieras.

mokk.me

Sitio que te permite realizar la estructura para tu aplicación web para poder mostrarla a tus usuarios.

Zen Coding

Con este plugin puedes hacer que programar HTML y CSS sea mucho más fácil.

griddle.it

Sitio que te proporciona una imagen con columnas al estilo Framework de CSS para que pongas en tu diseño para alinearlo correctamente.

Swiffy

Con esta utilidad puedes convertir archivos de Flash (SWF) a HTML5.

Launchlist

Este sitio te ayuda a verificar que tu nuevo diseño web salga sin errores.

Bounce

Con esta herramienta puedes hacer una captura de pantalla de cualquier web y hacer comentarios o dejar ideas sobre ella.

Screenfly

En este sitio puedes ver como se ve tu página en diferentes resoluciones de pantalla.

loads.in

Esta utilidad te ayuda a saber cuanto demora en cargar tu sitio web.

Domainr

Este sitio actúa como un buscador de dominios para ver si está disponible o no.

iOS Boilerplate

Este sitio ofrece una plantilla base para desarrollar aplicaciones móviles para el sistema iOS de iPhone, iPad e iPod Touch.

Touchy Boilerplate

Este sitio te ofrece una plantilla para desarrollar aplicaciones móviles para cualquier dispositivo.

YOURLS

Con esta librería puede crear tu propio acortador de URLs.

IM CREATOR

Con esta aplicación puedes crear un sitio web completamente funcional y muy fácilmente.

Infografía

• Pixelco
• 1st Web Designer
• Smashing Magazine
• Web Design Ledger
• Web Resources Depot
• Smashing Hub
• Slodive
• Web and Designers
• Web Design Shock
• Admixweb

Alguna vez te has preguntado como hacen los diseñadores para que sus diseños se vean tan bien, tan consistentes visualmente. La mayoría de ellos utilizan Grid Frameworks de CSS, no todos.

Estos son sistemas de columnas (Grids) con los que puedes diseñar más fácil tu sitio web, darles una mejor estructura. Algunos traen, además del sistema de columnas, estilos en CSS ya predefinidos para que no tengamos que codificarlos nosotros mismos, estilos para formularios, tipografías, tablas, dispositivos móviles, etc.

Con estos frameworks para CSS puede alcanzar una cohesión visual para tus diseños, reducir los errores en tu CSS, alcanzar una buena compatibilidad con todos los navegadores y dispositivos móviles y te ayuda a reducir el esfuerzo de crear una plantilla nueva para tu diseño web.

Para ahorrarte la tarea de encontrar un buen framework para CSS aquí te traigo 35 grid frameworks para CSS con los que diseñar sitios web se te hará mucho más fácil.

1. Less Framework

2. Grid

3. inuit.css

4. Baseline

5. Gravity

6. Columnal

7. Perkins CSS3 LESS Framework

8. 520 Grid System

9. Gridless

10. The Square Grid

11. Fluid Grid System

12. Frameless

13. Fluid 960 Grid System

14. Logic CSS

15. Blueprint

16. CSS Boilerplate

17. The 1kb CSS Grid

18. YAML CSS Framework

19. Easy front-end framework

20. SenCSs

21. The Simpler Grid

22. Elastic CSS Framework

23. FEM CSS Framework

24. BlueTrip CSS Framework

25. Not Just a Grid

26. The Golden Grid

27. The 1140px CSS Grid System

28. Golden Grid System

29. 960 Grid System

30. The Semantic Grid System

31. Magazine Grid

32. SimplerGrid

33. BluCSS

34. Cabin CSS Framework

35. Toast

El HTML5 ha sido un tema realmente interesante, que ha tomado mucha importancia en los últimos años en el desarrollo web. Ahora la mayoría de los navegadores modernos (Safari, Chrome, Firefox, IE10 y dispositivos móviles) soportan la mayoría de las características de este nuevo estándar web, aún cuando no está completa todavía.

Para ayudarte a hacer que tu migración a HTML5 sea más rápida y fácil, aquí he recopilado 23 sitios web útiles o herramientas que te ayudarán a entender y a empezar con HTML5.

1. HTML5 Boilerplate

Este sitio web te proporciona una plantilla base de HTML/CSS/JS con las últimas normas del HTML5, CSS3, normalización del CSS, JavaScript. Este sitio te proporciona varios tips y técnicas para empezar correctamente con el uso del HTML5.

2. Modernizr

Esta es una librería de JavaScript que te ayuda a implementar las nuevas ventajas del HTML5 y del CSS3.

3. Sprite.js

Sprite.js es una librería javascript que te permite realizar animaciones en tu sitio web sin la necesidad de Flash, utilizando la característica Canvas de HTML5.

4. Video.js

Esta es una librería en Javascript para reproducir video en HTML5 y que se vea igualmente en todos los navegadores. Trae también un reproductor en flash para los navegadores que no soporten la etiqueta  <video> de HTML5.

5. Audio.js

Audio.js es una librería en Javascript con las misma características de Video.js, pero para la etiqueta <audio>. Compatibilidad entre navegadores de esta nueva función.

6. Lime.js

Este es un framework completo en Javascript que te ayudará a realizar juegos para escritorio, web o dispositivos móviles con la ayuda de HTML5.

7. 52framework

Framework que te ayuda a utilizar lo último de HTML5, CSS3 y Javascript.

8. HTML5 Reset

Framework para HTML5 que acumula las mejores prácticas y técnicas para empezar con este nuevo estándar.

9. G5 Framework

Otro framework para HTML5 que te sirve para comenzar con un nuevo sitio web.

10. JoApp

Este es un framework para desarrollar aplicaciones móviles utilizando HTML5.

11. PressWork

Framework en HTML5 que puedes utilizar para crear temas de WordPress.

12. Bones

Bones es un framework de HTML5 optimizado para crear nuevos temas para WordPress.

13. Roots

Roots es otro framework de HTML5 para temas en WordPress.

14. Reformed

Este sitio te ayudará a crear formularios para tu sitio web con las nuevas características del HTML5.

15. SwitchToHTML5

Este sitio te proporcionará algunas opciones para que tu puedas generar una plantilla base de HTML5 a tu gusto.

16. HTML5 Template Generator

Este sitio generará una plantilla base en HTML5 para que empieces a crear tu sitio web.

17. Initializr

Initilizr es un sitio que genera plantillas para HTML5. Te ofrece varias posibilidades: Descargar la plantilla por defecto, personalizar un poco tu plantilla o personalizar completamente todas las opciones de la plantilla.

18. HTML5 Visual Cheat Sheet

Este documento ofrece un vista simplificada y explicada de las nuevas características de HTML5.

19. HTML5 Pocket Book

Sitio web que te enseña lo más básico de las nuevas características de HTML5.

20. HTML5 Canvas Cheat Sheet

Este sitio te ofrece un documento con todo lo que necesitas saber para poder utilizar la función Canvas de HTML5.

21. Aloha Editor

Este sitio te proporciona un editor WYSIWYG completamente en HTML% para que lo incluyas en tu sitio web.

22. Deck.js

Con Deck.js podrás crear presentaciones como las de PowerPoint o Keynote pero totalmente realizadas en HTML5.

23. Wallaby

Con esta utilidad de Adobe podrás convertir tus animaciones en Flash (FLA) a HTML5.

El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños.

Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web.

Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

Demostración

Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Demostración

Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:

h2 {
font-size:24px;
font-weight:bold;
color: #262626;
opacity: 1.0;
-webkit-transition: opacity 0.4s linear;
}
h2 a {
color: #262626;
}
h2:hover {
opacity: 0.7;
}

Demostración

Rotar una imagen

Este Código CSS te permite rotar una imagen los grados que gustes:

img {
transform:
rotate(45deg)
scale(-1, 1);
/* para firefox, safari, chrome, etc. */
-webkit-transform:
rotate(45deg)
scale(-1, 1);
-moz-transform:
rotate(45deg)
scale(-1, 1);
/* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
/* opera */
-o-transform:
rotate(45deg)
scale(-1, 1);
}

Demostración

Mover 1px el enlace al hacer clic

Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:

a:active {
position: relative;
top: 1px;
}

Demostración

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, Ipads, Androids, etc):

/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

Configurar el tamaño del texto a 62.5% para convertir fácilmente en EM

Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión de dividir por 10 el valor en pixéles:

body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}

Hacer que el cursor se vuelva un apuntador de enlace

Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en estos elementos solo debes poner el siguiente código:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}

Quitar la linea de color que rodea los elementos input

Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes poner el siguiente código CSS:

input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
outline: none;
}

Crear un efecto giratorio y de zoom en las imágenes

Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un efecto zoom hasta volver a la normalidad:

@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

a.advert    { width:125px; height:125px; display:block; }
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Demostración

Hacks de CSS dependiendo del navegador

Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen algunos hacks para hacer código CSS dependiendo de cada navegador:

/***** Hacks de Selectores CSS ******/

/* IE6 y anteriores */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Todo menos IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Solo Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Hacks de Atributos ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Todo menos IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- actúa como !important */
#veintesiete { color: blue !ie; }

Animar una lista de enlaces

Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:

#animateList li a {
cursor: pointer;
-webkit-transition: padding-left 250ms ease-out;
-moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
padding-left: 10px;
}

Demostración

Transparencia / Opacidad en todos los navegadores

Con este código podrás poner transparencia a elementos de tu diseño y que funciones en todos los navegadores

div {
/* FF, Safari, Chrome, IE9 y 10 */
opacity:0.7;

/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE8 */
filter: alpha(opacity=70); /* IE 5-7  */
}

Estilo para enlaces externos

Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un icono al lado del enlace:

a[href^="http"] {
background: url(icono.png) no-repeat;
padding-left: 10px;
}

Demostración

Estilo del enlace dependiendo de una palabra predefinida

Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL del enlace:

a[href*="trazos"] {
color: #39486c;
}

Demostración

Estilo del enlace dependiendo de extensión del archivo enlazado

Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG, etc:

a[href$=".jpg"] {
color: red;
}

Demostración

Utilizar fuentes de Google

Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:

Debes agregar el código que te genera la página de Webfonts entre las etiquetas <head> y </head>:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>

y luego este en el archivo de tus estilos CSS:

h1 {
font-family: 'Ubuntu', sans-serif;
}

Demostración

Hacer texto con bajo relieve

Con este código CSS haces que el texto se vea con un efecto de bajo relieve:

body {
background: #222222;
color: #131313;
font-size: 100px;
}

p {
text-align: center;
text-transform: uppercase;
text-shadow: #2d2f2d 2px 2px 4px;

}

Demostración

Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Solo debes poner esto en donde quieras que aparezcan los tabs:

<div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>

<div class="content">
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>

<div class="content">
<p>Aquí va algún contenido para el tab 2</p>

<img src="http://lorempixum.com/200/100/technics/">
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>

<div class="content">
<p>Aquí va algún contenido para el tab 3</p>

<img src="http://lorempixum.com/200/100/nightlife/">
</div>
</div>

</div>

y luego poner esto en el archivo de estilos CSS:

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform:    translateX(-100%);
-ms-transform:     translateX(-100%);
-o-transform:      translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-ms-transition:     all 0.6s ease;
-o-transition:      all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform:    translateX(0);
-ms-transform:     translateX(0);
-o-transform:      translateX(0);
}

Demostración

Infografía

• BlueFaqs.
• David Walsh.
• Six Revisions.
• Design Shack.
• Nettuts+.
• Design your Way.
• 1st Web Designer.
• Web Expedition 18.
• CSS-Tricks.

WordPress, como gran herramienta para bloggers, se actualiza a menudo y así mismo aparecen nuevas funciones, nuevos trucos o tips que extienden un poco más las vastas funcionalidades de este poderoso CMS. Es por eso, que ya anteriormente había publicado una lista de 30  trucos, funciones y tips para WordPress y esta vez te traigo 28 trucos más, para que puedas modificar tu blog de WordPress a gusto.

1. Mover la barra de administración hacia abajo

La barra de administración es una nueva característica añadida desde WordPress 3.1. Esta barra por aparece por defecto en la parte superior del navegador y muestra enlaces para entrar rápidamente a editar un artículo, crear uno nuevo, ingresar al panel de administración, etc.

Si quieres mostrar esta barra en la parte inferior del navegador, solo debes pegar el siguiente código en el archivo functions.php de tu theme.

// mover barra de admin al fondo
function bajar_admin_bar() { ?>
<style type="text/css">
body {
margin-top: -28px;
padding-bottom: 28px;
}
body.admin-bar #wphead {
padding-top: 0;
}
body.admin-bar #footer {
padding-bottom: 28px;
}
#wpadminbar {
top: auto !important;
bottom: 0;
}
#wpadminbar .quicklinks .menupop ul {
bottom: 28px;
}
</style>
<?php }
// en el panel de administración
add_action( 'admin_head', 'bajar_admin_bar' );
// en el blog
add_action( 'wp_head', 'bajar_admin_bar' );

2. Eliminar la barra de administración

Si lo que deseas es no mostrar por ningún motivo la barra de administración, solo debes colocar el siguiente código en el archivo functions.php:

wp_deregister_script('admin-bar');
wp_deregister_style('admin-bar');
remove_action('wp_footer','wp_admin_bar_render',1000);
remove_action('init', 'wp_admin_bar_init');

3. Desbloquear botones útiles en el editor visual

El editor visual de WordPress tiene casi todos los botones necesarios para editar el contenido de tu artículo, pero hay veces que requieres algunas opciones un poco más detalladas, como estilos, tamaños de la fuente, etc.

Para lograr esto solo debes pegar el siguiente código en el archivo functions.php:

function habilitar_mas_botones($buttons) {
$buttons[] = 'hr';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'cleanup';
$buttons[] = 'styleselect';
return $buttons;
}
add_filter("mce_buttons_3", "habilitar_mas_botones");

Con la anterior función se añade una tercera fila de botones en el editor incluyendo botones para: incluir una línea horizontal, sub-indices, super-indices, seleccionar tipo de fuente, tamaño de fuente, limpiar código y seleccionar estilos. Puedes añadir más estilos si quieres, aquí la lista completa de botones disponibles.

4. Cambiar la fuente del editor

Si deseas cambiar el tipo de fuente con la que se muestra el texto en el editor visual de WordPress, solo debes pegar el siguiente código en el archivo functions.php:

add_action( 'admin_head-post.php', 'cambiar_fuente_editor' );
add_action( 'admin_head-post-new.php', 'cambiar_fuente_editor' );

function cambiar_fuente_editor() { ?>
<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen { font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; }</style>
<?php }

Obviamente puedes cambiar la fuente  ’Georgia’ según sea tu gusto.

5. Permitir más etiquetas HTML en el editor HTML de WordPress

El editor HTML de WordPress no permite etiquetas HTML que no sean de XHTML 1.0. Este código hace que el editor acepte más etiquetas, solo debes pegarlo en el archivo functions.php:

function cambiar_opciones_mce($initArray) {
$ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}

return $initArray;
}
add_filter('tiny_mce_before_init', 'cambiar_opciones_mce');

6. Hacer que tu artículo se vea mejor cuando se comparte en Facebook

Este código sirve para que cuando un usuario comparte tu artículo en Facebook, se vea lo mejor posible, con imagen relacionada o imagen por defecto, enlace hacia web del autor, título, descripción, etc.

Solo debes colocar el siguiente código en el archivo header.php de tu theme antes de la etiqueta <?php wp_head(); ?> :

<?php
$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
?>

<?php if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo catch_that_image(); } else { echo $thumb; } ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo catch_that_image(); } else { echo $thumb; } ?>" />
<?php } ?>

Y luego pegar el siguiente código en el archivo functions.php:

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = get_bloginfo('stylesheet_directory')."/images/default_icon.jpg";
}
return $first_img;
}

Aquí solo debes cambiar “default_icon.jpg” por la imagen que quieres que salga por defecto.

7. Acortar dirección de ingreso al Panel de Administración

Para hacer que la dirección de ingreso de usuarios al Panel de administración sea mas simple solo debes poner el siguiente código en el archivo .htaccess que se encuentra en la carpeta raíz de tu blog:

RewriteRule ^login$ http://www.trazos-web.com/wp-login.php [NC,L]

Con este código ahora la dirección para entrar al formulario de ingreso será http://www.trazos-web.com/login en vez de http://www.trazos-web.com/wp-login.php. Obviamente debes cambiar “www.trazos-web.com” por la dirección de tu blog.

8. Deshabilitar cambio de theme

Cuando creas un sitio en WordPress para un cliente, tal vez debas asegurarte que éste no pueda cambiar el theme del blog. Para esto solo debes pegar el siguiente código en el archivo functions.php:

add_action('admin_init', 'bloquear_theme');
function bloquear_theme() {
global $submenu, $userdata;
get_currentuserinfo();
if ($userdata->ID != 1) {
unset($submenu['themes.php'][5]);
unset($submenu['themes.php'][15]);
}
}

9. Deshabilitar trackbacks hacia artículos del mismo blog

Los trackbacks son un sistema de aviso a otros bloggers de que un artículo de ellos ha sido enlazado desde nuestro artículo. El problema con esto viene cuando enlazas un artículo de tu mismo blog, un trackback hacia ti mismo será mostrado en el artículo enlazado.

Para evitar esto, debes poner el siguiente código en el archivo functions.php:

function disable_self_ping( &$links ) {
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, get_option( 'home' ) ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'disable_self_ping' );

10. Mostrar imagen miniatura de cualquier sitio

WordPress.com tiene un servicio llamado mShots, que te permite capturar una imagen en miniatura de cualquier sitio. El siguiente código crea un shortcode para que puedas agregarlo fácilmente a tus artículos. Solo debes pegarlo en el archivo functions.php:

function wpr_snap($atts, $content = null) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.trazos-web.com',
"alt" => 'My image',
"w" => '400', // ancho
"h" => '300' // alto
), $atts));

$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
return $img;
}

add_shortcode("snap", "wpr_snap");

y luego añadir el código del shortcode en la parte del artículo donde quieras que se muestre la imagen:

[snap url="http://www.trazos-web.com" alt="Descripción" w="400" h="300"]

Esto mostrará una captura en miniatura de Trazos Web de tamaño 400×300 pixéles.

11. Eliminar notificación de actualización para no administradores

Este código hace que las notificación de actualización de WordPress solo sean visibles por los administradores del sitio. Copia y pega el siguiente código en el archivo functions.php:

global $user_login;
get_currentuserinfo();
if ($user_login !== "admin") {
add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}

12. Paginación de artículos sin necesidad de un plugin

Este código crea una paginación normal, como lo haría el plugin WP-Pagenavi. Solo debes pegar el siguiente código en el archivo functions.php:

function pagination($prev = '«', $next = '»') {
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => __($prev),
'next_text' => __($next), 'type' => 'plain'
);
if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array( 's' => get_query_var( 's' ) ); echo paginate_links( $pagination );
};

Ahora solo debes añadir la función pagination() al loop de WordPress así:

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
// aquí va el contenido del artículo
<?php endwhile; ?>
<div class="pagination"><?php pagination('»', '«'); ?></div>
<?php endif; ?>

También puedes modificar el estilo de la paginación con las siguiente clases de CSS que nos da WordPress:

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers { font-size: 14px; color: #3888ff; }

13. Eliminar contenido de wp_head()

Este código te ayuda a eliminar algún código basura, inútil que se inserta automáticamente en nuestra cabecera de WordPress. Solo pega el siguiente código en el archivo functions.php:

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);

14. Recortar el tamaño del título

Si solo quieres mostrar algunos caracteres del título del artículo, debes hacer lo siguiente:

Pegar esto en el archivo functions.php:

function ODD_title($char) {
$title = get_the_title($post->ID);
$title = substr($title,0,$char);
echo $title;
}

Y luego esto donde quieres que vaya el título recortado. Aquí se muestran solo 20 caracteres. Este código debe ir dentro del Loop de WordPress:

<?php ODD_title(20); ?>

15. Permitir a los colaboradores subir archivos

Como medida de seguridad WordPress no permite que los colaboradores puedan subir archivos al blog. Pero si aún así deseas que ellos puedan hacerlo, aquí te dejo el código necesario que debes pegar en el archivo functions.php:

if ( current_user_can('contributor') && !current_user_can('upload_files') )
add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
$contributor = get_role('contributor');
$contributor->add_cap('upload_files');

16. Categorizar y etiquetar artículos automáticamente

Con este código puedes hacer que al guardar un artículo automáticamente vaya con tal etiqueta o con tal categoría. No olvides modificar “nuevo tag” o “Alguna Categoría” por el nombre de la categoría y/o el nombre de la etiqueta. Estas ya deben haber sido creadas anteriormente. Solo pega esto en el archivo functions.php:

<?php
add_action( 'wp_insert_post', 'update_post_terms' );
function update_post_terms( $post_id ) {
if ( $parent = wp_is_post_revision( $post_id ) )
$post_id = $parent;
$post = get_post( $post_id );
if ( $post->post_type != 'post' )
return;
// add a tag
wp_set_post_terms( $post_id, 'nuevo tag', 'post_tag', true );
// add a category
$categories = wp_get_post_categories( $post_id );
$newcat = get_term_by( 'name', 'Alguna Categoría', 'category' );
array_push( $categories, $newcat->term_id );
wp_set_post_categories( $post_id, $categories );
}
?>

17. Utilizar por defecto el acortador de URLs de Google (goo.gl)

Para utilizar este acortador solo debes incluir lo siguiente en el archivo functions.php:

function googl_shortlink($url, $post_id) {
global $post;
if (!$post_id && $post) $post_id = $post->ID;

if ($post->post_status != 'publish')
return "";

$shortlink = get_post_meta($post_id, '_googl_shortlink', true);
if ($shortlink)
return $shortlink;

$permalink = get_permalink($post_id);

$http = new WP_Http();
$headers = array('Content-Type' => 'application/json');
$result = $http->request('https://www.googleapis.com/urlshortener/v1/url', array( 'method' => 'POST', 'body' => '{"longUrl": "' . $permalink . '"}', 'headers' => $headers));
$result = json_decode($result['body']);
$shortlink = $result->id;

if ($shortlink) {
add_post_meta($post_id, '_googl_shortlink', $shortlink, true);
return $shortlink;
}
else {
return $url;
}
}

add_filter('get_shortlink', 'googl_shortlink', 9, 2);

Y luego añadir el siguiente código en donde quieras utilizar la URL corta de tu artículo:

echo "URL corta: " . wp_get_shortlink();

18. Redireccionar la búsqueda si solo hay un resultado

Este código redirecciona al primer artículo resultado de una búsqueda, si solo hay un artículo en la búsqueda. Pega esto en el archivo functions.php:

add_action('template_redirect', 'single_result');
function single_result() {
if (is_search()) {
global $wp_query;
if ($wp_query->post_count == 1) {
wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
}
}
}

19. Editar el enlace de registro de WordPress

Si deseas cambiar el texto del enlace de registro, puede utilizar este código para personalizarlo. Solo debes ponerlo en el archivo functions.php y editar el texto ‘Únete, o lo que quieras’:

add_filter( 'gettext', 'wpc_register_anchor' );
add_filter( 'ngettext', 'wpc_register_anchor' );
function wpc_register_anchor( $translated ) {
$translated = str_ireplace( 'Register', 'Únete, o lo que quieras', $translated );
return $translated;
}

20. Mostrar en el panel de administración el número total de palabras publicadas en el blog

Este código muestra el número total de palabras publicadas en los artículos, justo debajo de las estadísticas de número de artículos, categorías, páginas y etiquetas. Solo pega el siguiente código en el archivo functions.php:

function post_word_count() {
$count = 0;
$posts = get_posts( array(
'numberposts' => -1,
'post_type' => array( 'post', 'page' )
));
foreach( $posts as $post ) {
$count += str_word_count( strip_tags( get_post_field( 'post_content', $post->ID )));
}
$num = number_format_i18n( $count );
$text = _n( 'Palabra', 'Palabras', $num );
echo "<tr><td class='first b'>{$num}</td><td class='t'>{$text}</td></tr>";
}
add_action( 'right_now_content_table_end', 'post_word_count');

21. Detectar el navegador del lector

Este código puede ser útil para mostrar un estilo diferente o algo diferente en cada navegador. Solo debes poner el código en el archivo functions.php:

function wpc_browser_det($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) {
$classes[] = 'ie';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie'.$browser_version[1];
} else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
$classes[] = 'osx';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
$classes[] = 'linux';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
$classes[] = 'windows';
}
return $classes;
}
add_filter('body_class','wpc_browser_det');

Y luego poner lo siguiente en el archivo header.php:

<body <?php body_class(); ?>>

22. Limitar la búsqueda solo a los títulos de los artículos

Con este código el buscador solo buscará la palabra clave en los título de los artículos. Pégalo en el archivo functions.php:

function __search_by_title_only( $search, &$wp_query )
{
if ( empty($search) )
return $search;
$q =& $wp_query->query_vars;
// wp-includes/query.php line 2128 (version 3.1)
$n = !empty($q['exact']) ? '' : '%';
$searchand = '';
foreach( (array) $q['search_terms'] as $term ) {
$term = esc_sql( like_escape( $term ) );
$search .= "{$searchand}($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
$searchand = ' AND ';
}
$term = esc_sql( like_escape( $q['s'] ) );
if ( empty($q['sentence']) && count($q['search_terms']) > 1 && $q['search_terms'][0] != $q['s'] )
$search .= " OR ($wpdb->posts.post_title LIKE '{$n}{$term}{$n}')";
if ( !empty($search) ) {
$search = " AND ({$search}) ";
if ( !is_user_logged_in() )
$search .= " AND ($wpdb->posts.post_password = '') ";
}
return $search;
}
add_filter( 'posts_search', '__search_by_title_only', 10, 2 );

23. Generar automáticamente el meta description de un artículo

Para generar automáticamente el meta description de un artículo solo debes colocar el siguiente código en el archivo functions.php:

function trw_metadesc() {
global $post;
if (!is_single()) { return; }
$meta = strip_tags($post->post_content);
$meta = strip_shortcodes($post->post_content);
$meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
$meta = substr($meta, 0, 125);
echo "<meta name='description' content='$meta' />";
}
add_action('wp_head', 'trw_metadesc');

24. Mostrar mensaje personalizado después de registro

Con este código puedes mostrar un mensaje personalizado después del registro de un nuevo usuario. Solo debes pegar lo siguiente en el archivo functions.php:

add_action('register_form', 'trw_mensaje_registro');
function trw_mensaje_registro() {
$html = '
<div style="margin:10px 0;border:1px solid #e5e5e5;padding:10px">
<p style="margin:5px 0;">
AQUÍ VA EL MENSAJE
</p>
</div>';
echo $html;
}

25. Acortar la dirección de búsqueda

Este pequeño código te ayuda a crear una nueva dirección para las búsquedas. Pasa de “trazos-web.com/?s=términoabuscar” a “trazos-web.com/buscar/términoabuscar“. Solo pega esto en el archivo functions.php:

function trw_search_url_rule() {
if ( is_search() && !empty($_GET['s'])) {
wp_redirect(home_url("/buscar/") . urlencode(get_query_var('s')));
exit();
}
}
add_action('template_redirect', 'trw_search_url_rule');

26. Obtener el número de visitas de un artículo sin plugin

Con este código puedes mostrar el número de veces que ha sido visto un artículo. Solo debes hacer lo siguiente:

Pegar este código en el archivo functions.php:

function getPostViews($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 View";
}
return $count.' Views';
}
function setPostViews($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}

Luego pegas esto en el archivo single.php, en cualquier parte dentro del Loop de WordPress:

<?php setPostViews(get_the_ID()); ?>

Y luego pegas el siguiente código en el archivo single.php en donde quieras mostrar el número de visitas del artículo:

<?php echo getPostViews(get_the_ID()); ?>

27. Mostrar los artículos más visitados

Utilizando el código mostrado en el punto 26 y añadiéndole estas líneas, podemos mostrar una lista de los artículos más visitados. Solo debes poner el siguiente código en donde quieres que se muestre esta lista:

<?
query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC');
if (have_posts()) : ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php echo the_permalink(); ?>" title="Enlace Permanente a <?php echo the_title() ?> (<?php echo getPostViews($post->ID); ?> visitas)"><?php echo the_title() ?></a></li>
<?php endwhile;?>
</ul>
<?php endif; ?>

28. Mostrar número de visitas de cada artículo en listado de artículos del Panel de Administración

Con este código, más el código mostrado en el punto 26, podrás agregar una columna al listado de artículos del Panel de Administración donde se muestre el número de veces que ha sido visitado un artículo: Solo debes pegar este código en el archivo functions.php:

add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
$defaults['post_views'] = __('Visitas');
return $defaults;
}
function posts_custom_column_views($column_name, $id){
if($column_name === 'post_views'){
echo getPostViews(get_the_ID());
}
}

Infografía

• WordPress Tricks & Tips.
• Chad Von Lind.
• WPMU.org.
• WPShout.
• Kovshenin.
• WpCode.
• WordPress Code Snippets.
• WP-Snippets.
• WP Recipes.
• CatsWhoCode.

Cada día Internet se convierte en el día a día de muchas personas, sobre todo para los desarrolladores y diseñadores web, que deben buscar funciones, recursos y todo lo necesario para que trabajar sea un poco más fácil.

Así mismo en Internet existen una gran cantidad de blogs sobre diseño y desarrollo web, pero también existen sitios web que únicamente sirven a una función en específica de diseño o desarrollo. Es por eso que para facilidad de todos, he recopilado 74 sitios web útiles para desarrolladores y diseñadores web, herramientas que aumentarán tu productividad y facilitarán tu trabajo o proyecto.

Para hacer más cómoda la lectura de este artículo, lo he dividido en varias sub categorías, así:

• Tipografía
• Javascript
• HTML
• Imágenes
• Diseño
• CSS
• Varios

Tipografía

CopyPasteCharacter

CopyPasteCharacter te ayudará a encontrar la entidad html apropiada para ese símbolo que quieres incluir en tu diseño.

Lipsum Generator

Sitio donde puedes generar el famoso texto “Lorem Ipsum” para poner textos de prueba en tus diseños.

WhatTheFont!

WhatTheFont! te permite conocer la fuente que se utiliza en una imagen dada.

HTML Encoder

Sitio que te permite codificar el HTML para poder mostrar código en tus artículos y diseños.

Typetester

Este sitio te permite probar dos o tres fuentes diferentes, con diferentes especificaciones.

Nice Entity

Con Nice Entity puedes encontrar varios símbolos y formas con su respectiva entidad HTML para que los puedas incluir en tus diseños.

Google Web Fonts

Google Web Fonts te permite incluir cualquiera de las fuentes de su directorio en tu página web.

FFFFALLBACK

Con este sitio podrás configurar tu navegador para probar los tipos de fuente y fuentes de reserva en cualquier sitio web que desees.

Quijotipsum

Quijotipsum es un generador de textos, estilo Lorem Ipsum, pero basado en el Quijote de la Mancha de Miguel Cervantes.

Font comparer

Font comparer te permite comparar las fuentes de Google Web Font y de Typekit, para elegir la que más se adecue a tu diseño.

Javascript

ScriptSrc

En este sitio puedes encontrar las librerías Javascript más usadas y copiar fácilmente las etiquetas para incluir esa librería en tu página.

Google Libraries API

En este sitio, manejado por Google, se encuentran los scripts de Javascript más utilizados, que pueden incluirse mediante un sistema de CDN en tu página web.

Cdn JS

Con Cdn JS, tienes también varios scripts alojados en una CDN, como en Google Libraries API, con la diferencia que aquí se alojan otros javascripts diferentes.

Modernizr

Modernizr ofrece la posibilidad de detectar el soporte del navegador de las etiquetas HTML5 y añade algunas funcionalidades de CSS3 y HTML5 a Internet Explorer.

Ninja UI

Este es un set de componentes (botones, iconos, popups, etc) utilizados en conjunto con jQuery para crear interfaces utilizando muy pocos recursos.

Microjs

Con este sitio web puedes encontrar frameworks de Javascript de bajo peso.

jsFiddle

Con este sitio web puedes probar varios frameworks de Javascript con su respectivo código HTML, CSS y funciones de Javascript. También útil para compartir código.

HTML

pForm

pForm es una herramienta online que te facilita la tarea de crear formularios en HTML.

XHTML/CSS Markup Generator

Esta es una herramienta que facilita la creación de archivos XHTML y CSS, escribiendo simplemente las clases y los ids de la estructura principal del diseño.

HTML5 Boilerplate

HTML5 Boilerplate es un conjunto de plantillas de HTML5/CSS/JS para empezar a modernizar los sitios web con los nuevos estándares. Además posee muy buenos tips para mejorar la velocidad y capacidad de los servidores web.

HTML5 Snippets

HTML5 Snippets es una galería de pequeños fragmentos de código útiles para HTML5 y CSS3.

HTML Form

Esta es una herramienta para generar fácilmente formularios o encuestas en HTML.

HTML Ipsum

Este sitio genera automáticamente las etiquetas HTML con el texto de prueba “Lorem Ipsum“.

HTML Instant

HTML Instant es un editor online de código HTML. Mientras escribes código en el panel izquierdo ves el resultado en el panel derecho.

Imágenes

Smush.it

Esta es una herramienta online que nos permite optimizar al máximo nuestra imágenes para la Web.

vintageJS

vintageJS es una aplicación online par añadirle efectos retro a nuestras imágenes.

lorempixum

lorempixum es un generador de imágenes de prueba. Se pude configurar el tamaño, tipo de imagen y si es a color o en escala de grises.

RoundPic

Con esta herramienta podrás hacer que tus imágenes se vean con bordes redondeados.

Dummy Image

Este es un generador de imágenes de prueba de cualquier tamaño y con el texto que queramos que tenga la imagen.

tinySrc

tinySrc es un servicio para redimensionar imágenes para dispositivos móviles, dependiendo del dispositivo usado y del tamaño de la pantalla.

Favigen

Favigen es una web que te permitirá generar a partir de una imagen el favicon.ico de tu página web.

The Noun Project

Este es un sitio que recolecta iconos de señales y símbolos para descargar gratuitamente.

Diseño

ColorCombos

ColorCombos es una herramienta online que te permite encontrar varias paletas de colores para tus diseños.

BgPatterns

Este sitio es una herramienta online que permite generar un patrón para el fondo de tus diseños.

0to255

0to255 es un sitio donde puedes ver las variaciones de color, del mas oscuro al más claro, de cualquier color que ingreses.

COLOURlovers

COLOURlovers es un sitio web donde puedes encontrar y compartir todo lo relacionado con colores, patrones, imágenes, etc.

Swatch Spot

Swatch Spot es un servicio que permite generar paletas de colores aleatoriamente.

Stripe Generator

Este sitio genera una imagen de barras diagonales para poner como patrón en el fondo de tu diseño.

GridPapr

Esta es una web que te facilitará la creación de wireframes, prototipos de la estructura básica de un sitio web.

Subtle Patterns

Subtle Patterns es un sitio donde puedes descargar varios patrones de alta calidad para tus diseños.

CSS

EmChart

Sitio web para convertir el tamaño de los elementos de pixéles a Ems.

CSS Compressor

CSS Compressor es una herramienta en línea que te permite comprimir un archivo CSS.

Generador de Sprite CSS

Este sitio te facilita la tarea de generar el CSS necesario para poner una imagen sprite en nuestros diseños web.

CSS Gradient Generator

En este sitio web puedes crear varios degradados y te da el código CSS3 necesario para incluirlo en tu diseño.

CSS3 Facebook Buttons

Este sitio te ofrece el CSS3 necesario para recrear casi con exactitud los botones utilizados en Facebook para tus proyectos.

CSS3 Patterns

CSS3 Patterns nos ofrece varios patrones disponibles en CSS3 para utilizar en los navegadores modernos.

CSS3.me

Esta aplicación nos permite crear efectos de css3 y copiarlos fácilmente para nuestra página web.

PXtoEM

Este sitio te permite convertir pixéles a Ems y de Ems a pixéles.

CSS3.0 Maker

CSS3.0 Maker es un generador de código CSS3 online y nos permite saber que navegadores son compatibles con cada funcionalidad.

CSS3 drop shadow generator

Este sitio te facilita un generador de sombras para cajas en código CSS3. Son bastantes las opciones con este generador de sombras.

CSS3 Button Maker

Esta herramienta online genera botones haciendo uso de CSS3, sin necesitar alguna imagen.

CSS3 Generator

Este sitio te provee todas las herramientas para poder generar efectos CSS3 y te da el código.

CSS3 Gradient Generator

En este sitio podrás generar degradados para tus diseños utilizando CSS3.

CSS3 Please!

Con este sitio podrás aprender con bastante claridad las nuevas reglas del CSS3. También puedes modificar el código donde gustes.

Clean CSS

Clean CSS comprime tu código CSS ayudándote a ganar velocidad en tu proyecto web.

Em Calculator

Sitio web que te permite calcular los valores Ems de un tamaño dado en pixéles.

CSS Optimiser

Este sitio es un servicio online para optimizar código o archivos CSS.

CSS Compressor

CSS Compressor es una herramienta en línea que comprime el código CSS.

Patternify

Sitio web donde puedes generar un patrón en CSS pixel por pixel.

ProCSSor

Con ProCSSor podrás darle formato tu código CSS, para verlo más organizado.

Layer Styles

Este aplicación web te permite generar código CSS como si lo estuvieras haciendo desde Photoshop.

CSS3 buttons

En este sitio se muestran varios iconos hechos con CSS3 y te ofrece el código necesario para que logres ponerlo en tus diseños.

CSS3 Click Chart

Este sitio web  nos presenta un cuadro informativo, bastante completo sobre lo nuevo que trae el estándar CSS3.

Varios

Web to PDF Converter

Con este servicio en línea podrás pasar completamente un a página web a formato PDF y descargar el resultado.

.htaccess Editor

Con esta aplicación web podrás crear fácilmente el archivo .htaccess necesario para configurar tu servidor.

test everything!

Este sitio web te permite probar varias cosas con tu página web con el pack de herramientas que se ofrecen.

Load Impact

Load Impact es un servicio gratuito que te permite evaluar cuantos usuarios simultáneos puede soportar tu página web.

Page Speed Online

Con esta herramienta de Google, podrás conocer sugerencias para que tu sitio web cargue más rápido.

Zbugs

Con Zbugs podrás conocer cuales son los archivos que debes optimizar para mejorar la velocidad de la página web. Además te ofrecen los archivos ya comprimidos para descargar.

resizeMyBrowser

Con este sitio puedes redimensionar tu pantalla para que se adecue al tamaño deseado. Muy útil para probar resoluciones en dispositivos móviles.

Browsershots

Este sitio te permitirá ver como se ve tu página web en todos los navegadores posibles.

Print Friendly

Con este sitio podrás imprimir páginas web fácilmente, pues formateará el contenido del blog para que solo salga lo realmente necesario.

htaccess tester

Esta es una herramienta con la que puedes probar si las reglas de tu archivo .htaccess están bien o no.

Syntaclet

Con Syntaclet podrás hacer que el código fuente se vea más organizado y más legible.

Infografía

• Pixelco
• Wwwhat’s new?
• Smashing Magazine
• Speckyboy
• Web Resources Depot

Seguro ya habrás escuchando en los últimos meses del HTML5, el nuevo estándar — aún en borrador — del lenguaje básico de la Web. Varias empresas de renombre (Google, Apple, WHATWG) han estado metidas de lleno en el desarrollo y últimamente la información sobre este estándar ha ido aumentando bastante en los últimos meses.

Por el momento se espera a que éste estándar llegue a su versión final hasta el año 2022 y  también a que salga IE9 que promete ofrecer mejor compatibilidad con HTML5, para que este lenguaje se extienda por toda la web y sea compatible en todos los navegadores. Pero si quieres aprender un poco más de este nuevo lenguaje o quieres empezar a crear tus sitios web con éste desde ya, aquí te dejo una lista de características, tips y recursos para empezar con HTML5.

Primero que todo deberías leer el artículo HTML5 ¿Qué es? Y ¿Cómo usarlo? para entender un poco mejor de lo que se hablará en este artículo.

1. Un nuevo Doctype

Lo primero que deberías hacer para “actualizarte” a HTML5 es cambiar el Doctype. El Doctype siempre debe aparecer al principio de todo archivo HTML. Anteriormente en la versión 4 del estándar se tenían varios Doctypes, por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ahora, con la nueva versión de este lenguaje solo necesitaríamos añadir el siguiente código:

<!DOCTYPE html>

Al hacer esto no se dañarán tus anteriores diseños, pues HTML5 en compatible con las etiquetas que existen en HTML4, pero te permitirá usar las nuevas características de este nuevo estándar.

2. El atributo charset

Antes para definir la codificación de caracteres de tu sitio, debías especificar el siguiente código:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ahora es mucho más fácil, solo debes añadir lo siguiente:

<meta charset="utf-8">

3. El atributo de lenguaje

Ya no es necesario utilizar los atributos xlmns o xml:lang en la etiqueta html, como antes:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es">

Ahora en HTML5 solo es necesario especificar lo siguiente, para un sitio cuyo lenguaje es el español:

<html lang="es">

4. No se especifican tipos de scripts o estilos

Anteriormente todas las asociaciones hacia un script o estilo externo debían especificar el tipo de archivo asociado con el atributo type, como:

<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>

Ahora no es necesario hacer eso, con lo cual el código quedaría así:

<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>

5. No es necesario cerrar etiquetas o comillas

Ya no es necesario rodear con comillas a tus atributos, como tampoco es necesario cerrar tu elementos:

<li class=laclase> Elemento de la lista.

Si quieres puedes hacer lo anterior, HTML5 te lo permite, pero si prefieres un código mejor estructurado deberías hacerlo como antes:

<li class="laclase">Elemento de la lista.</li>

Además los elementos vacíos como link, img, etc. ya no es necesario que lleven “/” al final de la etiqueta:

Antes:

<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<img src="imagen.jpg" alt="Descripción de la imágen."/>

Después:

<link rel="stylesheet" href="stylesheet.css">
<img src="imagen.jpg" alt="Descripción de la imágen.">

6. Elementos no soportados en HTML5

Los siguientes elementos ya no son soportados en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

7. Nuevas etiquetas

Las principales nuevas etiquetas en HTML5, solo buscan añadir un significado semántico superior a lo que anteriormente significaba un div o un span.

Estás etiquetas se pueden utilizar en conjunto con las etiquetas del estándar HTML4.

<header> y <footer>

Los elementos <header> y <footer> reemplazan a <div id=”header”> y <div id=”footer”> y generalmente contienen la sección de la cabecera y pié de página del diseño, pero también pueden ser usados como cabecera y/o pié de página de una sección en especial. Estas etiquetas pueden usarse varias veces en un mismo diseño.

<hgroup>

Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1> <h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos, etc para evitar cortar el flujo del esquema del documento.

<nav>

Esta etiqueta esta diseñada para que coloques los menús de navegación ya sea de la página principal o para un artículo en especial.

<section>

Esta etiqueta indica una sección genérica del sitio: La etiqueta <section> es una agrupación temática de contenidos, generalmente con una cabecera.

<article>

Esta etiqueta representa una sección de contenido independiente. Esta etiqueta se utilizaría para respuestas en un foro, artículos en un blog o comentarios de un artículo.

<aside>

Esta etiqueta se utiliza para representar contenido que no este directamente relacionado con el contenido de la página. Por lo general esta etiqueta es utilizada para representar las barras laterales de los blogs.

Cuando necesites una sección con propósitos netamente de posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta <div> en vez de usar las etiquetas mencionadas anteriormente.

Este sería un ejemplo de código web utilizando estás etiquetas:

<body>
<header>
<hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup>
<nav>
<ul>
<li><a href="/enlace1">Enlace 1</a>
<li><a href="/enlace2">Enlace 2</a>
<li><a href="/enlace3">Enlace 3</a>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h1>Título del artículo</h1>
<p>Datos del artículo: autor, fecha, etc.</p>
</header>
<p>Contenido del artículo</p>
</article>
<!--Más artículos -->
</section>
<aside>
Barra lateral
</aside>
<footer>
<p><small>© copyright 2011 Trazos Web</small></p>
</footer>
</body>

8. Hacer contenido editable

Esta característica permite editar cualquier parte del texto contenido dentro del elemento con este atributo. Solo debes añadir:

contenteditable="true"

Al elemento que quieras hacer editable, por ejemplo:

<body>
<h2> Lista </h2>
<ul contenteditable="true">
<li> Elemento #1</li>
<li> Elemento #2
<li> Elemento #3</li>
</ul>
</body>

9. Atributo requerido

Ahora los formularios permiten el atributo ‘required‘ para especificar que un campo es requerido.  Esto significa que los datos del formulario no serán enviados si el campo marcado como requerido está vacío. Puedes utilizar este atributo de dos formas:

<input type="text" name="Input1" required>

o

<input type="text" name="Input1" required="required">

10. Campo para email

Si se aplica el tipo email (type=”email”)en un campo de un formulario, el navegador solo permitirá ingresar direcciones de email en dicho campo. Este atributo solo sirve, por ahora, en pocos navegadores.

Un ejemplo sería:

<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />

<button type="submit"> Enviar </button>
</form>
</body>

11. El atributo placeholder

Este atributo permite rellenar el campo con un valor predeterminado y una vez que el usuario hace clic en el campo este valor desaparece. Por el momento, este atributo solo sirve en algunos navegadores.

<input name="email" type="email" placeholder="dacj@trazos-web.com" />

12. Uso de expresiones regulares

Si deseas que  en un campo de un formulario solo se puedan escribir solo un número máximo de caracteres, o solo mayúsculas, etc., esto lo puedes hacer mediante expresiones regulares utilizadas directamente en el código HTML:

<form action="" method="post">
<label for="username">Nombre de Usuario: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Enviar </button>
</form>

El anterior código haría que el campo solo acepte un texto de máximo 10 caracteres, mínimo 4 y solo letras tanto mayúsculas como minúsculas.

13. La etiqueta <mark>

Esta etiqueta sirve para resaltar un texto. Puede ser útil cuando un usuario realiza una búsqueda, para resaltar la palabra o frase buscada en el sitio web:

<h3> Resultados de la búsqueda </h3>
<p>Seguro ya habrás escuchando en los últimos meses del <mark>HTML5</mark>, el nuevo estándar. </p>

<audio controls> <source src="demo-audio.ogg" /> <source src="demo-audio.mp3" /> </audio>

<video width="320" height="240" controls preload="none" poster="videoframe.jpg"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>

Remy Sharp que permite solucionar la incompatibilidad de IE6, 7 y 8 con HTML5 y problema solucionado:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

17. Crear plantillas con HTML5

Estos son algunos tutoriales para que aprendas a crear desde cero una plantilla con HTML5:

• HTML5 & CSS3: Las tecnicas que pronto vas a utilizar.
• Diseñando un blog con HTML5.
• Codificar una plantilla en HTML5 desde cero.
• Crea un sitio web elegante con HTML5 y CSS3.
• Codificando un plantilla en HTML5 & CSS3 de un sitio web de una sola página.
• Codifica un portafolio con HTML5 & CSS3.

18. Hojas de Referencia (Cheat Sheets) de HTML5

Estas son algunas de las hojas de referencia sobre HTML5 que hay en la Web, contienen todas las nuevas características de HTML5 y una pequeña explicación de estas:

• HTML5 Visual Cheat Sheet.
• HTML5 Cheat Sheet (PDF).
• HTML5 Pocket Book.
• HTML5 Canvas Cheat Sheet.
• HTML5 Quick Reference Guide.
• HTML5: New Standars por Web Interactivity.

19. HTML5 para principiantes de Armando Sosa

20. Infografía

• HTML Standard. WHATWG.
• HTML5 Wikipedia.
• Dive into HTML5.
• W3C HTML5 Logo.
• Easy HTML Template.
• HTML5 Boilerplate.
• HTML5 Doctor Glosary.
• What is HTML5?
• HTML5 & CSS3 Support.
• The Power of HTML5 and CSS3.
• Nettuts+.
• Smashing Magazine.
• W3Avenue.
• Maestros del Web.
• Cristalab.

Si eres diseñador web  y estás buscando recursos, tutoriales, inspiración o quieres mantenerte al tanto de las últimas tendencias o noticias sobre este tema en español, en Internet encontrarás muchas opciones de blogs que tratan sobre diseño y desarrollo web,  y para tu comodidad he compilado una lista de 50 blogs en español que te informan sobre trucos, consejos y guias para aprender todo lo que necesites saber sobre el tema.

Los blogs que menciono en esta lista están organizados de forma aleatoria.

1. Maestros del Web

2. Creadictos

3. Berriart

4. Gran Impetu

5. Casidiablo.net

6. Línea de Código

7. LaWebera

8. Pixelar.me

9. Miquel Camps Orteza

10. Sentido Web

11. Unijimpe

12. aNieto2K

13. Metabix

14. ARTEgami

15. Concepto Pixel

16. Frogx.three

17. Puente Cromático

18. Portafolio Creativo

19. Blog and Web

20. DiarioTHC

21. Área Photoshop

22. Diego Mattei Blog

23. Craftyman

24. Creativos Online

25. ZoneArtCSS

26. Pixelco

27. Kabytes

28. Fuel Your Creativity Español

29. Blog.EstudiosInnova

30. Pixelovers

31. Cristalab

32. Web.Ontuts

33. InfectedFX

34. CSSBlog ES

35. Intenta

36. Creativity Storm

37. Webmaster Libre

38. Nosolocodigo

39. Xyberneticos

40. Kernel Web

41. DiseñoWebZ

42. Blog de la Web

43. Oh! Gráfico

44. Creative Hacks

45. Cofre Gráfico

46. Chica Blogger

47. SOSFactory Blog

48. Puerto Pixel

49. Criterion

50. dzign.us

Si deseas encontrar blogs sobre diseño y desarrollo web en inglés, aquí te dejo varios artículos donde podrás encontrar los más representativos:

• The Smashing Network.
• 40 Informative Blogs For Developers and Designers.
• 25 Web Development Blogs You Should Be Reading.
• 63 Popular And Promising Web Design Blogs

Hace pocos meses Google anunció que ha decidido tomar en cuenta la velocidad del sitio en la clasificación de los resultados de búsqueda, en adición a los otros 200 factores que determinan la posición en los resultados de búsqueda. Esta jugada por parte de Google hace que todos nos preocupemos por optimizar al máximo la velocidad de un sitio web. La optimización de la velocidad no solo pone a Google contento, sino que hace que tus lectores se sientan más a gusto con tu sitio, sean más participativos, además ahorrarás ancho de banda y costos de hosting.

Hay diferentes formas de optimizar la velocidad de WordPress, aquí te dejo una guía lo más completa posible para que tu sitio en WordPress quede tan rápido como un rayo.

Antes de empezar a optimizar tu sitio, necesitas saber en que partes de éste tienes que mejorar, cuanto se demora en cargar y cual es el peso total de él. Para hacer esto te recomiendo utilizar herramientas como Pingdom o Firebug (para Firefox) con los plugins PageSpeed o YSlow. Con estas herramientas podrás ver el progreso de los cambios que vayas realizando, o sea, una baja en el tiempo de carga de tu sitio web.

1. Escoge un Hosting de Calidad

Tal vez esto que estoy diciendo suene muy obvio, pero no esperes que tu sitio corra como un bólido de la fórmula uno si tu sitio esta hospedado en un servidor compartido de mala calidad. A la hora de escoger un buen hosting debes ser muy cuidadoso, pues de eso depende la velocidad de tu sitio y el grado de satisfacción de tus lectores.

Como ya les he dicho en varias ocasiones, este blog esta hospedado en HostGator y no he tenido ningún problema con ellos, lo recomiendo ampliamente. De todas formas aquí te dejo algunos otros proveedores de hosting que recomiendo:

• MediaTemple
• Blue Host
• WPWebHost
• HostMonster

2. Mantén actualizado WordPress

Estar actualizado con la última versión de WordPress es muy importante. En cada actualización, por lo general, hay muchas mejoras de desempeño. Los desarrolladores de WordPress no liberan nuevas versiones solo por diversión, sino porque con cada actualización WordPress mejora más y más.

3. Elimina plugins innecesarios y actualiza los demás

Si estás usando más de 15 plugins en tu blog, entonces necesitas revisar si realmente los necesitas a todos. Si no los necesitas, elimínalos. También asegúrate de que los plugins que mantengas, estén actualizados a su última versión.

4. Optimiza tu Base de Datos

Te sorprenderás de cuanto puede disminuir el tiempo de carga de tu sitio web, tan solo optimizando tu base de datos. Puedes hacerlo manualmente o puedes hacerlo mediante plugins.

Si lo deseas hacerlo de la forma fácil, instala el plugin Optimize DB o WP Optimize. Si deseas hacerlo manualmente debes hacer lo siguiente:

1. Debes abrir el administrador de bases de datos PHPMyAdmin.
2. Selecciona tu bases de datos.
3. Haces clic en “Marcar todos/as” al fondo de la página.
4. Elige la opción “Optimizar la tabla” en la lista desplegable que se encuentra al lado.
5. Y listo!

5. Cachea tu Base de Datos

Las consultas a la base de datos se hacen cada vez que una persona visita tu blog. El cache es vital para reducir el número de consultas, así mismo aumentar la velocidad de tu blog. Para minimizar tus consultas a la base de datos de forma fácil deberás instalar el plugin DB Cache Reloaded.

6. Desactiva y Elimina las Revisiones de Post

Las revisiones de Post se introdujeron desde WordPress 2.6. pero en realidad son útiles cuando un blog es administrado por varios autores y sirve para ver los cambios de un artículo y la fecha de ese cambio o para regresar un artículo a una versión anterior. Sin embargo, esto hará que tu base de datos se llene de revisiones de artículos, lo que la hace más pesada. Si no necesitas esta característica, debes añadir la siguiente línea a la archivo config.php de tu instalación de WordPress:

define('WP_POST_REVISIONS', FALSE);

Si deseas eliminar todas las revisiones de tu base de datos debes ejecutar la siguiente consulta:

DELETE a,b,c FROM wp_posts a
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)
WHERE a.post_type = 'revision';

7. Deshabilita el Hotlinking

El hotlinking, también conocido como robo de ancho de banda, es cuando alguien copia y pega la URL de tu imágen, poniendo tus imágenes en su propio sitio, lo que hace que la carga de tu servidor suba bastante.

Hay varias formas de evitar esto poniendo lo siguiente en el archivo .htaccess, que se encuentra en la carpeta raíz de tu servidor, así:

#deshabilitar el hotlinking de la imágenes
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?trazos-web.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER}  !^http(s)?://(www\.)?feeds2.feedburner.com/TrazosWeb [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Puedes habilitar tu feed, pues de otra manera tus lectores del feed no verán ninguna imágen.

8. Utiliza un Plugin de Cache de WordPress

Utilizar un plugin de cache como WP Super Cache o W3 Total Cache hace que se guarde una copia en html de tu blog  y que esta copia sea la que se le muestre a tus lectores. Esto incrementa enormemente la velocidad de carga de tu sitio web.

9. Optimiza tus Imágenes

Si editas tus imágenes con Photoshop, utiliza siempre la opción “Guardar par Web y dispositivos”, o utiliza algunas de las herramientas para optimizar tus imágenes que te presento a continuación:

Herramientas en línea:

• PunyPNG
• Smush.it
• Online Image Optimizer
• SiteReportCard Image Optimization

Herramientas de escritorio:

• Shrink O’Matic
• RIOT
• PNGGauntlet

10. Comprime tu contenido

Estos se hace mediante el archivo .htaccess de tu carpeta raíz y permite comprimir la mayoría de los archivos de tu blog (css, javascript, php, html y xhtml). Hay dos maneras de hacerlo dependiendo de la versión de Apache que tengas instalado tu blog, si la versión de Apache es menor de 2.x, se hace mediante mod_gzip, así:

<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifmodule>

Si La versión de Apache de tu servidor es la 2.x, puedes utilizar la función mod_deflate, así:

<IfModule mod_deflate.c>
<FilesMatch "\.(css|js|x?html?|php)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

11. Añade caché a todo tu contenido estático

Añadir Cabeceras de Expiración (Expire Headers) y Cabeceras de Control de Caché (Cache-Control Headers) hará que se realicen menos peticiones HTTP lo que disminuirá el tiempo de carga de tu sitio web. Las Cabeceras de Expiración son generalmente usadas con las imágenes, pero pueden ser utilizadas con hojas de estilos, scripts, componentes de flash, etc.

Aquí te dejo un ejemplo de lo que deberías poner en tu archivo .htaccess para implementar estas cabeceras:

# EMPIEZA Cabeceras de Expiración
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# FIN Cabeceras de Expiración
#EMPIEZA Cabeceras Cache-Control
<IfModule mod_headers.c>
Header unset ETag
FileETag None
<FilesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>
<FilesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
</IfModule>
# FIN Cabeceras Cache-Control

12. Optimiza tus archivos CSS y JavaScript

Los archivos CSS y JavaScript pueden ser optimizados para reducir el tamaño de estos. Por ejemplo, las líneas en blanco y clases CSS sin usar deben ser eliminadas. Al optimizar estos archivos, puedes reducir efectivamente el ancho de banda del servidor y ahorrar espacio en el disco duro. Para comprimir el CSS hay varias herramientas:

• WP CSS: Es un plugin para WordPress que comprime los archivos CSS de tu blog.
• Mediante CSSOptimizer.
• CSS Compressor
• Clean CSS

Para ayudarte a optimizar tu archivos JavaScript existen las siguiente herramientas:

• JavaScript Compressor
• Another JavaScript Compressor

13. Mueve las llamadas a archivos JavaScript al fondo

Un servidor solo puede cargar un cierto límite de ítems al mismo tiempo. Si estás usando muchos JavaScript en tu sitio de WordPress, entonces tendrás que comprimirlos. Luego de comprimir los scripts, deberás moverlos al fondo de la plantilla de tu blog, por lo general antes de la etiqueta </body>, para que el contenido (imágenes, css, etc) sea cargado primero.

Algo así:

....
<script type="text/javascript" src="algunScript.js"></script>
<script type="text/javascript" src="otroScript.js"></script>
</body>

14. Utiliza el API de bibliotecas AJAX de Google

El API de bibliotecas AJAX es un intento por hacer más rápidas las aplicaciones web para los desarrolladores de manera simple, convirtiendo una red de distribución de contenido en una arquitectura de carga para las librerías de JavaScript más populares, incluyendo:

• jQuery
• Prototype
• Script.aculo.us
• MooTools
• Dojo

Para implementarlo en tu sitio puedes usar la API de Google:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

O enlazar el código fuente directamente en la plantilla de tu blog:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

15. Reduce el uso de scripts externos

Cuando tu blog carga lentamente, deberías pensar seriamente en quitar widgets como el de Fans en Facebook o Últimas actualizaciones en Twitter o botones como los de Tweetmeme, pues estás haciendo que la carga de tu sitio dependa de otros sitios. Por ejemplo, si estás usando el botón retweet y Tweetmeme está caído, tu blog no cargará correctamente. Trata de evitar estos plugins o widgets lo más que puedas.

16. Utiliza CSS Sprites

Los Sprites CSS  son múltiples imágenes combinadas en una sola gran imágen. Luego mediante CSS puedes ‘recortar‘ o seleccionar el pedazo de imágen que deseas usar en determinada clase, en vez de tener múltiples imágenes utilizadas múltiples veces. Esto es bueno pues requiere menos peticiones al servidor.

Aquí te dejo algunos artículos para que aprendas más sobre los CSS Sprites:

• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• Tutorial básico sobre CSS Sprite
• Optimizando tu Website con CSS Sprites, caso práctico
• CSS Sprites, disminuyendo las peticiones de nuestra web
• An Introduction To CSS Sprites
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

17. Guarda tus imágenes en otro servidor

Cuando tienes un sitio popular, este tiende a usar gran cantidad de ancho de banda. Para reducir el uso de ancho de banda y hacer que tu sitio cargue mucho más rápido, la solución más popular es guardar las imágenes u otros archivos en otro servidor.

Muchos servicios permiten subir tus imágenes en sus servidores, pero aquí te dejo los dos más populares:

Amazon S3 : Servicio premium, cuesta 15 centavos de dólar por cada GB de almacenamiento y 20 centavos por GB de ancho de banda
Flickr : Provee una cuenta gratuita limitada a 100MB subidos por mes o una cuenta premium por 25 dólares al año.

Conclusión

Todos estos consejos te ayudarán a que tu blog en WordPress funcione de una forma mucho más rápida.

¿Qué otros consejos conoces para mejorar la velocidad de carga de un blog?

Una de las decisiones más importantes que debes tomar al empezar un blog es escoger un buen servicio de hosting. Esta decisión hará gran diferencia en torno a la experiencia que tus lectores tengan en tu sitio. Pero existen una inmensa cantidad de compañías que ofrecen este servicio, tantos aspectos que considerar y decidir, así que es necesario saber algunos consejos para que escoger un muy buen hosting no sea una cuestión que te haga doler la cabeza.

Aquí te dejo algunas cosas a considerar cuando estés buscando el mejor servicio de hosting:

El Precio

Debes tener en cuenta cuanto estás dispuesto a pagar. Este es un factor importante pero no determinante a la hora de conseguir un buen servicio de hosting.

El costo mensual del servicio puede variar entre 1 dólar (en servidores compartidos) a varios cientos de dólares (en servidores dedicados) dependiendo de la cantidad de tráfico de tu sitio web. Si tomas en serio a tu sitio web, no seas tacaño, invierte algo de dinero para que a largo plazo no tengas dolores de cabeza por el crecimiento de tu sitio web. Para empezar te recomiendo iniciar en servidores compartidos que van desde los 9 a 20 dólares mensuales ya luego verás si es necesario pasarte a un servidor dedicado.

Cantidad de Espacio

Una compañía de hosting te ofrece una cierta cantidad de espacio en el disco duro del servidor. Debes asegurarte de que esa es la cantidad de espacio que tu sitio necesita. En el futuro necesitarás más espacio. Para esto es esencial que el proveedor de hosting ofrezca gran variedad de planes para que puedas escoger el que más le convenga a tu sitio web. Si tu sitio tiene pocos archivos (audios, descargas, videos, imágenes, etc.) puedes empezar con 1 GB de espacio, pero yo recomiendo 10GB, ya que tu sitio empezará a acumular archivos y se hará más grande.

Transferencia de Datos (Ancho de banda)

También necesitas ver si tu proveedor te ofrece ancho de banda suficiente para el tráfico web que tiene tu sitio o el tráfico que esperas tener. Esto es lo que necesitará tu web para transferir datos a tus usuarios. La cantidad de ancho de banda que necesites depende de la cantidad de visitantes mensuales que tengas y del tipo de datos que utilizarán. Para empezar un ancho de banda de 10GB mensuales estará bien, pero si el tráfico de tu sitio va creciendo vas a necesitar aumentar esto.

Confiabilidad

Siempre que estés escogiendo un servicio de hosting es importante que revises el uptime de los servidores, o sea, que porcentaje de tiempo el servidor va a estar en línea, por lo general la mayoría de estos garantizan un uptime del 99.9% en línea. Un sitio que esté caído, que sea lento perderá muchos visitantes. Pero, ¿Cómo haces para saber que un sitio es confiable? Fácil, por los comentarios de las demás personas, busca comentarios en foros, en páginas especializadas. Aquí te recomiendo algunos sitios para ver comentarios o para pedir referencias de distintos proveedores de hosting:

• Web Hosting – Foros del Web
• Hosting y dominios – Cristalab
• Hosting – ForoBeta
• Host Review
• Web Hosting Geeks

Atención al Cliente, Soporte, Ayuda

¿El proveedor ofrece soporte las 24 horas de los 7 días de la semana?¿Solucionan rápidamente tu problema?¿Tiene soporte a través de email o teléfono o chat?

Asegúrate de que el proveedor de hosting  tenga un buen servicio al cliente antes de que siquiera escojas un plan en específico.

Selecciona el plan que reúna todos tus requerimientos

¿El proveedor ofrece soporte PHP y MySQL u otro lenguaje que necesites? ¿Necesitas un servidor FTP para poder subir tus archivos?

Debes asegurarte que el proveedor de hosting ofrezca los servicios que necesitas para que tu sitio funcione correctamente. Para WordPress es necesario tener PHP y MySQL en versiones recientes y algunas que otras librerías para que funcione correctamente.

Evita los hostings que sobre venden (Oversellers)

En los servidores compartidos, se repartirá el ancho de banda y el espacio en disco entre todos los usuarios del servidor. Todo va bien hasta ahí, pero cuando la compañía sobre vende sus planes de hosting, el servidor se congestiona y el ancho de banda y el espacio en disco se reparten entre una gran cantidad de usuarios, lo que hace que se presenten caídas del servidor y lentitud del sitio.

Resumiendo

Si de verdad quieres un hosting de calidad debes pasar bastante tiempo investigando, preguntando sobre diferentes compañías de hosting. No siempre la solución más barata en las más adecuada.

Si escoges mal, después te arrepentirás con las caídas de tu sitio, la movida a otro servidor, etc.

Mi recomendación

Desde siempre, hace más o menos 3 años, este blog ha estado hospedado en HostGator y nunca he tenido problemas con ellos. He probado su chat en linea, su soporte de ayuda y de verdad es muy recomendable. Así que si quieres un buen hosting te recomiendo HostGator. Ya es elección tuya que hosting escoger.