Hola Lanzarote ¿Nos quedamos atrás?

Nos quedamos atrás. Si, parece que Lanzarote en muchos aspectos se va quedando atrás y no sólo en áreas de la innovación, promoción tecnológica o las comunicaciones. Si echamos una vista a vuelo de pájaro vemos como nuestros vecinos más cercanos promueven actividades como Inciador o se mueven más rápido a la hora de construir un palacio de congresos y eso sin entrar en cestas de la compra y otras hierbas.

Si ya las islas capitalinas son más abiertas, dinámicas e interesadas en el conocimiento y su difusión, que las otras más “olvidadas” se muevan por sus propios medios para colaborar entre sus habitantes y promover el desarrollo local, pone en evidencia que Lanzarote tiende a ser una isla egoísta.

Afortunadamente lo que acabo de decir no condiciona a toda una isla. Hay inciativas y gente valiosa que intenta sacar cosas adelante por el bien común y el desarrollo de esta pequeña isla. Y otros tienen intenciones y ganas pero se sienten solos y desplazados por no contar con apoyo. Y no estoy hablando de apoyos institucionales, que eso ya es otro cuento, sino de apoyo ciudadano.

Así que si tienes algo que contar, proyectos o iniciativas que ayuden al desarrollo de la isla. Comentalo aquí y donde más puedas, seguro que muchos estarán interesados en tu idea.

Responsive web design y vídeos

Ya conocemos las muchas ventajas que nos aporta diseñar nuestros sitios web siguiendo la filosofía Responsive Web Design de cara al SEO y a la facilidad de gestionar versiones para diferentes dispositivos móviles.

En el trabajo de maquetar nuestros proyectos nos podemos topar con los vídeos, que pueden darnos problemas a la hora de que el diseño sea fluido al 100%. Si tenemos problemas con videos de YouTube o insertados directamente en nuestro servidor, veremos como solucionar este problema fácilmente.

Vídeos con etiquetas HTML5
Si insertamos videos con la etiqueta video y queremos que sean totalemnte flexibles debemos definir lo siguiente en nuestro CSS:


/*Videos en HTML5*/
video {
max-width: 100%;
height: auto;
}

Videos insertados tipo iframe (Youtube, Vimeo, etc)
Para los videos de este tipo también es muy sencillo darle solución para que sean elásticos. Debemos definir el “CSS” y que el iframe este contenido dentro de un “div” tal como veremos a continuación.

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/SCHWUeRGVmQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Puedes verlo en acción en este artículo de HGR Design.

Así que si los vídeos te traían de cabeza en tu proyecto responsive espero que este post te haya podido ayudar.

WP – Añadir y eliminar campos de contacto en perfiles

Es probable que en alguna ocasión necesitemos eliminar y modificar losdatos de contacto que por defecto vienen en los perfiles de usuario de WordPress, por ejemplo el AIM, Jabber, Yahoo IM. Y que además queramos añadir una dirección de contacto, un perfil en facebook, un teléfono, etc.

Es muy sencillo de hacer solo modificando el archivo functions.php de nuestra plantilla y haciendo uso del filtro “user_contactmethods”

Lo primero que tenemos que tener en cuenta es que campos vamos a eliminar y cuales vamos a añadir. En nuestro caso de ejemplo vamos a eliminar: Yahoo IM, AIM y Jabber y añadiremos el campo “Familia”, “Nombre Padre”, “Nombre Madre” y “Domicilio”.

Abrimos nuestro archivo functions.php e insertamos las funciones correspondientes. Tal como se muestra a continuación


#Campos de usuario
add_filter('user_contactmethods', 'my_user_contactmethods');

function my_user_contactmethods($user_contactmethods){

unset($user_contactmethods['yim']);
unset($user_contactmethods['aim']);
unset($user_contactmethods['jabber']);

$user_contactmethods['familia'] = 'Familia (Apellidos)';
$user_contactmethods['nombrep'] = 'Nombre Padre';
$user_contactmethods['nombrem'] = 'Nombre Madre';
$user_contactmethods['direccion'] = 'Domicilio';

return $user_contactmethods;
}

Guardamos nuestro archivo modificado y comprobamos en la página de perfil de usuarios que lo cambios se hayan guardado correctamente.

Si queremos mostrar alguno de estos datos fuera del perfil, podemos usar la función “get_user_meta”.

Ejemplo:
echo get_user_meta(1, 'direccion', true);

Espero que este pequeño tip les pueda servir de ayuda en sus proyectos. Si tienes alguna duda o recomendación, puedes exponerla en los comentarios.

Cómo crear un shortcode para WordPress

En el anterior post vimos como añadir fuera del editor de posts/páginas y widgets un shortcode en wordpress, por ejemplo en un archivo PHP del theme. Así que, para seguir con los “shortcodes” enganchamos hoy con algo que puede ser muy útil y es crear nuestros propios shortcodes.

Vamos a crear el shortcode “info” para darle estilos a un texto, sería algo así:
[shortcode]Texto dentro del shortcode[/shortcode]

