Modificar los atributos data de HTML5 con jQuery

Si en una entrada anterior vimos cómo leer los atributos data de HTML5 con jQuery hoy vamos a ver el otro caso: modificar dichos atributos.

El ejemplo va a ser el mismo que en el anterior artículo:

<div id='fruta' data-fruta='fresa'></div>

Ok, tenemos un div con el id fruta, el atributo data-fruta y en principio el valor fresa. ¿Cómo lo modifico haciendo uso de jQuery? Pues de nuevo con el método data(), pero en este caso pasándole dos parámetros en lugar de uno:

$("#fruta").data("fruta","pera");
window.alert($("#fruta").data("fruta"));

Si el método data() recibe solo el nombre del atributo al que queremos acceder nos lo devuelve, pero si recibe como segundo atributo una cadena entonces modifica el valor del atributo asignándole el de ese segundo parámetro que le pasamos.

Y voy a repetir exactamente el mismo párrafo que en el artículo anterior sobre la nomenclatura (para que no tengas que abrirlo): Fíjate que cuando le paso el nombre del atributo lo hago quitándole el prefijo data-. Y hay otra peculiaridad: si el nombre tiene varios guiones entonces estos desaparecen y escribimos el atributo siguiendo la convención camelCase.

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
$("#fruta").data("frutaOferta","fresa");
window.alert($("#fruta").data("frutaOferta"));
</script>

Acceder a los atributos data de HTML5 desde javascript

Si eres lector habitual de este blog recordarás que no hace mucho vimos cómo hacer esto con jQuery. Vamos ahora a ver cómo hacerlo con javascript a pelo, sin tirar de esas librerías. Repitamos los mismos ejemplos pero sólo con javascript:

<div id='fruta' data-fruta='fresa'></div>

En el div con Idfruta” vamos a guardar un dato: que es una fresa (mismo ejemplo que en artículo anterior). ¿Cómo accedo a este valor usando javascript?

//opción A. A lo bruto
//funciona, pero no es elegante
window.alert(document.getElementById("fruta").getAttribute('data-fruta'));
//opción B. La buena
window.alert(document.getElementById("fruta").dataset.fruta);

Ahí tienes dos ejemplos en los que hacemos un alert() de los datos guardados en el atributo data. El primero, usando getAttribute(), en teoría es la opción “bruta” ya que en principio debería accederse a estos datos como en el segundo ejemplo, que se supone que sería el método correcto. El problema es que el acceso a dataset no está bien implementado en todos los navegadores, así que la opción de usar getAttribute() hoy por hoy, aunque no sea la correcta en la teoría, es la funcional.

¿Y cómo queda el tema de los guiones que habíamos visto en el ejemplo en jQuery? Bueno. Si usamos getAttribute() ponemos el nombre del atributo tal cual, si usamos dataset hacemos como en jQuery y quitamos los guiones (y el prefijo data) usando también notación camelCase:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
//con getAttribtue
window.alert(document.getElementById("fruta").getAttribute("data-fruta-oferta"));
//mediante dataset
window.alert(document.getElementById("fruta").dataset.frutaOferta);
</script>

Acceder a los atributos data de HTML5 desde jQuery

En el pasado alguna vez utilizamos los atributos rel o class para incluir valores extra que usar luego en javascript. No era una buena práctica, pero a veces era la solución más práctica. HTML5 acabó con esto introduciendo los atributos data, que nos permiten vincular información extra a un elemento del DOM. Veamos un ejemplo:

<div id='fruta' data-fruta='fresa'></div>

En el div con Id “fruta” vamos a guardar un dato: que es una fresa (ok, ya se que el ejemplo no parece tener mucho sentido práctico). ¿Cómo accedo a este valor desde jQuery? Pues con el método data() puedo tanto definirlo como obtenerlo, pasándole como parámetro el nombre del dato.

window.alert($("#fruta").data("fruta"));

El ejemplo de arriba haría un alert mostrándonos el valor. Fíjate que cuando le paso el nombre del atributo lo hago quitándole el prefijo data-. Y hay otra peculiaridad: si el nombre tiene varios guiones entonces estos desaparecen y escribimos el atributo siguiendo la convención camelCase. Un ejemplo:

<div id='fruta' data-fruta-oferta='pera'></div>
<script type="javascript">
window.alert($("#fruta").data("frutaOferta"));
</script>

En próximas entradas veremos cómo escribir los atributos y cómo acceder a ellos desde Javascript sin usar jQuery.

