Por fin, tras mucho trabajo en mis ratos libres, tengo listo mi tema de WordPress, Electric Theme, para descargar. Es parecido al que tengo ahora mismo, pero con muchas mejoras. Pronto lo cambiaré aquí, pero puedes ver cómo se vería en esta demo que he creado.

El tema se llama Electric porque está inspirado en el diseño de los coches eléctricos: formas suaves y colores blancos, azules y verdes.

Interior de coche eléctrico

Electric Theme está preparado para ser usado como tema padre (puedes ver mi post sóbre cómo usar temas hijo si tienes dudas), es responsive y está creado con HTML5 y CSS3. También tiene un panel de opciones para personalizar la plantilla a tu gusto.

El código CSS está generado con SASS, por lo que es muy fácil cambiarlo por completo si conoces cómo funciona este lenguaje (en este otro post tienes otra pequeña introducción a SASS). Si no sabes/quieres, puedes editar el CSS como siempre.

Como puedes ver en la demo, el tema incluye varios widgets específicos, así como un tipo de post personalizado (portafolio) para mostrar tus trabajos. Todas estas características son opcionales, vienen como plugins (incluidos en la propia descarga y fáciles de instalar) que sólo tienes que usar si los necesitas.

Por último, tanto la plantilla como los plugins son fácilmente traducibles (por eso la demo está en inglés). La traducción al español viene incluida.

Las ilustraciones y fotografías de la demo son cortesía del gran Daniel Rivera, Danolas, que me las ha cedido amablemente para usar como ejemplo. Os recomiendo visitar su Behance o DeviantArt

Puedes descargar el tema y usarlo de forma gratuita, ni siquiera tienes que dejar el enlace del footer si no quieres. Eso sí, si lo dejas te estaré agradecido 🙂 … y si me aportas una pequeña donación (la que quieras, aunque sea 1 céntimo), más agradecido aún 😛 ¡Han sido muchas horas de trabajo!

Donar por PayPal. La forma rápida y segura de pagar en Internet.

Descarga

Puedes descargarlo mediante este zip:

O desde el repositorio que he creado en GitHub:

https://github.com/cmoralesweb/electric-theme

¡Espero que os guste! ¡Deja un enlace si usas mi tema en tu web, me gustaría verla! 🙂

Versiones anteriores:

1.0:

Entre las nuevas opciones que nos ofrece HTML5 (esta vez, en el sentido más amplio del término, JavaScript incluido) se encuentra la API de visibilidad de página: un pequeño conjunto de propiedades y eventos que nos facilitan el saber si el visitante de nuestra web tiene ésta en primer plano o está viendo otra pestaña.

He preparado dos sencillos ejemplos para ver cómo funciona esta API:

NOTA: El segundo ejemplo no funciona correctamente en Chrome (pausa pero no reanuda luego la reproducción). En Firefox, Opera e IE10 sí funciona y, ya que esto era un simple ejemplo, no he dedicado más tiempo a buscar la causa exacta (lo siento 😛 ).

Veamos cómo llevarlos a cabo:

Seguir leyendo

A estas alturas, prácticamente todo el mundo ha oído ya hablar de HTML5: una serie de atractivas novedades en el mundo del diseño web que posibilitan la creación de aplicaciones (de navegador, móviles y hasta de escritorio) más potentes.

Al acercarse al lenguaje por primera vez, ya sea desde cero o desde HTML4, es habitual cometer ciertos errores. Espero que esta lista te ayude a no cometerlos tú tampoco (yo caí en varios de ellos, no hay por qué avergonzarse 😀 ).

Durante el resto del artículo me referiré a HTML5 con la acepción (bastante extendida) que engloba tanto HTML como CSS y JavaScript.

Seguir leyendo

El nuevo estándar HTML5 ofrece multitud de nuevas posibilidades para el desarrollo de webs (y aplicaciones): nuevas etiquetas, soporte nativo para video/audio, animaciones, etc.

Cuando se habla de estas nuevas características, lo habitual es hablar de geolocalización, almacenamiento local, canvas… (Curiosamente, la mayoría de estas características no son propiamente HTML si no más bien JavaScript, pero esto es otro tema :P)

Sin embargo, una de las novedades que a mí me parecen más interesantes es otra: la posibilidad de usar una jerarquía de etiquetas de encabezado (H1, H2, H3…) en cada sección (y, por tanto, repetir H1).

Seguir leyendo