Lo primero que haremos es abrir el archivo functions.php de nuestro theme y añadimos el siguiente código:


#Shortcode estilos texto
function textinfo( $atts, $content = null ) {
return '<div class="textinfo">' . $content . '</div>';
}
add_shortcode( 'info', 'textinfo' );

El código se compone de una función llamada “textinfo”, en este caso, que contiene un DIV con una clase a la que le daremos estilos en nuestro CSS “style.css”. Luego se indica el nombre que tendrá el shortcode (info) asociado a la función (textinfo).

Luego abrimos nuestro CSS, por lo general style.css y le damos los estilo que queramos a nuestro shortcode. Por ejemplo algo así:

.textinfo {
font-family: Georgia, "Times New Roman", Times, serif;
font size: 1.1em;
font-style:italic;
margin: 5px 0;
padding: 15px 10px;
text-align:center;
background: #0099FF;
color: #fff;
}

Y ya hemos terminado con nuestro shortcode utilizado en este ejemplo. Como ves, no es muy complicado y puedes crear los shortcodes que necesites, tanto para estilos como para otros usos como los de insertar vídeos, estilos para imágenes, listas, botones, etc.

Antes de terminar, veamos nuestro shortcode en funcionamiento. Resultado:
[info]Texto dentro del shortcode “info” [/info]

Insertar Shortcodes en WordPress fuera del editor

Si trabajas normalmente con WordPress estarás acostumbrado a los Shortcodes, los podemos encontrar en las galerías, plugins que instalamos o que creemos nosotros mismos.

Por lo general estos shortcodes del tipo [galeria] los insertamos en el editor de posts y páginas o también en widgets. Pero que podemos hacer cuando necesitamos incluir algún shortcode en un sitio diferente de nuestra web, por ejemplo en una plantilla de página del theme o alguna parte puntual como el footer?

En este caso debemos usar la función “do_shortcode”


// Usar un shortcode en un archivo PHP (fuera del editor).
<?php echo do_shortcode('[galeria]'); ?>

Tendrás que reemplazar el shortcode [galeria] por el que estés usando. Puedes encontrar más sonre la esta función en el Codex de WordPress.

Rel-Canonical y versiones web móviles

Hoy en día hay varias formas de tener una versión móvil de un sitio web. Una de las maneras de ser compatibles con todo tipo de dispositivos es usando Responsive Web Design que básicamente con solo un CSS cargamos estilos para diferentes resoluciones de pantalla. La otra forma es que usemos diferentes hojas de estilo dependiendo del navegador o dispositivo y además de esto usando diferentes URLs para cada uno.

Vamos a centrarnos en la última opción porque siendo totalmente valido y funcional tener diferentes páginas o URLs dependiendo del dispositivo, podemos tener problemas de contenido duplicado y penalización por parte de Google u otros buscadores.

Lo normal es encontrarte con dos versiones. Una versión normal del tipo http://mipaginaweb.com/hola.html y otra versión del tipo http://m.mipaginaweb.com/hola.html para los dispositivos móviles. Y en algunos casos encontrarnos también con versiones para smartphones http://smartphone.mipaginaweb.com/hola.html o televisiones http://tv.mipaginaweb.com/hola.html

Aquí es donde entra en juego el “Rel-Canonical” que lo insertamos vía html en la cabecera de nuestra página. Supongamos que tenemos tres versiones:

URL versión normal: http://mipaginaweb.com/hola.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Página Web</title>
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.mipaginaweb.com/hola.html">
<link rel="alternate" media="handheld" href="http://smartphone.mipaginaweb.com/hola.html">
<link rel="canonical" href="http://mipaginaweb.com/hola.html">
</head>

URL versión móvil: http://m.mipaginaweb.com/hola.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Página Web</title>
<link rel="canonical" href="http://mipaginaweb.com/hola.html">
</head>

URL versión smartphone: http://smartphone.mipaginaweb.com/hola.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi Página Web</title>
<link rel="canonical" href="http://mipaginaweb.com/hola.html">
</head>

Y esto es todo lo que tendrías que hacer para indicarle a los buscadores cual es la página principal y así no indexar los tres contenidos que en este caso serían duplicados.

Si quieres saber más sobre las url canonical visita el soporte oficial de Google o esta entrada en la wikipedia.

Páginas de empresa en Pinterest

Desde hace unas semanas la red social Pinterest permite tener páginas de empresa en vez de los perfiles tal como los conocemos ahora. Así que vamos a ver como puedes hacerlo, manos a la obra.

Si estamos usando un perfil con nuestra marca o empresa accedemos a esta url http://business.pinterest.com/ y seguimos los pasos que nos indica. Seguimos las mismas indicaciones si no disponemos de perfil y queremos crear un perfil de empresa nuevo, en este caso en vez de seleccionar el botón grande de “Convert your existing account” escogemos la opción que hay justo debajo que pone “New to Pinterest? Join as a business”.

Convertir cuenta Pinterest en perfil de empresa

Lo siguiente es verificar nuestra página web. Puedes ver como se hace en este post. Básicamente tendrás que descargar el archivo HTML que Pinterest te proporciona para tu cuenta y subirlo al servidor de tu sitio Web. Después le indicas en tu perfil que verifique a ver si está todo correcto.

Con estos pasos ya tendrás todo hecho. Ahora podrás acceso a los botones, widgets, boards, etc. para incluir en tu sitio web y permitir a tus usuarios “pinear” tu contenido, seguir tu cuenta o “boards” y así generar más tráfico a tu web.

Lo imprescindible en una Landing Page

Aunque ya sabemos lo necesarias que son las Landing Pages para mostrar a nuestros potenciales clientes nuestro producto o servicio y que lo entienda de manera sencilla a veces nos topamos con páginas de aterrizaje que fallan en su intención de lograr que el visitante se interese por lo que ofrece dicho escaparate.

A modo personal expondré tres puntos que son de vital importancia en una landing page y que no deberías dejar en el aire.

Mensaje Directo
En muchas ocasiones es complicado redactar un mensaje que sea lo más directo y fácil de entender por los visitantes o tus potenciales clientes. Pero debemos desgranarnos el cerebro y hacer muchas pruebas con familiares o amigos hasta que nuestro mensaje se entienda lo mejor posible. Además debemos evitar la densidad del texto, ve al grano ya tendrás tiempo de extenderte cuando hayas captado la atención del visitante o cliente.

Primeras impresiones
Debemos mostrar gráficamente lo que ofrecemos y de la mejor manera posible. Un vídeo sería excelente, pero si no podemos permitírnoslo entonces debemos seleccionar las mejores fotos, imágenes o diseños que muestren el producto o servicio de manera destacada y funcional.

Contacto fácil
Ponle de manera sencilla a tu visitante la forma de contactar contigo. Hay muchas posibilidades como los formularios de contacto, teléfono, email y enlaces a redes sociales. Las llamadas a la acción deben ser visibles. Si usamos botones de contacto que estos sean grandes y de un color que destaque. Puede que alguien que este viendo tu landing page no le interese tu producto o servicio pero conoce a alguien que si puede estarlo. Así que ten visible y funcionales medios para compartir tu página.

Evita los clicks innecesarios, si tenemos un botón que abre un formulario de contacto, sería interesante que ese formulario estuviera presente en la página sin hacer clic y de manera destacada, muy visible.

Puedes dejarnos tus impresiones y experiencias con landing pages en lo comentarios. Hasta la próxima!

Prototipar nuestros diseños web

Si hay algo que he mejorado en mi camino como diseñador de sitios web es a hacer un buen uso de prototipos para los diferentes proyectos que realizo. Al principio de esta andadura y por la inexperiencia no lo tenía en cuenta y la mayoría de trabajos los empezaba a “picar y diseñar” desde el primer momento. El HTML, el CSS, imágenes, botones, iconos, etc. Y claro, luego venían los cambios que en ocasiones eran simples o totales y por ende perdiendo un montón de tiempo.

A pesar de tener una formación en diseño gráfico, los bocetos para los proyectos casi siempre los omitía. Vaya tonto de mi! Todo debido a la inexperiencia con el nuevo mundo del diseño web al que acababa de acceder.

Desde hace un buen tiempo, todos los proyectos que me llegan, después de pasar la fase de “entendimiento del proyecto” lo siguiente es tomar lapiz y papel para empezar a “bosquejar” el futuro diseño. En este punto ya se pueden tomar decisiones del diseño final. Entre el cliente y yo llegamos a un punto en que estamos conformes. De ahí paso a preparar un wireframe con unos trazos más precisos que los del lápiz y damos el visto bueno.

Wireframe Vimeo

Una vez tenemos el tema del “wireframe” en un punto positivo vamos a PhotoShop u otro programa de edición gráfica a maquetar, de la manera más fiel posible, el diseño real del sitio web. Con su logo, colores, textos, imágenes, etc. Esto ya es el final de la parte del prototipo. Cuando estamos conformes con esta última maqueta y después de todos los cambios ya nos podemos poner a pelear con el HTML, CSS, JS para lograr tener una web real de acuerdo al prototipo con el que se empezó todo.

Wireframe gráfico

Así que mi consejo es que si no estás prototipando de alguna manera tus trabajos, deberías empezar a hacerlo. Verás como organizas mejor el proyecto y reduces tiempos de ejecución. Y además tus clientes o grupo de trabajo te lo agradecerán.

Si quieres saber más sobre prototipos o wireframes puedes ver esta recopilación de 35 recursos en Smashing Magazine o ver algunos ejemplos aquí y en este otro post para tener más idea o entenderlo mejor.

Herramientas online

wireframe.cc // Gratuito, minimalista y muy intuitivo.
5 “wireframes apps” gratuitas // Recopilación
Mockup Designer/ // Sencillo de usar.
lucidchart.com // Completo, con versión de pago.
balsamiq.com // De pago