Subida múltiple de archivos con HTML5 y PHP

Llevaba tiempo sin tocar el PHP, sumergido en el lado del mal (aka ASP y otras cosas de Microsoft), pero el otro día tuve que retomarlo. El PHP es como ese amigo de toda la vida que por vicisitudes laborales ahora sólo puedes ver una vez cada varios meses, pero con el que te sientas en la barra de un bar y parece que todavía os visteis ayer.

El caso es que tenía que modificar un formulario para que permitiera implementar una subida de múltiples archivos. ¿Cómo va esto? Bueno, vamos con el marcado HTML:

<form action="index.php" method="post" enctype="multipart/form-data">
  <input name="upload[]" type="file" multiple="multiple" />
</form>

Puntos importantes: el enctype=”multipart/form-data” en la etiqueta form para que este envíe correctamente los archivos que subimos, el definir el nombre del input como un array poniendo los corchetes [] y la etiqueta multiple=”multiple” que nos permitirá seleccionar varios items a las vez.

Vamos ahora con el PHP con explicación línea a línea:


// RECORREMOS LOS FICHEROS
for($i=0; $i<count($_FILES['upload']['name']); $i++) {
  //Obtenemos la ruta temporal del fichero
  $fichTemporal = $_FILES['upload']['tmp_name'][$i];

  //Si tenemos fichero procedemos
  if ($fichTemporal != ""){
    //Definimos una ruta definitiva para guardarlo
    $destino = "./nuestraCarpeta/" . $_FILES['upload']['name'][$i];

    //Movemos a la ruta final
    if(move_uploaded_file($fichTemporal, $destino)) {
       //imprimimos el nombre del archivo subido
       printf("Se ha subido el fichero %s.",$_FILES['upload']['name'][$i]);
    }
  }
}

HTML5: Lograr que un campo number acepte decimales

Una de las características de HTML5 era que permitía definir campos de tipos variados que ampliaban las opciones respecto al tradicional tipo text del HTML clásico.  Estos campos, además tienen la capacidad de autovalidarse.

Estos nuevos campos, por otra parte, requieren conocer todas sus opciones para exprimirlos a tope. Por ejemplo, si declaras un campo como el siguiente:

<input type="number" name="numero" />

En este caso te encontrarás con que si pones un número decimal la validación del navegador te dirá que está incorrecto. Pero tú sabes que no lo está ¿por qué pasa esto? Bueno, puedes arreglarlo de una forma muy simple: con el atributo step.

La mayoría de los navegadores mostrarán dos flechas en los campos de tipo number, para aumentar y decrecentar su valor. En step podemos definir cuánto queremos que este valor suba o baje en cada click. Por ejemplo:

<input type="number" step="5" name="numero" />

De esa form el valor irá cambiando de 5 en 5.

Pero esto de momento no nos soluciona el problema ¿cómo logramos que trague un decimal? Pues definiendo en step que el valor sea decimal.Si ponemos el valor de step como “0.01” nos permitirá meter decimales con dos cifras. Entonces si ponemos nuestro campo:

<input type="number" step="0.01" name="numero" />

Así tenemos un campo que admite dos cifras decimales, que suele ser lo más habitual. Si queremos más precisión entonces metemos más decimales en el step. Otra opción es añadir directamente el valor any a step. De esta forma permitirá meter tantos decimales como queramos.

<input type="number" step="any" name="numero" />

Hacer un triángulo con CSS3

¿Cómo puedo insertar la imagen de un triángulo en mi web sin usar imágenes? ¿Es posible hacerlo sólo con CSS3? En el pasado vimos como hacer un exágono o un octógono, y el triángulo es todavía más fácil:

Vamos a crear cuatro divs, cada uno de ellos para un triángulo en una dirección. Este sería el marcado HTML:

<div id="triangulo"></div>
<br/>
<div id="trianguloinvertido"></div>
<br/>
<div id="trianguloizquierda"></div>
<br />
<div id="trianguloderecha"></div>

Y ahora veamos el CSS:

#trianguloizquierda{
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-right:50px solid black;
	}

#trianguloderecha {
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-left: 50px solid black;
	}

#triangulo {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 50px solid black;
	}

#trianguloinvertido {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 50px solid black;
	}

En este jsfiddle le puedes echar un ojo al resultado.

Con este simple truco de CSS podrás crear botones en forma de flecha o triángulo que darán una mejor imagen a tu proyecto,pudiendo jugar con los tamaños y los colores para adaptarlos mejor a tu maquetación.

