martes, marzo 20, 2012

Tutorial de desarrollo web, Parte XXIV: Muestra de HTML5. Editores de páginas

Previously, on The CubeBlog...

Desde que comenzamos este tutorial he estado mencionando el HTML5 y el CSS3, pero realmente hasta la fecha no hemos visto nada que no existiera ya en las versiones anteriores de ambos lenguajes. Aunque durante todo el curso hasta la fecha he respetado los nuevos estándares impuestos para el HTML5 (que no se diferenciaban mucho de aquellos del HTML4 Strict, salvo por alguna que otra pequeña diferencia en alguna etiqueta en particular), lo cierto es que el HTML5 es una herramienta mucho más potente de la que habían sido sus predecesores, pero para poder explotar en su totalidad estas nuevas funcionalidades, antes debemos conocer otro lenguaje: JavaScript.
Una de los principales objetivos del W3C con esta actualización del lenguaje es hacer desaparecer de las páginas los molestos objetos Flash que todos hemos visto alguna vez. Aunque en HTML5 sigue existiendo la posibilidad de incluir en nuestras páginas programas realizados en Flash (mediante la etiqueta <object>, que ya existía en versiones anteriores), las aplicaciones Flash tienen muchos problemas de seguridad, dan muchos errores y consumen mucha memoria, por lo que muchos programadores prefieren evitarlas. Y gracias al HTML5 esto poco a poco va siendo más posible.
Uno de los ejemplos para los que hasta ahora se usaba la tecnología Flash era para insertar vídeos en nuestras páginas. Hasta el momento, para tener un vídeo en nuestra página, en primer lugar debíamos haber programado un reproductor en Flash y luego incluirlo en nuestra página, indicándole de alguna manera la dirección donde se encontraba el vídeo a reproducir (si es que no era este ya parte de la propia aplicación Flash). Ahora, HTML5 nos ofrece la posibilidad de incluir un vídeo en nuestra página de una manera casi tan simple como la que usamos para incluir imágenes. Un ejemplo sería:

<video width="500" height="300" controls="controls">
<source src="./video.mp4" type="video/mp4" />
</video>

Supongo que, a estas alturas, el funcionamiento de este código es bastante fácil de deducir, ¿no?
Del mismo modo que podemos incluir vídeos, HTML5 nos permite introducir audio, de una manera bastante parecida:

<audio controls="controls">
<source src="./cancion.mp3" type="audio/mp3" />
</audio>

Otro código bastante simple, en mi opinión.
Pero, como digo, la mayoría de las características más interesantes del HTML5 vienen todas de la mano de lenguaje JavaScript, sobre todo su etiqueta más popular, la conocida como <canvas>. Por eso no será hasta que, como mínimo, hayamos estudiado JavaScript que empezaremos a ver estas características.
Tal como les digo, CSS también ha sufrido una actualización bastante importante con el CSS3, y aunque probablemente entre lo que hemos ido aprendiendo hasta ahora se hayan colado cosas de esta nueva versión, por lo general hasta ahora sólo hemos visto instrucciones de CSS1 y CSS2. Pero en CSS3 podremos tener instrucciones como el popular border-radius, cuyo uso (y resultado) sería:

p
{
border-radius: 100px;
border: 1px solid;
}

 Este párrafo tiene un borde con las esquinas redondeadas.

Bonito, ¿eh?
Algunas otras posibilidades de CSS3 serían:

p
{
box-shadow: 10px black;
border: 1px solid;
}


Este párrafo tiene sombra


p
{
transform: rotate(30deg);
}








Este párrafo está rotado 30º.
Y así un montón de posibilidades más que les mostraré en la guía de referencia.
Otra cosa de la que quería hablaros hoy es de los editores de páginas. Existen muchos tipos, aunque sin duda los más conocidos son el desaparecido Microsoft FrontPage (ahora sustitudo por el mucho mejor Microsoft Expression Web) o el Adobe Dreamweaver, aunque estos programas tienen licencia propietaria (lo cual significa que son de pago), y si uno no se va a dedicar a esto, no le sale rentable la compra de unos programas así.
De todos modos, existen otros editores como el Amaya o el KompoZer que sí tienen licencia gratuita, aunque, personalmente, todos estos editores WYSIWYG (What You See Is What You Get, o sea, "lo que ves es lo que obtienes") me dan un tanto de repelús, sobre todo cuando me he encontrado con que alguno de ellos (en concreto el Dreamweaver) introduce caracteres con codificación Unicode que pueden llegar a dar problemas a la hora de introducir lenguajes de programación.
Personalmente, mi recomendación es que se descarguen el Komodo Edit, uno de los editores más potentes que he encontrado y que, aunque sólo permite edición a través de código (como hemos hecho hasta ahora), ofrece una gran cantidad de ayudas desde vistas previas hasta auto-completados que nos sugerirán etiquetas, atributos, valores, instrucciones CSS y mucho más al tiempo que las vamos escribiendo. Además, el Komodo ofrece soporte para una gran variedad de lenguajes informáticos (entre ellos, los nuevos lenguajes que iremos viendo a partir de ahora, aparte de los que conocemos ya) y, lo más importante de todo, ¡es gratuito! Y no, no me llevo ninguna comisión por cada descarga, sólo es que desde que un compañero me lo recomendó hace unas semanas, no he parado de alucinar con este programa.

Y, con esto, ahora sí, damos por finalizado el tutorial de HTML y CSS. Ya sabéis, a partir del martes que viene comenzará el tutorial de JavaScript, lo cual significará dejar un poco de lado la estructura (HTML) y el diseño (CSS) de la página para dedicarnos a la programación. ¡Hasta entonces, pues!

No hay comentarios: