Front-End Zen

Chiste del día

- ¿Cómo se llama uno de Front-End en élfico?

Read the rest of this entry »

Internet Explorer 6 cada día más marginado

Me encantan estos titulares. Ya hemos observado cómo en los últimos meses grandes portales web han empezado a mostrar mensajes “aconsejando” que se actualicen el navegador a otro más moderno y seguro.

Goolge vuelve a dar un paso más contra este navegador mega obsoleto llamado Internet Explorer 6 amenazando adivirtiendo que a partir del 1 de marzo sus aplicaciones online como el google docs o google sites ya no podrán usarse desde IE6. Así lo ha anunciado el Encargado de Producto de Google Apps, Rajen Sheth, en el blog oficial de Google Docs, donde afirma que la compañía retirará el soporte para el navegador a partir de esa fecha.

Otra gran noticia pues para los desarrolladores Front-End. El fin de los días de Internet Explorer 6 se ve cada vez más cerca.

Fuente: cadenaser.com

¿Eres Front-End Developer y buscas trabajo?

Entonces lee atentamente lo que voy a contarte a continuación porque te va a interesar.

Oferta de trabajo como Front-End Developer

En la empresa donde trabajo actualmente estamos buscando a buenos desarrolladores web de Front para incorporarse en un equipo especializado en CSS, Javascript y Html. Somos una empresa española punto com, líderes en nuestro sector y trabajamos en un ambiente de muy buen rollo, jóven, con buenos profesionales, moderno… y además no pagan nada mal!

Para el puesto de FRONT-END DEVELOPER pedimos unos mínimos:

• Nivel muy alto de CSS y XHTML.
• Nivel medio-alto en Javascript.
• Desarrollo con código limpio y semántico.
• Proactividad y motivación por aprender.
• Trabajar en equipo.
• Gusto por el detalle.

Y se valorará:

• Conocimiento de frameworks de Javascript como prototype, jquery, etc.
• Experiencia en entorno CVS/SVN y uso de SMARTY.
• Conceptos de accesibilidad y usabilidad.
• Experiencia con gestores de contenido CMS, preferiblemente con Wordpress.
• Maquetación de emails, newsletters, CRM, etc.
• Experiencia mínima 1 año en desarrollo web (Front).

Si estás interesad@ en esta oferta, por favor envíame un email a info [arroba] inspiroh [punto] com con tu CV y a poder ser con ejemplos de trabajos web realizados. También puedes dejar un comentario en este artículo si lo prefieres, y me pondré en contacto contigo con la mayor brevedad posible.

Read the rest of this entry »

El navegador Firefox supera a Internet Explorer

Encontré la mejor forma de estrenar nuevo año en el blog, y es publicando la siguiente noticia: ¡Firefox ya es el navegador más usado del mundo! Superando así al duro-de-pelar Internet Explorer. Para un profesional del sector como yo, es una tremenda noticia, porque muchos (por no decir todos) especializados en el desarrollo Front-End esperábamos con ansias una noticia así. Los motivos sobran, además que yo personalmente uso Firefox para trabajar (con el componente firebug para facilitar el desarrollo) Por fin el futuro parece tener luz y aquellos argumentos de:

Tienes que validar la web para Internet Explorer 6, 7 y 8… porque la mayoría de gente usa Explorer // porque el cliente lo ve en ese navegador // porque me gusta tocarte los cojones…

Van a pasar a formar parte de una pesadilla que tuvimos en el pasado. Y es que no uno  se cansa de repetir tantas veces que

Según unas estadísticas obtenidas de StatCounter (un servicio gratuito de estadística web, tipo google analytics), el navegador Firefox 3.5 supera por primera vez a Internet Explorer 7, coronándose como el navegador más usado.

Read the rest of this entry »

Detectar el navegador con javascript

Hay varias formas de detectar en JS qué navegador está utilizando el cliente para visualizar nuestras webs. En un momento dado nos puede interesar saber el navegador que está utilizando para condicionar la funcionalidad de nuestro script.

Internet Explorer

Para detectar si usa Internet Explorer sin tener en cuenta la versión:

var ie=(document.all)? true:false;
if (ie) alert('Su navegador es Internet Explorer');

Internet Explorer 6

Muchos sabemos que IE6 es un caso especial. El siguiente script nos ayudará a detectar este caso y controlarlo:

var is_ie6 = (window.external && typeof window.XMLHttpRequest == "undefined");
if (is_ie6 ) alert('Su navegador es Internet Explorer 6');

Safari

Para detectar el navegador de Apple:

var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
if (is_safari ) alert('Su navegador es Safari');

Google Chrome

Aunque es un navegador que cumple bastante fielmente los estándares, sigue comportándose en determinados casos de forma especial. Controlaremos este caso así:

var is_chrome= navigator.userAgent.toLowerCase().indexOf('chrome/') > -1;
if (is_chrome) alert('Su navegador es Google Chrome');

No incluyo ningún script para detectar si el navegador es Firefox ya que es un navegador que cumple al 100% los estándares, el cual nos permite tratarlo como el caso por defecto.

El objeto Navigator

En los últimos 2 casos vemos que usamos el objeto navigator que contiene la info que buscamos. De hecho podríamos usar este objeto navigator para detectar cualquier navegador, ya que navigator.userAgent.toLowerCase() nos indica el tipo de navegador que usa, la versión y más información que nos puede servir para controlar cada caso.

Haz clic aquí para ver un ejemplo del objeto Navigator.

Al hacer clic te debe de salir la siguiente información:

Read the rest of this entry »

Youtube marca el inicio del fin de Internet Explorer 6

Pronto retiraremos el servicio de asistencia para Internet Explorer 6..

Youtube acaba de hacernos  un favor inmenso a todos los Front-End developers y desarrolladores web en general. Y es que desde ahora, cuando abres Youtube usando el  IE6, muestra al usuario un mensaje “invitándole” a actualizar su navegador por uno más reciente. Youtube acompaña el mensaje recomendando los navegadores ‘Google Chrome’, el ‘Internet Explorer 8′ o el ‘Firefox 3.5′.

Youtube da la espalda a IE6

En el mensaje, Youtube informa que “Pronto retiraremos el servicio de asistencia para Internet Explorer 6, por lo que te recomendamos que actualices la versión ya.” Vamos,  un mensaje bastante claro de que va a dejar de preocuparse de que sus desarrollos funcionen en IE6 y se vea bien.

Siempre había pensado que esto es lo que teníamos que hacer los desarrolladores hace mucho tiempo. Porque hasta ahora siempre argumentábamos (o mejor dicho los clientes) que dado que más del 70% de usuarios usan IE6 (que por cierto se ha visto reducido notablemente ese porcentaje) teníamos que adaptar la web a ese navegador. La web se adapta al usuario, y no al revés. De esa forma no hay forma posible para evoucionar. Por una vez, debe ser el usuario que se tiene que adaptar a los tiempos, aprovecharse de las tecnologías nuevas.

Que una web como Youtube haya tomado esa postura sin duda se va a notar el impacto. No olvidemos que se trata de una de las webs que más visitas atrae a diario.

Tanto me ha animado esta noticia que yo también voy a mostrar el mismo mensaje en mis proyectos. De hecho, hace unos meses mostraba un mensaje similar en Cine25, pero lo quité… no sé por qué lo quité…

¡Haz lo mismo! ¡¡Esto es el principio del fin de IE6!!

Scripty2: Lo más nuevo de Prototype y Scriptaculous

Cualquier Front-End Developer sabe que en la actualidad disponemos de una multitud de herramientas que nos ayuda con el día a día. Para desarrollar en Javascript existen frameworks potentes, entre los más populares están jQuery, Prototype, YUI y Mootools.  Todas estas librerías son proyectos open-source y tienen detrás una comunidad importante que los apoya y los ayuda a crecer y mejorar.

Prototype vs jQuery

De todos estos frameworks, sin duda hay 2 que están por encima de los demás, almenos a lo que a popularidad se refiere, y son el jQuery y el Prototype. En este artículo me voy a ahorrar la explicación de los pros y contras de cada uno, o cual es el mejor de los 2, porque este debate ya se abrió hace mucho en Internet, hay mucha información allí fuera.

Me voy a limitar a mí propia experiencia. Y yo me quedo con Prototype. Con esto estoy llendo en contracorriente porque parece que en la actualidad, jQuery le está ganando terreno a Prototype en cuanto a popularidad. Pero la gente creo que se equivoca cuando Read the rest of this entry »

Rainbow for Firebug: Dale color a tu firebug

En la actualidad, un Front-End developer tiene un compañero inseparable en sus largas horas delante del ordenador: El firebug. Si no te suena este nombre y te consideras Front-End, entonces deberías correr a descargártelo! Me lo agradecerás.

Firebug es un componente o plug-in de Firefox que ofrece interesantes herramientas para desarrollar la parte frontal de una web (css, html, js). La gran ventaja que ofrece es la de poder analizar en tiempo real cualquier elemento de la página, e incluso modificarlo y ver el cambio al momento.

