Desarrollo Web con Sublime Text

Hace bastante tiempo cambie mi IDE de desarrollo (Dreamweaver) por Sublime Text, en su version 2, ahora ya podemos disfrutar de la version 3, pero eso da para escribir otro post con las nuevas caracteristicas y diferencias.

Que es Sublime Text 2?

sublime-text-2-iconSublime Text, en terminos simples, es un editor de texto ligero, pensado desde un inicio en la velocidad, haciendolo uno de los editores de texto más rápido y facil de usar. Además de la velocidad se tiene más de 1000 de plugins adicionales y todas de codigo abierto, con una comunidad de desarrolladores que día a día contribuyen con nuevos plugins.

Sublime Text puede ser utilizado para multiples lenguaje de programacion, no solo para desarrollo Web. Sabemos de sobremanera como trabaja un IDE de desarrollo y las ventajas que ofrece, entonces porque cmabiarnos a Sublime Text, si estamos cómodos con nuestro IDE favorito ? Ahora les comentare las diferencias y ventajas que ofrece Sublime Text.

Saltar a cuelquier lugar

go_toSublime Text tiene una característica llamada “go to anything”, el cual despleiga un panel que permite buscar archivos, metodos, variables, funciones e ir directamente a ciertas líneas de código.

Para acceder a este panel lo único que hay que hacer es precionar la combinación de teclas: CTRL + P, donde se podrá escribir el criterio de búsqueda y a medida que vaya introduciendo el texto, se iran filtrando los resultados de busqueda, esto hace que sea tan rápido encotrar algo, que no se necesita saber de memoria al estructura de carpetas, solo el nombre del archivo.

En la busqueda de archivos, solo hay que hacerlo a travéz de los nombre, pero si queremos buscar dentro de los archvios, existen dos maneras, CTRL + P nos permitira realizar busquedas de funsiones, variables y lineas de codigo especificas, para lo cual utilizaremos el simbolo @ para las funciones, y el simbolo # para las variables y el signo : (dos puntos) para saltar a una determinada línea de código.

Para realizar estas busquedas, no es necesario que el archivo este abierto, por ejemplo si quiere ir a la clase CSS home_page del archivo style.css, se puede teclear lo suguiente en el panel.

goto2Multi cursor

Una de las características que más me llamo la atención y que lo utilizo con relativa frecuencia es esta, la de multi cursor. Ésta característica le permite hacer multiples cambios al mismo tiempo, por ejemplo, si se ha escrito un par de lineas con una variable, pero se desea cambiar el nombre de la variable, en lugar de buscar la funsión de Buscar y Reemplazar se puede utilizar de forma rápida cursor multiselector para buscar la variable y cambiar todos los nombres al mismo tiempo.

multicursorLa combinacion de teclas CTRL + D nos permitira seleccionar una palabra (variable) sobre la que este el cursor, si volvemos a presionar la conbinacion de teclas CTRL + D volvera a buscar la siguiente coincidencia creando dos cursores. Esto hace que sea muy facil para agragar variables o funciones multiples, y lo mejor todo al mismo tiempo.

Gestión de Proyectos

Cuando se trabaja en varios proyectos, la gestión de éstos es fundamental para no cometer el error de modificar archivos que no pertenecen al proyecto. La gestión de proyectos en Sublime Text es muy fácil, se puede agregar carpetas a los nuevos proyectos y Sublime Text va a generar un archivo del proyecto automáticamente para ayudar con la administración.

La mejor parte de la administracion de proyectos con Sublime Text es el cambio rapido que se puede hacer de un proyecto a otro (si se tiene que cambiar de un proyecto a otro, entonces Sublime Text es el indicado).

Para poder utilizarlo, solo se debe presionar la combinacion de teclas CTRL + ALT + P y una ventana listando los proyectos sera mostrado, desde aqui se puede seleccionar cualquier otro proyecto. Cuando se selecciona un nuevo proyecto todos los archivos actuales se cerraran y serán sustituidos con el nuevo proyecto. Pero lo mas interesante es que Sublime Text recordará que archivos estaba abiertos para mostrarlo nuevamente la siguiente vez que se seleccione el proyecto.