Windows 93 Online

Si, has leído bien, Windows 93. ¿Se trata esto de una broma? Pues obviamente , pero oye, con un trabajo detrás curioso e interesante. En un arranque de nostalgia de los tiempos de Windows 95, los desarrolladors Jankenpopp y Zombectro (este último debe ser blackmetalero, viendo su página personal) se han currado el sitio web de Windows 93, donde podrás trastear con esta invención suya desarrollada en HTML5 y Javascript. (hay que reconocer que les ha debido robar mucho tiempo este proyectillo)

En esta divertida réplica bastarda de Windows han añadido un buen montón de software inútil (como aquel que nos regalaban en tantas recopilaciones de freeware), una versión HTML5 de Wofenstein 3D, al menos dos virus (hydra y totally not a virus, claramente no puede ser un Windows si no tiene virus de serie), un archivo corrompido, un navegadador/buscador web, un vídeo de Star Wars en código ASCII o un defragmentador de disco… que sólo te diré que tienes que probar.

En resumen, una verdadera frikada cuya utilidad es nula pero muy divertida. Si conociste Windows 95 te hará gracia y te arrancará una sonrisilla durante unos minutos. Además, al contrario que el Windows original, con este basta con refrescar el navegador para tener un reinicio limpio y seguro.

El uso de la etiqueta meta viewport

En el mundo de la web móvil la etiqueta meta viewport se ha convertido en un elemento esencial, básico en los últimos tiempos. Inicialmente introducida por Apple en su navegador Safari para iPhone, rápidamente fue adoptada por otros navegadores hasta hacerse habitual en todos los OS móviles. Esta etiqueta busca dar una serie de directrices a los navegadores para que rendericen adecuadamente la web.

Hay que ponerse un poco en situación: cuando aparecieron los primeros smartphones no había webs adaptadas para dispositivos móviles, y pasó tiempo hasta que las hubo (a día de hoy todavía hay muchas páginas que no se visualizan correctamente). ¿Solución? Que el teléfono “emule” una pantalla más grande y la web original se redimensione a ese tamaño. La idea es buena ¿El problema? Bueno, que era una solución temporal para aquel momento, pero que en la actualidad se queda coja. Este sistema que nos muestra una pantalla reducida hace que si hemos hecho una maquetación responsiva con media queries la cosa no acabe de funcionar. Para eso está meta viewport, para establecer el ancho, el alto o el zoom de la página.

La meta viewport utiliza una serie de pares de claves=valores para definir diversos comportamientos del navegador a la hora de renderizar la web:

<meta name="viewport" content="
	width = [tamaño en pixels | device-width ],
	height = [tamaño en pixels | device-height],
	initial-scale = float mayor que 0.1,
	minimum-scale = float mayor que 0.1,
	maximum-scale = float mayor que 0.1,
	user-scalable = [yes | no]
">

<!--Un ejemplillo real tras la teoría-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Muy bien ¿y para qué vale cada una?:

Bueno, width lógicamente para definir el ancho de la pantalla. Podéis definir un ancho fijo, lo cual en términos generales viene a ser un epic fail. En cambio si usáis device-width esta ya se adaptará directamente al dispositivo.

Sobre heigth lo mismo, sólo que en este caso se define el alto. En la práctica no se me ocurre quién querría definir un alto estático, pero existir existe.

Para regular qué zoom tendrá por defecto la página está initial-scale, a la cual le tienes que dar un valor a partir de 0.1, siendo el valor 1 el equivalente a no tener zoom (es decir, menos de uno reduce y más de 1 amplía).

La pareja maximum-scale y minimum-scale nos permiten definir cual será el zoom máximo y el mínimo que pueda aplicar el usuario. Como arriba, 1 es igual a que se vea tal cual, sin zoom.

Finalmente user-scalable lo que nos permite es definir si queremos que el usario pueda hacer zoom o no. Lo mejor es dejarlo en yes, ya que no es buena idea poner limitaciones al user, y mucho menos en el caso del zoom, ya que podría tratarse de alguien con problemas de visión que necesite ampliar la página para poder leerla. Con el maximum y el minimum scale tres cuartos de lo mismo, piensa bien qué hace si vas a poner límites.

En fin, con esto ya tienes otro paso para mejorar tus diseños web adaptados a dispositivos móviles.

Bluegriffon, editor HTML5 WYSIWYG

En los comentarios del artículo sobre BlueFish ya se habló de este editor de HTML WYSIWYG, considerado por muchos como la evolución natural del Kompozer.