Herramienta indispensable para un Front-End, sin lugar a dudas.

Nuevo componente para completar el Firebug: Rainbow

Colorea el código del javascript facilitando su análisis

Hoy encontré un plug-in nuevo que se llama “Rainbow para Firebug”, y que mejora aún más el firebug en el sentido de que cuando consultas un script desde el entorno de firebug, colorea el código facilitando MUCHISIMO el análisis del código. Un detalle que parece poco, pero en realidad es mucho.

Descárgate el plug-in “Rainbow for Firebug 1.3″ ahora

Observación: No es una versión estable sino que está en experimental, pero yo lo he probado y por ahora ningún problema.

Problema de transparencia PNG en internet explorer 6 (IE6)

Un desarrollador Front-End tarde o temprano acaba enfrentánose a uno de los múltiples problemas que tiene IE6, y en este caso se trata de las transparencias en las imágenes PNG. Lo normal es recurrir a la alternativa de las imágenes GIF, pero en ocasiones, la calidad no acaba de alcanzar la misma que un PNG. Por suerte, en la actualidad existen distintas librerías que solucionan esta incompatibilidad y nos hacen la vida un poco más fáciles.

Cito algunas de las librerías que he utilizado personalmente y que corrigen la incompatibilidad de Internet Explorer 6 (IE6). Todos ellos son válidos y funcionan a la perfección, por tanto elegir un script es más una elección por gusto que por otra cosa:

PNG fix

Correcto script que habilita las transparencias de PNG en IE6.

http://homepage.ntlworld.com/bobosola/

Unit PNG fix

Otro script que soluciona el problema, esta vez todo en menos de 1kb!
http://labs.unitinteractive.com/unitpngfix.php

SuperSleight

Esta vez un script salido de uno de los sitios web de referencia para todo Front-End o diseñador web.

http://24ways.org/2007/supersleight-transparent-png-in-ie6

IE7-js

Alojado en code.google.com, un script completo que además de corregir el problema de la transparencia, corrige otros problemas con IE6 y versiones anteriores.

http://code.google.com/p/ie7-js/

He probado todas estas librerías y todos hacen más o menos lo mismo:

Le aplica un “filter”  a la imagen (progid:DXImageTransform.Microsoft.AlphaImageLoader(...)). Es un filtro que solo admite IE6 y lo que hace es habilitar las transparencias de la propia imagen.

Cada librería lo aplica a su manera, y su aplicación también varía ligeramente. En mi trabajo actual empecé usando Unit PNG fix pero he acabado usando IE7-js ya que me interesaba el resto del paquete.

Botones con imagen y con efecto rollover

Nivel: medio

Para la creación de botones en un proyecto web, lo normal es recomendar la creación de botones con texto generado (mejor mantenimiento, mejor SEO) y que sean flexibles (mejor mantenimiento, accesible).  Pero cada proyecto es un mundo y puede ser que en alguno nos veamos forzados a optar por la utilización de imágenes como botones.

Evidentemente, como en casi todo, existen diferentes soluciones a esto. Yo voy a exponer una solución que he aplicado en persona.

Breve intro a la etiqueta HTML: button

Una etiqueta HTML que me gusta mucho es el <button>. Es una etiqueta que lleva mucho tiempo entre nosotros (desde HTML 4.01) pero que hasta hace relativamente poco no lo he empezado a usar en serio en mis proyectos. Antes lo que siempre usaba para los botones de formularios era el típico input:

// antigua forma: input tradicional
<input type="button" value="Enviar" />
// nueva forma: button
<button type="button">Enviar</button>

Ambas formas son equivalentes y correctas, pero la ventaja del button es que es más manejable mediante CSS y permite jugar más con ella. La desventaja que tiene es que no es 100% compatible ya que solo está disponible a partir de HTML 4.01. De todas formas, hoy en día más del 95% de usuarios utiliza navegadores que soportar HTML 4.01 o superior por lo que recomiendo el uso de esta etiqueta.

La imagen y el botón

Lo primero que se me ocurriría hacer es:

<input src="RUTA_IMG" type="image" />
// o con button, que me gusta mas 
<button><img src="RUTA_IMG" alt="" /></button>

Pero como tenemos que aplicar un efecto rollover en el botón, el método más optimizado es usando el CSS y tratar la imagen como imagen de fondo en el botón. Haciendo esto no necesitaremos tirar de javascript, solo necesitaremos el CSS. Por lo tanto prepararemos algo parecido a esto:

Read the rest of this entry »