proyectosHaciendo nuevamente enfasis en la velocidad de Sublime Text, el cambiar de proyecto esta al alcance de un par de teclas y sin la perdida de los archivos que se estaba editando.

Personalización de cualquier caracterisitica

Si bien la mayoria de los IDE de desarrollo permiten modificar algunas características, en el caso de Sublime Text la personalización avarca a casi cualquier característica.

Se debe acceder a Preference > Setings – Default, donde se encontrará con la enorme lista de valores que se pueden cambiar, entre ellas están el tamaño de la fuente, tipo de letra, la combinación de colores, los números de líneas de pantalla, tamaño de la tabulación, márgenes, etc., etc., etc.

Tabuladores y Espacios

Cuando se trabaja en equipo, una de las cosas importantes es mantener el codigo limpio, de modo que sea mas facil su lectura. Desde el menu se puede seleccionar el numero de espacios que se utilizara.

tabulacionGuardado automatico

Se puede hacer que Sublime Text guarde automáticamente los archivos una vez que realice cambios en ellos (ni vien se pierta el foco), todo lo que se debe hacer es añadir (o modificar) una nueva propiedad en las preferencias de usuario. Por defecto se establece en “false”.

auto_saveAtajos de teclado

Además de tener la capacidad de modificar la forma en que el IDE funcionará, también se puede cambiar los atajos de teclado. Esto se lo hace mediante la navegación a Preferences -> Key Bindings – User .

Paquetes

Como se habia mencionado con anterioridad, una de las razones por las que Sublime Text es elegido, es la enorme cantidad de paquetes que están disponibles. Todos los paquetes que se instalan son como plugins que extienden la funcionalidad de Sublime Text.

El primer paquete que necesita instalar es el “Package Control ” (https://sublime.wbond.net). Este permite instalar / eliminar otros paquetes directamente en el nucleo de Sublime Tex. Con el uso de este plugin, se puede instalar un montón paquetes en cuestión de segundos.

package_controlAlgunos de los paquetes esenciales que se debe utilizar son:

Sublime Prefixr

Este paquete proporciona prefijos de navegador automatico para algunas propiedades CSS, un generador de degradez de color, sombras, bordes de radio, etc,etc.

Sidebar Enchancements

Este paquetes mejora la usabilidad de la barra lateral, dandole más opciones a los nuevos archivos, tambien permite mover archivos, copiar archivos y abrir archivos en otro programa, etc.

Sublime Linter

Este paquete hará resaltar código con errores en el editor de texto. Por ejemplo, si se salta un punto y coma en un archivo PHP, entonces Sublime Linter destacará esta fila para hacer notar que se ha cometido un error en esta línea.

Siblime Linter reconoce errores en los sigueintes lenguajes:

  • C/C++ – lint via cppcheck
  • CoffeeScript – lint via coffee -s -l
  • CSS – lint via built-in csslint, este requiere nodeJs
  • Haml – via haml -c
  • HTML – lint via tidy
  • Java – lint via javac -Xlint
  • Javascript – lint via built en jshint
  • Lua – via luac
  • Objective-J – lint via built-in capp_lint
  • Perl – lint via Perl
  • PHP – via php -l
  • Puppet – via puppet parser validate
  • Python
  • Ruby – via ruby -wc
  • XML – via xmllint

jQuery

Este paquete, viene con varios fragmentos de código listo para obtener ayuda con su desarrollo jQuery.

HTML5

Este paquete de HTML5 viene con fragmentos para el desarrollo HTML más rápido.

SVN

La integración SVN con todas las funciones de Sublime Text 2, proporciona una manera más rápida y mejor para trabajar con Subversion.

Automatic BrowserRefresh-sublime

Si se trabajando en un “montón” de cambios en hojas de estilo CSS (como es mi caso), entonces normalmente se tendría que ver la página, cambiar al IDE, realizar los cambios, guardarlos, volver al navegador, actualizar el navegador (F5) solo para ver los cambios. Con este paquete para Sublime Text 2, se puede saltar del paso de guardar los cambios y automáticamente actualizar el navegador para ver los cambios al instante.

Bootstrap

Este paquete viene con varios fragmentos de codigo lsitos apra ser utilizado concuntamente con este Framework.

Color Picker

Este paquete permite desplegar la apleta de colores.

File Diffs

Este paquete permite comparar archivos que se encuentre abierto (en los tabs).

Este editor de texto, es completamente gratis, sin ningun tipo de restricción ni limite de tiempo de uso, pero si se quiere contribuir con el proyecto, entonces se peude comprar la licencia que vale 59 Dolares.

Anuncios

Sprites, tips y mejores prácticas

No es una técnica nueva, pero el uso de sprites CSS, en lugar de un conjunto de imágenes sueltas/individuales más pequeños, acarreara como beneficio, una mejora en el rendimiento de las páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo con sprites.

new-google-sprite-november-2009

En términos de CSS, sprite es un archivo grande que contiene varias imágenes para ser utilizados en distintos lugares del sitio web, el ahorro de tiempo de carga y espacio web, es muy significativo con el uso de esta técnica.

La característica principal de la utilización en las hojas de estilo CSS la técnica Sprite es que el servidor sólo tiene que enviar un archivo de imagen que contiene todas las imágenes, y no una serie de imágenes individuales – ya través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo de un elemento, evitando de esta manera, las peticiones HTTP al servidor por cada una de las imágenes separadas.

Es importante mantener el número de peticiones HTTP de un sitio lo más bajo posible, ya que los navegadores sólo pueden hacer un número limitado de solicitudes de cualquier servidor al mismo tiempo.

35-social-icons-sprites

Combinando las imágenes en un solo archivo, no sólo se va a disminuir considerablemente el número de peticiones HTTP, pero también disminuirá el tamaño total del archivo de las imágenes.

Enfoques

Hay dos enfoques “comunes” al utilizar la técnica sprites: hacerlo antes o después de la creación del sitio.

La primera: comenzando a la par con el proyecto, es decir de abajo hacia arriba, para ello se va a tener que actualizar el CSS para adaptarse, a medida que avanza el proyecto.

La segunda: como alternativa , se puede crear todas las imágenes como archivos separados, lo que hace a la edición de ellos mucho más sencillo. Una vez que el sitio este construido con todas las imágenes por separado, lo que queda es compilar de forma manual, (o utilizar una herramientas para ello)

Basado en mi experiencia, yo recomendaría utilizar siempre la segunda opción, ya que es más escalable.

images

Tips

Mantener todo organizado

Al colocar las imágenes en Photoshop (o cualquier otra herramienta que se este utilizando) es una buena idea tratar de organizar las cosas con la mayor claridad y facilidad posible. el redondeo (en tamaño) de las imágens a ser utilizadas es importante. Otro punto importante es el espacio entre imágenes, se debe intentar una cierta cantidad uniforme de espacio entre imagen e imagen. Esto ayudara al momento de escribir todo el CSS que lo acompaña, ya que no se tendrá que mantener la medida desiguales ni recordar coordenadas complejas.

Esperar hasta el final para definir todas imagenes con la técnica Sprite

Si se pone todas las imágenes en sprite, pasando bastante tiempo escribiendo el CSS y luego se decide/necesita una edición de imágenes, esto puede puede causar serios problemas, sobre todo si las imágenes necesitan un cambio de tamaño o redimencion, lo que significa que se tendrá que invertir mucho tiempo y esfuerzo en volver a definir posiciones.

El nombre de las etiquetas es fundamental

Si se utiliza Photoshop u otros editores de imágenes, entonces es una buena idea para mantener las capas de cada uno de sprites muy bien etiquetados y agrupados, así todo está muy claro si se tienen que modificar más adelante.

Esto debería ser una regla general para la mayoría de los diseñadores. Esto ahorra tiempo en el etiquetado si se ha tenido una hoja de estilos con sprites muy grande.
Por el lado del código CSS las etiquetas son definitivamente necesarias para confirmar que la imagen sprite se está seleccionado por el código/nombre respectivo.

grid

Algunas herramientas que nos van a ayudar al realizar imágenes Sprites:

http://www.spritecow.com/
http://es.spritegen.website-performance.org/
http://spriteme.org/
http://wearekiss.com/spritepad
http://csssprites.com/
http://www.spritebox.net/

Magic Clip, eliminar el fondo de una imagen online

Cuando se trata de edición de imágenes, puede resultar una tarea compleja para quienes no tengan muchos conocimientos en diseño/edición de imágenes, incluso el cambio/retoque más pequeño puede convertirse en toda una tarea titánica para llegar a los resultados deseados.

editores

Para fortuna de muchos, en Internet existen nuevas herramientas, como es el caso caso de Clipping Magic, una interesante herramienta online y gratuita.

La característica principal de este servicio en la nube es eliminar el fondo de una imagen.

clippingmagic

Los pasos para eliminar el fondo de una imagen con Clipping Magic son muy sencillos:

  1. Subimos la imagen que queremos editar, (Drag and Drop) arrastrando y soltando o mediante el botón para seleccionar el archivo.
  2. Marcamos la zona que queremos mantener en la imagen, para ellos utilizamos el Pincel Verde de la herramienta. Solo basta con hacer clic sobre dicha parte y listo.
  3. Ahora con el Pincel Rojo vamos a marcar la parte de la imagen que queremos eliminar, que normalmente seria el fondo de la misma. Veremos como automáticamente dicha zona desaparece dejando solo la parte señalada en el paso anterior.
  4. Guardamos nuestra nueva imagen y la descargamos si estamos satisfechos con los resultados.

Destacar que el uso de esta herramienta es gratis y no requiere ningún registro.

Dirección: Clipping Magic

Google Web Designer

Google no hace mucho ha anunciado el lanzamiento de Web Designer, una nueva herramienta para la creación de anuncios en  HTML5. La compañía dio alguna información escueta de este lanzamiento en junio, pero no tenía nada concreto ni oficial. Web Designer, que Google llama una “herramienta de diseño de calidad profesional”, es ahora oficialmente un beta pública y disponible para su descarga, tanto para Mac y Windows.

google-web-designer2

Google Web Designer es una aplicación web avanzada creada con HTML5 que le permite diseñar y compilar anuncios HTML5 y otros tipos de contenido web mediante una interfaz visual y de código integrada. Con la vista de diseño de Google Web Designer puede crear contenido con herramientas de dibujo, texto y objetos en 3D, y puede, además, animar objetos en una cronología. Una vez que haya terminado de crear su contenido, Google Web Designer genera archivos HTML5, CSS3 y JavaScript limpios y legibles.

google-web-designer

Entre las principales características de esta herramienta, están:

  • Crear animaciones sobre HTML5 con un herramienta de diseño “intuitiva” pero robusto al mismo tiempo.
  • Trabajar automáticamente sobre cualquier plataforma, incluyendo DoubleClick y AdMob
  • Ver y editar el código que se genera detrás de un diseño
  • Reflejar las ediciones de manera automática
  • Actualizaciones de producto de manera automática
  • Acceso gratuito a la descarga y uso de la herramienta

Si realmente se esta interesado, Google a publicado un canal oficial en YouTube, o si lo prefiere puede acceder al Foro. o la página en Google+. Como todavía se trata de una version Beta, Google esta recibiendo mucho feedback con sugerencias y errores encontrados.

google-web-designer1

Es de destacar que ya existían herramientas muy parecidas, como el Adobe Muse, Reflow y otros, que incluyen varias de las características de Google Web Designer, pero al estar esta última, disponible de forma gratuita, obliga a mejorar a la competencia.

Favicon en Web, mobiles y Tablets

En esta oportunidad les hablare de la importancia del favicon (favorit Icon), y de su correcta insercion en páginas Web, dispositivos mobiles y Tablets (tanto android y iOS).

Sin ingresar en lo obsevivo, detallo a continuacion, lo que yo considero, lo básico y lo neceasrio para lograrlo:

HTML

La forma más básica de mostrar un favicon en la mayoria de los navegadores Web, es simplemente colocando un archivo con la extencion .ico en el directorio raiz del servidor.

Ahora, si lo que queremos es asegurarnos la presencia de nuestro favicon, podemos vincularlo en la cabecera de nuestro codigo:

favicon_basic

Referencia: http://es.wikipedia.org/wiki/Favicon

Para iOS 2.0+, Android 2.1

Para los usuarios de dispositivos moviles con versiones de iOS 2 o superior y Android 2.1 o superior podemos utilizar:

favicon_ios

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción muy útil en dispositivos de la Apple debemos utilizar:

favicon_ios2

Formato de imagen y dimenciones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tips

Estos tips serviran para cuando no se visualizen los cambios (algo que muy habitualmente suede)

  • Borrar la cache del navegador.
  • Abrir y cerrar (en general funciona con Internet Explorer).
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)

