Hoy os presentamos Quark que se integra dentro de los conocidos como “Worpress Starter Theme”, estos frameworks nos permiten crear nuestros propios theme de una manera sencilla y rápida.

temas worpress fáciles con quark

Quark está basado en Underscores (_s) y en el tema TwentyTwelve esto hace que sea muy flexible y muy fácil de personalizar. Básicamente el creador (Anthony Hortin) después de migrar al formato de rejilla de 12 columnas añadió las características que usaba para los themes que desarrollaba para sus clientes. Teniendo una base sólida como es _s le permitió crear su propia plantilla base para arrancar cualquier proyecto. Ahí nace Quark.

Características de quark

• Por supuesto es Responsive por defecto.
• Rejilla de 12 columnas. El tamaño de las mismas se establece mediante porcentajes teniendo un max-width por defecto de 1200 píxeles.
• Tamaño de fuentes con em. 
• Incorpora Normalize.js (v.2.1.3) y Modernizr (v.2.7.1) para ofrecer las capacidades de HTML5 y CSS3 de una manera más consistente en todos los navegadores.
• Incluye el plugin Options Framework que nos permitirá gestionar las características de nuestro theme de una manera sencilla.
• Incluye 300 iconos font-face compatibles con pantallas retina creados por Font Awasome. Estos iconos son muy fácilmente escalables y editables vía CSS.
• Emplea box-sizing:border-box para darle un diseño más natural además de incorporar algunas características de diseño propias de HTML5 Boilerplate.
• Gran cantidad de breakpoints media queries para adaptar el diseño que creemos a la gran variedad de dispositivos móviles y tamaños de los mismos.
• Implementar la característica de menú desplegable tan solo tendremos que descomentar dos líneas del fichero functions.php (esta característica se activa yendo a la línea 403 del fichero donde encontraréis las líneas y el comentario indicativo)
• Implementa el editor WYSIWYG TinyMCE Editor para la creación de páginas y posts.
• Shortcodes activados por defecto.
• Incluye Menu WP Nav para permitir extender el estilo para los menús con múltiples niveles hijo.
• Se incluye tanto Custom Background como Custom Header para facilitar el mantenimiento de estilos básico desde el panel de control.
• En la pantalla de perfil de usuario encontramos las extensiones para conectar con nuestras cuentas de Twitter, Facebook y Google+.
• Plantillas de página y de post. Incluye un amplio abanico de posibilidades para que la creación de páginas y de entradas sea más sencilla y rápida.

instalando quark

Para poder instalarlo puedes obtener el instalable directamente del directorio de themes de wordpress aquí y subirlo desde el menú de Apariencia > Temas como cualquier otro theme. Es compatible con la última versión de WordPress.

resumen

Como hemos visto Quark se nos presenta como una herramienta potente para crear nuestros themes de worpress propios. Su característica fundamental está descrita en la introducción y es que su creador ha llegado hasta aquí gracias a trabajar en la creacios de temas para wordpress lo que le ha llevado a crear esta herramienta para ahorrar tiempo en el arranque de un nuevo trabajo y poder dedicarse al 100% a la edición del tema.

La semana próxima profundizaremos un poco más en la configuración de Quark.

The post Crear un theme para WordPress fácilmente con Quark appeared first on Blog Developando.

Gracias a HTML5 y a sus nuevos ‘Input types’ o ‘tipos de entrada’ facilitaremos a los usuarios la tarea de rellenar dichos campos.

¿Qué ventajas tiene utilizar tipos de entrada?

Cuando se define un tipo de entrada para un campo, cuando el usuario vaya a introducir los datos en él, su terminal le mostrará en pantalla el teclado con las teclas que le faciliten la entrada de datos. Por ejemplo, si queremos escribir una dirección de correo, sería de utilidad que en el teclado ya apereciese por defecto el carácter ‘@’ y ‘.com’ ya que son carácteres comunes en toda cuenta de correo.

Listado de tipos de entrada definidos en HTML5

A continuación mostraremos capturas de pantallas de un terminal Android con los diferentes teclados. Como iréis viendo algunos tienen un color distinto. Esto es debido a que no todos los tipos de entrada de datos son compatibles con todos los navegadores. Para ver las compatibilidades consultar la tabla que añadimos al final del tutorial.

Número

Este código creará un campo de entrada de datos que sólo permitirá introducir números:

Edad: <input type="number" name="edad" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir su edad:

Tipo de entrada – Número

Email

Para crear un campo de entrada para dirección de correo se debe añadir la siguiente línea:

Correo electónico: <input type="email" name="email" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la dirección de correo:

Tipo de entrada – Email

Teléfono

Para crear un campo donde solicitar un teléfono se debe añadir la siguiente línea:

Correo electónico: <input type="tel" name="telefono" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir un número de teléfono:

Tipo de entrada – Teléfono

Búsqueda

Para crear un campo de búsqueda se debe añadir la siguiente línea:

Buscar: <input type="search" name="buscador" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

Tipo de entrada – Búsqueda

URL

Para crear un campo donde solicitar una URL se debe añadir la siguiente línea:

Correo electónico: <input type="url" name="web" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir los datos a buscar:

Tipo de entrada – Url

Fecha

Para crear un campo donde solicitar una fecha se debe añadir la siguiente línea:

Correo electónico: <input type="date" name="fecha" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la fecha:

Tipo de entrada – Fecha

Hora

Para crear un campo donde solicitar una hora se debe añadir la siguiente línea:

Correo electónico: <input type="time" name="hora" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la hora:

Tipo de entrada – Hora

Mes

Para crear un campo donde solicitar un mes se debe añadir la siguiente línea:

Correo electónico: <input type="month" name="mes" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir el mes:

Tipo de entrada – Mes

Semana

Para crear un campo donde solicitar una semana se debe añadir la siguiente línea:

Correo electónico: <input type="week" name="semana" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para introducir la semana:

Tipo de entrada – Semana

Rango numérico

Crea un selector de número comprendido entre cierto rango, para ello utlizar esta línea:

Puntuación[0-10]: <input type="range" name="puntuación" min="1" max="10" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el selector que le aparezca para elegir la puntuación entre 0 y 10:

Tipo de entrada – Range

Color

Para crear un campo donde solicitar un color se debe añadir la siguiente línea:

Color favorito: <input type="color" name="color" />

Cuando el usuario se situe sobre este campo, desde su terminal móvil, este será el teclado que le aparecerá para seleccionar el color. Las imagenes a continuación muestran el selector de color para dos navegadores diferentes:

Tipo de entrada – Color

Tipo de entrada – Color

Ejemplo de un formulario completo

Edad:

Correo electónico:

Buscar:

Página web:

Teléfono:

Fecha:

Hora:

Mes:

Semana:

Puntuación[0-10]:

Color favorito:

The post HTML5 Input type touch friendly, nuevos campos de entrada con sus diferentes teclados appeared first on Blog Developando.

Para realizar esto hay varios métodos:

1. Código HTML
2. Código JavaScript configurando o no el temporizador de espera
3. Redirección en PHP
4. Configurar en el servidor el fichero htaccess 

1 – Redirección con código html

Para ello hay que incluir una nueva etiqueta ‘meta’ en la cabecera de la página:

<meta http-equiv="acción" content="segundos"; url="url destino" />

En esta etiqueta hay que configurar los atributos:

• http-equiv: indicando con ‘Refresh‘ para que se lance la redirección en el tiempo configurado
• content: indica cuantos segundos deben pasar para antes de realizar la redirección, y la nueva dirección a la que se va a encaminar al usuario. En este ejemplo, a los 5 segundo la nueva dirección del blog será cargada.

Este sería un ejemplo completo de una página web que lo que hará será informar de la nueva ubicación y redirigir tras 5 segundos a los usuarios a la nueva página web del blog:

<html>
<head>
<script type="text/javascript">
function redireccion(){
  window.location="http://developando.com/blogNuevo";
} 
setTimeout ("redireccion()", 5000); //Configurar temporizador indicando los milisegundo
</script>
</head>
<body>
<p>Se le enviará al nuevo blog tras 5 segundos</p>
</body>
</html>

2 – Redirección mediante JavaScript

La redirección con JavaScript se puede realizar directamente o configurar una espera antes de realizarla.

2.1 – Redirección sin espera

Añadir únicamente el script de JavaScript que se encargará de realizar la redirección asignando a la variable ‘window.location‘ la URL a la que se quiera redirigir:

<html>
<body>
<script type="text/javascript">
window.location="http://developando.com/blogNuevo";
</script>
</body>
</html>

2.2 – Redirección con espera

JavaScript también nos permite configurar un temporizador tras el cual se producirá la redirección. Para ello, al ejemplo anterior habrá que añadirle la función de ‘setTimeout‘, indicando los milisegundos que pasarán antes de llevarse a cabo la redirección:

<html>
<head>
<script type="text/javascript">
function redireccion(){
  window.locationf="http://developando.com/blogNuevo";
} 
setTimeout ("redireccion()", 5000); //Configurar temporizador indicando los milisegundo
</script>
</head>
<body>
<p>Se le enviará al nuevo blog tras 5 segundos</p>
</body>
</html>

3 – Redirección mediante PHP

Para redirigir mediante PHP habrá que crear un fichero ‘.php‘ con el siguiente contenido:

<?php
header ("Location: http://developando.com/blogNuevo");
?>

4 – Redirreción mediante .htaccess

La redirección mediante este tipo de ficheros ‘.htaccess‘ la explicaremos más en profundidad en futuros tutoriales, pero os dejamos aquí un ejemplo de configuración para redirigir el tráfico de un dominio a otro. Concretamente este ejemplo se utiliza para redigir el tráfico entrante a un dominio mediante una URL que contiene ‘www‘ a ese mismo dominio, pero eliminado las ‘www‘:

# Redirección de un dominio con www a otro sin www
# www.miDominio.com será redirigido a miDominio.com
 
RewriteEngine on
RewriteCond %{HTTP_HOST} www.miDominio.com$
RewriteRule ^/?$ "http\:\/\/miDominio\.com\/" [R=301,L]

The post Redirección 301 en páginas web, métodos para redirigir un sitio web appeared first on Blog Developando.