HTML y CSS veloz con Emmet

Emmet es un plugin para los editores de código más populares hoy en día como Sublime Text, Coda o Eclipse. Nos permite trabajar de manera más rápida con HTML y CSS mediante abreviaturas, al estilo Zen Coding.

¿En qué consiste su funcionamiento?
Básicamente nos ahorra trabajo a la hora de escribir HTML y CSS mediante la abreviación de etiquetas, selectores y clases CSS. Además de complementarse con operadores.

Pero lo mejor es ver ejemplos de como funciona Emmet. Vamos a ver algunos ejemplos HTML.

Crear un documento HTML5 nuevo
Basta con solo escribir: “html:5” y presionar la tecla “Tab” el resultado es el siguiente:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Nos genera inmediatamente un cuerpo básico de documento en HTML5. Ahorrandonos muchas líneas que ya sabemos de memoria y que son reptitivas.

Etiquetas básicas
Podemos escribir cualquier etiqueta sin los “<>” y automáticamente se crean. Si escribimos “div, p o ul” y presionamos la tecla “Tab” nos genera:

<div></div> - <p></p> - <ul></ul>

Usando los operadores
Podemos usar una gran cantidad de operadores como suma, multiplicación, anidación, etc. vamos a ver un ejemplo de anidación. Escribimos “div>ul>li” y presionamos “Tab” obtendremos como resultado:


<div>
<ul>
<li></li>
</ul>
</div>

Si nos basamos en el ejemplo anterior, pero en vez de un solo “li” queremos 5, podemos usar el operador de multiplicación, de esta manera: “div>ul>li*5” que nos daría como resultado:


<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

En CSS tenemos más de lo mismo, si queremos la propiedad “margin” con valor “20px” tan solo escribimos “m20” que nos dará como resultado:

margin: 20px;

Con los prefijos propietarios, estos son los de webkit o mozilla lo tenemos más fácil para no repetir. Si queremos usar la propiedad “border-radius” escribimos “bdrs” lo que nos genera:


-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Como puedes ver, con este plugin nuestro trabajo puede ser más eficiente y rápido. Si quieres saber mucho más obre Emmet te invito a ver esta presentación de @nabaroa que es muy completa. También en Smashin Magazine hay un buen artículo con muchos ejemplos. Y para instalar el plugin en tu editor favorito solo debes seguir los pasos que te indican en la web oficial de Emmet.io.

Welovroi, vitaminas para el marketing digital

Hace un par de meses tuve la oportunidad de empezar a probar welovroi por invitación de uno de sus creadores, Kilian Barrera.

Welovroi es una aplicación web que nació en Canarias y que pretende hacerle la vida más fácil a quienes se dedican al marketing online. Welovroi utiliza fuentes de datos (Google Analytics, CPC / CPM, Social Media, SEO, etc) y guarda los indicadores clave que tu elijas y los muestra en un panel. También genera automáticamente informes personalizados y presentaciones.

La herramienta también hace análisis de desempeño de las diferentes campañas y objetivos cumplidos o a cumplir que tu hayas marcado. Con tu cuenta puedes crear todos los proyectos que quieras, por ejemplo, separados por cliente o por proyectos si tienes varios.

Cada proyecto tiene sus propios Dashboards o tableros, Informes, Campañas y Aplicaciones, como Google Analytics, Adwords Campaign, Adwords Account, Facebook Fan Page, Facebook Benchmark,Twitter, Twitter Hashtag, Twitter Benchmark, Google Adwords, Alexa, Bitly, Mailchimp, Youtube Chanel, Youtube Video, entre otros.

Tableros de welovroi

En un solo panel podemos, por ejemplo, ver de golpe datos de google analytics, evolución de seguidores en twitter y facebook, metricas de enlaces tipo bit.ly o goo.gl, calcular el ROI de determinadas campañas y mucho más.

La ventaja de este tipo de aplicación es que puedes tener todas las metricas que necesites en un solo sitio, ahorrando trabajo y organizando mejor lo que más te interesa.

Si quieres saber más sobre welovroi, sígueles en twitter o visita su blog. También puedes pasarte por su sitio de ayuda.

Razones para usar SVG en nuestros diseños

SVG es un formato de imagen para gráficos vectoriales. Literalmente significa Scalable Vector Graphics. Es el formato con el que trabajan los editores de imagen en vector como Illustrator, Freehand, Inkscape o Corel Draw. Gracias a los nuevos estándares y navegadores modernos se puede utilizar SVG en la web con bastante facilidad.

Para los que trabajamos con editores de vector desde hace años, este nuevo formato de “imagen” nos resulta bastante cómodo para construir la web. Si desconocías este formato o no habías trabajado con el en la web te daré algunas razones por la que su uso es bastante positivo.

Escalable
SVG es escalable. Al ser un gráfico vectorial, este no tiene problemas de pixelado al contraer o expandir. Es una de las mejores opciones para que los gráficos de tu web sea vean perfectamente en cualquier tipo de pantalla. Incluso en las de alta resolución como las retina de algunos productos de Apple.

Interactivo
Es un formato al que mediante CSS o Javascript podemos variar colores, tamaños, posiciones, etc. Da más opciones en cuanto transformaciones que los típicos PNG, JPG o GIF. Por ejemplo podemos darle color al borde de un circulo y otro color al relleno o dos objetos en una imagen, tal como se hace este ejemplo.

Liviano
Por lo general los archivos vectoriales son poco pesados. El logo de nuestra web puede estar perfectamente en formato SVG y podemos ahorrarnos un 50% del peso que si estuviera en PNG o JPG.

Formas de uso
Se puede usar de muchas maneras. En línea con la etiqueta , con la etiqueta para poder sacarle más partido a los graficos. Directamente desde CSS, con PHP, etc.

SVG no es compatible, como era de esperar, con todos los navegadores. Pero como suele ser habitual, tenemos manera de solucionar eso como con Modernizr o “hacks” en este caso, con javascript.

Modernizr

if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}

javascript

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Puedes ver la compatibilidad de SVG con los navegadores más usados. Si quieres saber más sobre el uso de SVG, te recomiendo este artículo de CSS Tricks.

Google y el sector turístico

El gigante de los buscadores y casi dueño de todo internet, Google, ya se está haciendo un hueco en el sector turístico español, si es que antes ya no lo había hecho. Hace poco ha aterrizado con sus dos nuevos servicios, Google Hotel Finder y el buscador de vuelos.

Google Hotel Finder

Es un nuevo buscador y comparador de hoteles diseñado y puesto en marcha por Google. Es funcional, pero parece que aún no está del todo completo.

Parece que por el momento, Google renuncia a meterse con el negocio de las reservas. En su caso redirige hacia las webs especializadas el resultado que nos ha generado. En principio se centrará en ser un comparador de hoteles por precio, opiniones, etc. También se encuentran hoteles de las grandes cadenas para reservarlos directamente y además Google dice que añadirá hoteles y cadenas independientes.

Buscador Hotel Google Lanzarote

Obviamente Google “barre para adentro” e incluye anuncios de AdWords, así que los que estén mejor posicionados serán los que completen el circulo de su negocio publicitario. En este caso reservado para los grandes comisionistas del estilo trivago, booking, etc.

Google flights

Otro punto fuerte es el buscador de vuelos que entrará a competir con portales como Kayak o Trabber y probablemente dejando fuera de juego o poniéndole las cosas más difíciles a otros buscadores de agencias más modestas.

Es un buscador muy completo donde además de poder seleccionar fechas, aeropuertos, orígenes y destinos, también podemos establecer unos cuantos filtros más como, escalas, horarios, compañías, etc. Todo esto para tener una búsqueda bastante personalizada.

Buscador de vuelos de Google

Podemos ver el mapa del trayecto en un gráfico con las tarifas más económicas, algo muy útil para todos aquellos que tienen flexibilidad de fechas y horarios.

Su funcionamiento es similar al servicio de hoteles, al terminar nuestro itinerario podemos hacer click en el botón para reservar donde nos redirigirá al sistema de reserva de la compañía aérea elegida. Por el momento no hay incluidas líneas de bajo coste.

¿Es bueno o malo para el sector?

Sin duda, la respuesta a esta pregunta es relativa, depende del negocio de cada quién. Desde mi punto de vista lo veo positivo por el simple hecho de que Google será un competidor extremadamente duro en el campo de las reservas hoteleras y donde, en principio, los más beneficiados serán los comisionistas y quienes se anuncian en AdWords. Pero los pequeños hoteles, apartamentos y casas tendrán más visibilidad ya que el buscador ofrece las reservas de forma que se pueda escoger entre diferentes “portales de reserva” o desde la web del propio negocio.

Ponte las pilas, aliarte o luchar contra Google, esa es la cuestión. Pero, haz algo. Las herramientas están ahí.

Responsive Web Design y SEO

Seguramente has escuchado o leído sobre cual es la mejor manera de optimizar nuestro sitio web para que sea accesible desde la mayoría de dispositivos móviles y que afecte poco o no nos afecte al SEO de nuestra página web.

Hoy desde una perspectiva menos personal, me centraré en las recomendaciones de Google ya que es el buscador al que tenemos que seducir. En resumen, Google no nos dice si usar Responsive Web Design en nuestros proyectos es mejor o peor que las re-direcciones a diferentes versiones de nuestra web. Pero deja claro las ventajas del RWD frente a las otras formas de optimizar nuestro sitio para diferentes dispositivos.

Google nos dice: Responsive Web Design es una técnica para crear páginas web que alteran su apariencia usando CSS3 y Media Queries. Es decir, es un solo HTML que independientemente del dispositivo que accede a ella altera su diseño usando CSS para especificar las reglas que se aplican dependiendo de su resolución.

Responsive Web Design tiene múltiples ventajas, entre ellas:

  • Mantiene el contenido para pantallas normales, tablets y contenido móvil en una única URL, estos es más fácil para los usuarios a la hora de interactuar, compartir y enlazar. Además google ayuda a los algoritmos de Google a indexar mejor el contenido.
  • Google puede descubrir su contenido de manera más eficiente, ya que no tendría que rastrear una página con los diferentes “User Agents” de Googlebot para recuperar e indexar todo el contenido.
  • No es necesaria la redirección ‘para que el usuario vea el contenido optmizado desde su dispositivo, lo que reduce el tiempo de carga. Además, las redirecciones basadas en “user agent” son propensas a errores y puede degradar la experiencia de usuario de su sitio web.
  • Se ahorra recursos tanto para su sitio y los rastreadores de Google. Con Responsive Design, cualquier Googlebot rastreará sus páginas una vez, en contraposición con el rastreo de múltiples versiones de su sitio web con diferentes agentes de usuario, para poder indexar su contenido. Esto mejora en la eficiencia de rastreo ya que ayuda a Google a indexar mejor los contenidos del sitio y mantenerlos actualizados.

Puedes ver más información en el blog Webmaster Central de Google.

Blog Webmaster Central de Google | Guía, explicación de uso y ejemplos propios por parte google.

Google Developers | Creando sitios web optmizados para Smartphones.

Google Reader dice ¡Adiós!

Así es, ¿y qué voy a contar yo que no se haya dicho o no hayas leído en las últimas horas? El día 1 de julio de 2013 ha sido el día elegido por la gente de Google para jubilar al entrañable Google Reader. Se pueden hacer “cabalas” de por qué cierran un servicio usado por millones de personas en el mundo, lo más normal es que sea por temas económicos, google quiere sacar dinero de todos sus servicios y parece que con el reader no lo han conseguido.

Sin duda se le echara de menos. En mi caso lo uso a diario y es el canal principal para recibir actualizaciones de los sitios que me interesan, por delante de twitter y flipboard. No queda otra que irse a otro servicio, que los hay y muy variados, parece que fedly es uno de ellos y flipboard ya ha anunciado que puedes “salvar tus feeds” de manera sencilla en su aplicación.ç

Por lo pronto aquí te explican como hacer una copia de todos tus feeds, seguidores, destacados, etc. Suerte!

Lo nuevo de Pinterest, Web Analytics

Parece que Pinterest va despejando la incognita de como monetizará su servicio, ayer los chicos de los tableros y pines nos presentaron su sistema interno de analitica Pinterest Web Analytics. Es una potente herramienta de analítica para cuentas de marcas y empresa verificadas en Pinterest.

“El objetivo es que los administradores de las cuentas puedan ver cuáles de sus contenidos están siendo compartidos en Pinterest” según comenta el responsable desarrollo. Sin duda es una herramienta esencial que nos permitirá ver y controlar de una forma más organizada la actividad de nuestra cuenta en Pinterest.

pinterest-web-analytics

¿Cómo activo esta funcionalidad?

1. Tener acceso a la nueva imagen de Pinterest .

2. Asegúrate de que tienes el sitio web verificado. Si usted tiene un sitio web que aparece en su perfil con una marca de verificación junto a él, es que está verificado.

3. Una vez que tu sitio web se ha verificado, tienes que ir al menú de arriba a la derecha y hacer clic en Analytics.

4. Comienza a explorar!

La activación de esta herramienta parece que no es inmediata y se irá aplicando a las cuentas progresivamente.

Recursos para diseño web

Los recursos online es una potente ayuda que tenemos los diseñadores para sacar adelante nuestros proyectos y hacer más ágil el trabajo. Tenemos desde herramientas para mezclar colores, bancos de imágenes o catálogos de fuentes.

Hoy voy a hacer un listado de algunas de las herramientas y recursos que uso casi a diario para darle forma los proyectos en los que trabajo.

colour-loversColour Lovers
colourlovers.com
Es un sitio web donde podemos crear nuestras propias paletas de colores y buscar de entre las miles que hay aportadas por los usuarios. Esto nos permite visualizar un color o colores con los que tengamos que trabajar y ver con que otros colores hacen una mezcla con armonía. Además tenemos texturas y plantillas para crearlas.

subtle-patternsSubtle Patterns
subtlepatterns.com
Es una excelente web donde podemos visualizar de manera rápida y sencilla más de 300 texturas para usar en nuestros proyectos. Se caracterizan por ser de un cuidado diseño, claras y especiales para web. Tiene dos tipos de visualización y todas las texturas están etiquetadas por colores.

icons-dbicons DB
iconsdb.com
Miles de iconos para tus trabajos. Puedes buscar por categorías y lo mejor es que también puedes hacerlo por color (hexadecimal). Así que puedes tener tu icono al instante y en el color que necesites. Además tienes varios tipos de formato disponible para descarga, como por ejemplo PNG, ICO o EPS.

google-fontsGoogle Web Fonts
google.com/webfonts
Una de las mejores bibliotecas con fuentes libres y aprovechando la API de google para incluirlas en nuestros proyectos. Hay cientos de estilos y formas. El buscador es bastante completo, puedes buscar por estilo, grosor, dureza, etc. Seguro que encuentras la fuente que necesitas.

lorem-pixelLorem Pixel
lorempixel.com
Si necesitamos una imagen o imágenes de muestra cuando estamos maquetando nuestra web, con lorem pixel podemos generar imágenes de diferentes categorías y en el tamaño que necesitemos. Solo debemos incluir la url del tipo “http://lorempixel.com/400/200” con la etiqueta y tendremo una imagen aleatoria de 400×200 pixeles.

sxcSXC.hu
sxc.hu
Banco de imágenes libres de derechos. En ocasiones viene bien tener a mano imágenes, pero para no llevarnos sorpresas legales sacando las fotos desde “google images” u otro medio, lo mejor es optar por imágenes libres de derechos. En SXC.HU tenemos miles de imágenes de este tipo. En este otro post puedes encontrar más bancos de imágenes libres.

Por hoy es suficiente, iré ampliando la lista en siguientes post. Así que pásate por aquí en los próximos días si quieres saber más sobre recursos para ser más eficiente “fabricando la web”. Y si tienes herramientas o aplicaciones y quieres compartirlas con todos, recuerda que lo puedes hacer en los comentarios.

Muestra tu negocio con YouTube y Adwords

Ya quedaron atrás aquellos tiempos en los que hacer publicidad en formato vídeo estaba solo al alcance muy pocos, ya que la forma de difundirlo pasaba por la televisión o el cine, soportes bastantes costosos. En nuestros tiempos cualquier persona o empresa puede llegar en forma de vídeo a cualquier tipo publico. Y el limite solo lo pone el ingenio, aunque muchas veces también el presupuesto. Pero, lo realmente interesante es que con pocos medios puedes proyectar tu producto o servicio al mundo en cuestión de minutos.

Sin duda la plataforma estrella es YouTube, por ser el líder en internet para el consumo de vídeo. Podemos valorar otras plataformas como Vimeo o Dailymotion, entre otras. Pero si queremos llegar a más publico y sobretodo especifico la mejor opción es Youtube con su sistema de publicidad. Si ya has creado campañas con Google AdWords te será de mucha ayuda porque la creación de campañas con Youtube son muy similares.

  • Subir tu vídeo y ponerlo a disposición de todo el mundo es gratis.
  • Puedes usar AdWords controlando un presupuesto para promocionar tu video.
  • Puedes definir las palabras clave con las que encontrarán tu vídeo.
  • El publico al que quieres llegar (edad, género).
  • Definir si quieres mostrar el vídeo en una determinada región.
  • Youtube te permite editar tu vídeo en línea.

¿Te quieres poner manos a la obra? En esta sección, creada específicamente para dar soporte puedes encontrar información y recursos valiosos para que realizar tu vídeo no sea tan difícil.

Cuenta tu historia, da a conocer tu negocio al mundo o a tu localidad. En HGR Design estamos preparando nuestra incursión en el mundo del video. ¿Te veremos a ti también?