favicon_parametros

Favicon con animación, imagen y video

Favicon.js, una libreria en JavaScript, está un paso mas adelante, ya que permite diferentes tipos de transiciones y animaciones, compatible con video html5, y live stream de la webcam. Desafortunadamente, no tiene soporte para Safari ni Internet Explorer (por el momento).

favicon_js

Para mas información:

Como una nota final , cabe hacer notar que no es valido favicon.png en la especificación HTML5 de W3C, solo favicon.ico http://www.w3.org/TR/html5/links.html#rel-icon

Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

edge-inspect-chrome-ex

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introducir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.

Generadores HTML5

HTML5 y CSS3 tienen nuevas características para los que trabajamos en el diseño y desarrollo Web, y en este artículo se pretende mostrar algunas de las mejores herramientas que se necesita para poder dominar estas nuevas características.

Tenemos que recordar que dentro del estándar de la W3C (borrador html5: http://www.w3.org/html/wg/drafts/html/master/) , no solo esta la sintaxis (header, footer, nav, video), sino también herramientas como almacenamiento local, canvas, svg, websocket y todas esas características que visualmente hacen que una Web tenga buena acogida.

También es bueno recordar que estas nuevas características aún no son totalmente compatibles con los motores de renderizado (browser).

A continuación una lista de la que probé:

Generadores HTML5

Los generadores de HTML, son básicamente, una plantilla ya completo y listo para poder trabajar sobre ella. entre las mas importantes están:

INITIALIZR
http://www.initializr.com/

Initializr es un generador de plantillas HTML5 para ayudar a empezar con un nuevo proyecto basado en HTML5 Boilerplate. Genera una plantilla personalizable, limpio, con todo lo que necesita para empezar.

ini

HTML5 Template Generator
http://shikiryu.com/html5/

HTML5 Template Generator es mucho más completa que la anterior opción. Ya que permite agregar características (titulo, descripción, autor, etc.) dentro de un frameword muy robusto como los es Blueprint (http://www.blueprintcss.org/) o sobre HTML5 Boiler Plate (http://html5boilerplate.com/). Además de  agregue librerias  de terceros (jQuery, Google Analitics) muy populares.

html5

Quackit HTML5 Generador
http://www.quackit.com/html/html_generators/html_code_generator.cfm

Este es un generador bastante genérico y básico, el cual permite introducir gran parte de información inicial de un proyecto Web. Lo que realmente llama la atención es que no solo genera HTML, sino también CSS. Para los que recién están aprendiendo a utilizar hojas de estilo en cascada, les caerá como anillo al dedo.

code_generator

Switch to HTML5 Generator
http://switchtohtml5.com/

Este es un generador bastante interesante. Lo que hace es que te permite generar una estructura de forma rápida y fácil, pero a diferencia de HTML5 Boilerplate, éste permite determinar el uso especifico de etiquetas pertenecientes a HTML5 (header, section, nav, aside, footer, etc.).

SwitchToHTML5

Herramientas Wireframe para diseño Web

Es un error empezar una Web directamente con la creación del código (HTML y CSS) o diseñando directamente en Photoshop. Un paso previo debería ser crear un “borrador” con papel y lápiz (tomando en cuenta, objetivos de la pagina, contenidos, etc.), ya que es más fácil (y libre de distracciones) inspirarse sobre el papel que sobre el teclado y monitor.

Antes de empezar a diseñar sobre Photoshop, vale la pena utilizar una herramienta de Wireframing.

WIREFRAME

Una herramienta de Wireframe permite crear un mapa del sitio de la futura Web y hacer un “prototipo”, una idea visual de como sera la estructura de cada página, esto nos permitirá abstraernos de los colores y diseño final, concentrándonos en el contenido y en las arquitectura de la información.

Ahora veremos algunas herramientas de wireframing:

MockFlow
url: http://www.mockflow.com/

uiwireframetools10

Mockingbird
url: https://gomockingbird.com/

Wireframe1

Pencil
url: http://pencil.evolus.vn/Default.html

uiwireframetools8

iPhone Mockup
url: http://iphonemockup.lkmc.ch/

uiwireframetools6

Cacoo
url: https://cacoo.com/lang/es/

uiwireframetools11

Wireframe.cc
url: http://wireframe.cc/

6

Simple Diagrams
url: http://www.simplediagrams.com/

uiwireframetools5

BALSAMIQ MOCKUPS
url: http://www.balsamiq.com/products/mockups

4645

Frame box
url: http://framebox.org/fkBH

uiwireframetools3

Creately
url: http://creately.com/Online-UI-Mockups-and-Wireframes

uiwireframetools12

El uso de una herramienta de wireframe nos permitirá explorar múltiples posibilidades y se lo puede hacer fácil y rápidamente. Ademas sirve para para resaltar y aclarar requerimientos, probar la navegabilidad, realizar pruebas de usabilidad en etapas muy tempranas del proyecto.

Usando @font-face en Diseño Web

Uno de los más grandes errores al utilizar el selector @font-face de CSS3, es el uso de tipografías en formato OTF regular o TTF, en lugar de los formatos de fuente recomendadas WOFF (Web Open Font Format) y EOT (exportable OpenType ). Los formatos de fuentes tradicionales (TTF, OTF), son de uso, principalmente para imprenta.

Ahora, con la amplia adopción de @font-face, en diseño y desarrollado Web, no debe  ser una preocupación el navegador o motor de renderizado que utilice el visitante de una determinada pagina Web, y asegurarse de que cada fuente se muestra como debe ser. Esto, antes,  era un problema, la compatibilidad entre diferentes navegadores.

Hay que tenga en cuenta que no en todos los sitios Web se mostrarán las fuentes de la misma manera (cuando se esta hablando de TTF y OTF). Algunos navegadores mostrarán las tipografías  TTF y  OTF muy bien, mientras que otros les darán los bordes “dentados” y muy poco atractivos. A continuación se muestra un ejemplo de tipografía TTF vistos en Google Chrome.

incorrect-font-face

Como se puede ver, la tipografía se visualiza desenfocada y “dentada”, mostrando las imperfecciones, esto como resultado de solo utilizar TTF.

El código fuente de este ejemplo seria:

code1

A continuación hemos incluido no solo TTF, sino también EOT, WOFF, y la versión SVG de la misma fuente vista en Google Chrome.

correct-font-face

El código sería el siguiente:

code2

Al comparar las dos imágenes, incluso es difícil creer que se trata de la misma fuente. Ésta última imagen es clara, con bordes perfectamente mostrados, y se puede escalar a cualquier tamaño sin pérdida de calidad.

Ahora, la Solución

Si se tiene la fuente (tipografía) y su correspondiente licencia de uso o si se utiliza una tipografía “Free”, entonces hay varios recursos en línea que teniendo un único archivo de tipografia normal, nos lo convertirá y devolverá un paquete de fuentes Web con todos los formatos que se necesita para asegurar que se muestra correctamente en distintos navegadores. Estas son algunas:

@font-face kit generator

url: http://fontface.codeandmore.com/

font-face-generator

Font2Web

url: http://font2web.com/

font2web

online font converter

url: http://onlinefontconverter.com/

online_converder_fontr

Estos servicios nos sirven para la generación de fuentes compatibles con la Web, y sin duda se recomienda su uso (y si la licencia de la tipografía así lo permite), para asegurar que los diseños Web se vean bien en todos los navegadores.

Herramientas Web 2.0 para crear presentación online

Las presentaciones digitales son un forma muy común de exponer en diferentes ámbitos (colegio, universidad, empresa o en cualquier reunión que a merite el apoyo de este tipo de elementos). Normalmente la costumbre de muchos es elaborar presentaciones en el conocido “PowerPoint”, pero a veces esto resulta ser algo tan común que puede aburrir a los espectadores y terminar opacando la presentación.

La mejor manera de hacerlo es a través de herramientas que sean llamativas, interactivas y sobre todo que puedan generar un gran impacto, y que mejor que hacer uso de herramientas Web 2.0 que están a nuestro alcance

A continuación un resumen de algunas de ellas:

Prezi

prezi

Prezi es una herramienta de presentación online que permite crear presentaciones con un aspecto visual muy llamativo a las presentaciones. Actualmente es una de más utilizadas. Tiene la opción de poder utilizarse de manera online o también incluye una versión de escritorio pero solo para los planes de pago. Con cualquier plan se puede crear fácilmente presentaciones propias y compartirlas en línea o descargarlos para verlas sin conexión.

SlideRocket

SlideRocket

SlideRocket permite crear presentaciones desde templates existentes o subir tus archivos de PowerPoint. La herramienta permite colaborar con equipos de trabajo para trabajar conjuntamente en las presentaciones, y cada presentación puede ser compartida por una URL o incrustados en páginas web y blogs. SlideRocket incluye información estadística detallada que le permite ver quién ha visto la presentación, de dónde, cuánto tiempo se esaába en cada diapositiva. SlideRocket es de pago y cuesta $ 24 por usuario al mes con una prueba de 14 días disponible gratuitamente.

PreZentit

PreZentit

PreZentit es una herramienta para crear presentaciones de forma gratuita, actualmente se encuentra en fase beta y su única limitación es 250 Mb de almacenamiento de imágenes. Con PreZentit se puede crear presentaciones en línea, y otros usuarios tienen la opción de trabajar en la presentación al mismo tiempo. Las presentaciones creadas tienen la opción de ser públicas o privadas, y se pueden descargar y ver sin conexión. Las presentaciones creadas, tienen un formato de páginas Web, por lo que es factible la edición si asi se lo requiere.

Empressr

Empressr

Con Empressr se puede subir imágenes, vídeo y audio para crear presentaciones online. Las presentaciones se pueden compartir con sus contactos o “incrustados” en páginas Web y blogs. Desde la parte administrativa de la cuenta se puede ver quién y cuántas personas han visto la presentación. Empressr es una herramienta gratuita.

Tiki-Toki

Tiki_Toki

No todas las presentaciones tienen que ser necesariamente de la manera convencional, esta herramienta nos permite mostrar la presentación de manera lineal, en un modo de Linea de Tiempo.

Ahora, y finalmente, si lo que se quiere es realizar la presentación utilizando únicamente código HTML5 y transiciones CSS3, entonces podemos recurrir a librerias como Impress.js, del cual ya se habló en una anterior entrada: http://bit.ly/11SlO37