Basado en el motor de renderizado Gecko de Mozilla (es decir, lo que hagas con BlueGriffon se te verá en el Firefox tal cual), BlueGriffon incorpora una serie de herramientas muy interesantes para trabajar tanto con CSS3 (donde podrás editar estilos gráficamente) como con HTML5, dando por ejemplo una comodidad pasmosa a la hora de trabajar con vídeo, además de incorporar las típicas herramientas para realizar rápidamente formularios o tablas. Una de sus características más productivas es su ventana para navegar por el DOM.

Logotipo BlueGriffon
El grifo azul

Incluye además el popular editor de gráficos vectoriales SVG Edit, incluso añadiéndote las pertinentes líneas de Javascript para poder usarlo con HTML 4.

Pero no todo es WYSIWYG, el programador más experimentado podrá ir a la vista de código para trabajar a un nivel más detallado y ahorrarse “código basura” que suelen meter estos editores.

En la web oficial del proyecto podéis además encontrar multitud de Add-ons que permiten agregar interesantes funcionalidades al programa, como un cliente FTP, un manual de ayuda, un emulador de dispositivos móviles, un editor avanzado de css, un editor de fórmulas matemáticas, un administrador de Toolkits… en fin, que es altamente extensible.

Como punto negro sólo diré que no he logrado que PhoneGAP se integre tan bien como lo hacía el Dreamweaver o Eclipse (ya sabéis que soy anti Adobe, pero he de reconocer que la integración jQueryMobile/PhoneGAP/Dreamweaver 5.5 era excepcional), pero en general obtiene un aprobado alto. Además, ha aparecido bajo múltiples licencias libres (GPL, Mozilla), lo cual siempre aporta tranquilidad y fiabilidad al proyecto.

Análisis de eMobc Lander, servicio para crear webs móviles con html5

Creo que alguna vez en el pasado hablé del framework libre para desarrollo móvil eMobc. Basado en plantillas, cuya estructura y contenido se definen a través de un xml, nos permite crear de forma sencilla y sin conocimientos de programación apps móbiles en HTML5 o nativas para Android e iOS.

Ahora ofrecen un nuevo servicio, eMobc Lander. Este nos permite crear apps móviles en HTML5 y alojarlas en su nube.

El sistema de creación es sencillísimo, en serio, tanto como hacerse un blog en WordPress o Blogger. Tras registrarte llegas a un panel donde puedes crear varias páginas, con cuatro pasos definidos:

  1. Configuration: A su vez tiene cuatro secciones. En Social Media podéis incluir enlaces a redes sociales, en Templates elegir una plantilla, en SEO añadir título, descripción, palabras clave, autor… y en Domain elegís el dominio de vuestra app.
  2. Content: Aquí está la chicha, desde este paso metéis contenido a vuestra app. Puede ser de todo tipo: audio, video, fotos, html local, una web, una fuente rss… incluso tiene un chat.
  3. Appearance: Elige tu icono, el logo, fotos, colores de fuentes, fondos, menús… en fin, desde aquí puedes meterle mano a la maquetación para modificar tu plantilla.
  4. Statistics: Este paso ya no forma parte de redacción, simplemente es un módulo con estadísticas donde podremos ver el número de visitas, qué pantallas han visto y cuántas conversiones hemos obtenido.

En fin, hasta aquí la parte buena: es muy fácil de usar y logra resultados muy atractivos en poco tiempo, es muy productivo. En cosa de media hora hice esto esta mañana.

Claro está, tenía que haber puntos negros como en cualquier servicio: el primero es que al trabajar con plantillas se pierde flexibilidad respecto a un desarrollo puro y duro, cosa que era de esperar. El segundo… que el servicio gratuito está limitado a 1000 visitas al mes. Pagando 19 euros al mes podrás conseguir aumentar el límite hasta las 5000 visitas mensuales y además podrás usar tu propio dominio. Y finalmente hay un plan de 39 euros mensuales que te permite visitas ilimitadas, eliminar el branding de eMobc e insertar publicidad para monetizar tu aplicación.

Llegados a este punto debes analizar si te interesa pagar un plan, si vas a superar o no el número de visitas y si te será más rentable pagar el precio de uno de sus planes o, por contra, encargar un app a una empresa. Todo depende del uso que quieras dar a tu aplicación web. En todo caso se trata de una herramienta cómoda que no está de más probar y que para ciertas cosas es muy válida.