PDF de programación - atix19

Dirección y Coordinación General
Esteban Saavedra López ([email protected])

Diseño y Maquetación 
Jenny Saavedra López ([email protected])
Esteban Saavedra López ([email protected])

Revisiones
Esteban Saavedra López
Jenny Saavedra López

Noticias
Jenny Saavedra López
Lucy Ayarde Romero

Autores Frecuentes
Esteban Saavedra López
Joseph Sandoval
Mario Carrion

Martín Márquez
Renzo Martínez
Rafael Rendón

Herramientas
La edición de esta revista fue realizada de forma integra haciendo uso de Software
Libre



Muchas veces nos encontramos inmersos en varios proyectos en nuestra vida, de
seguro a cada uno de ellos le destinamos parte de nuestro tiempo y dedicación,
pero también de seguro el tiempo no nos alcanza para poder manejar de la forma
correcta a todos ellos, como quien dice “Quien mucho abarca poco aprieta”; uno de
los mejores ejemplos de esto son las personas que se dedican a su familia, su
profesión, su trabajo y al voluntariado en promover y difundir el software y
tecnologías libres. Pero también se dice que “No hay mejor pago que la satisfacción
de haberlo logrado”.

Todo sacrificio que podamos hacer todas aquellas personas que dedicamos parte de
nuestro tiempo a esta gran cruzada, seguro tendrá su recompensa, sobre todo la
satisfacción de haber aportado o haber sido parte de este gran movimiento que
revoluciona el mundo y el conocimiento referente a las tecnologías libres.

La libertad es para todos, un título con el que deseamos expresar que la Libertad
no es para unos pocos sino para todos sin ningún tipo de discriminación; más aún
cuando hablamos de la libertad de acceder al conocimiento, que es fundamental
para el desarrollo personal, empresarial y el desarrollo de nuestras naciones.

Con este segundo número del 2011, queremos dar continuidad a nuestro trabajo
desde que iniciamos con el proyecto de la revista.

La Libertad es para todos

Bienvenidos a nuestro décimo noveno número

Esteban Saavedra López
Presidente Fundación AtixLibre

SELECT
características, beneficios
FROM HTML5

El uso de HTML5 implica páginas web mucho más ricas, completas, interactivas e
interesantes.

completas,



El uso de HTML5 implica páginas web mucho
más ricas,
interactivas e
interesantes. La acogida de esta tecnología
es tan grande, que existen sitios web de
compañías muy reconocidas que enseñan
ejemplos,
todo
tipo de
información. Algunas de éstas son:

recursos y

✔

✔

✔

http://www.html5rocks.com/: sitio
de Google con muchos tutoriales e
información.
http://www.apple.com/html5/:
sitio de Apple con gran cantidad de
ejemplos.
http://ie.microsoft.com/testdri
ve/: sitio de Microsoft con diferentes
ejemplos para Internet Explorer 9.

El gusto por HTML 5
Tal es el entusiasmo que está produciendo
HTML5 que, la World Wide Web Consortium
(W3C) ha presentado el logotipo oficial que
se utilizará en aquellas páginas web que
deseen informar a los visitantes de las
tecnologías implementadas en su desarrollo
(http://www.w3.org/html/logo/). En la
Figura 1, se puede apreciar el logo de HTML
5 en una disposición horizontal mostrando
que tecnologías están siendo empleadas. Así
según el orden se puede dar a conocer:
conectividad, estilos con CSS3, acceso a los
dispositivos, efectos y 3D, multimedia,
rendimiento e integración, semánticas,
almacenamiento y aplicaciones sin conexión.

Introducción
Las empresas dominantes en tecnología
dentro la web aspiran a que HTML5, CSS3 y
Javascript sean predominantes en el
desarrollo de sitios web. Este interés surge a
raíz de que, frente a otras tecnologías como
Flash o Silverlight, es código abierto y por
tanto accesible para todos, constituyéndose
una evolución lógica del modelo actual.

Figura 1: Logo de HTML 5



están

¿Quiénes
construyendo HTML 5?
Las organizaciones que están encargadas
del desarrollo de la estructura de versión 5
del lenguaje de etiquetas HTML son:

✔ Web Hypertext Application Technology

Working Group (WHATWG).

✔ World Wide Web Consortium (W3C).

✔

Internet Engineering Task Force
(IETF).

Dichas organizaciones están logrando con
HTML5, proveer una nueva visión en el
desarrollo de aplicaciones web, proveyendo:

✔ Compatibilidad con las versiones

anteriores de HTML.



✔ Acceso universal a las aplicaciones
(accesibilidad), expresado en el
soporte para usuarios con alguna
discapacidad,
independencia del
medio funcionando en los diferentes
dispositivos y plataformas como sea
posible y el soporte para anotaciones
de diferentes
lenguajes de
programación como por ejemplo la
etiqueta <ruby>.

✔ No es estricto como XHTML.
✔ Simplifica la complejidad innecesaria.

Características de HTML 5
Entre las características que han hecho
posible la popularización de HTML5, se
puede mencionar:

✔ Web sockets: posibilitan la creación
de un canal de comunicación
bidireccional entre el cliente y el
servidor, solucionando los problemas

con los que tropieza Ajax, logrando de
esa manera ahorrar ancho de banda.
✔ Canvas: es un rectángulo en la
página web donde se puede dibujar
cualquier cosa con la ayuda de
javascript. HTML5 define un conjunto
de funciones, denominado API de
canvas, para dibujar formas, crear
gradientes y aplicar transformaciones.
este elemento permite
incrustar videos en una página;
anteriormente esto solo era posible
con el uso de plugins de terceros
como Apple QuickTime o Adobe
Flash; además que se encuentra
diseñado para ser usable sin ningún
script de detección.

✔ Video:

✔ Almacenamiento local: es una
manera para que los sitios web
almacenen
información en una
computadora y puedan recuperarlo
posteriormente. El concepto es similar
a los cookies, pero está diseñado
para almacenar gran cantidad de
información.

✔ Web workers: permiten ejecutar
scripts en paralelo (background). Para
su uso se instancia un worker que
estará en un fichero javascript y se
indica qué debe hacer cuando se
reciba un mensaje. Estas operaciones
pueden ser cálculos matemáticos
complejos, solicitudes a la red, o
acceso al almacenamiento local;
resulta de gran utilidad en
aplicaciones web que dependen de
scripts pesados para ejecutar alguna
funcionalidad.

✔ Aplicaciones offline: leer páginas
web estáticas desconectadas de
internet es un proceso sencillo, solo
hay que conectarse a internet,
recargar la página, desconectar de
internet, y leer el contenido. Pero que
sucede con aplicaciones como Gmail
o Google Docs. Con la ayuda de
HTML5 se puede construir
aplicaciones de este tipo que trabajen
de forma desconectada.

✔ Geo-localización:

se

trata de

imaginar en que parte del mundo se
encuentra una persona
y
opcionalmente
esa
información con los demás. Gracias a
HTML5 esta información es aun más
precisa.

compartir

Formularios 2.0
Con HTML 5 se tienen nuevos elementos
para el manejo de formularios:

✔ Placeholdertext: son marcadores de
posición que básicamente funcionan
de la siguiente manera:
✔ Cuando un campo de formulario
no tiene valor, inserta algún texto
en él.

✔ Cuando un usuario coloca el foco
en el campo, el texto desaparece.
✔ Si el usuario deja el campo y éste
aún no tiene ningún valor, el
placeholder vuelve a aparecer.

✔ Autoenfoque: se trata de enfocar el
primer elemento
de un
formulario en forma automática, sin
hacer uso de javascript.

input

✔ Nuevos elementos: HTML5 ofrece
elementos que permiten identificar
ciertos sectores dentro de una página
sin ambigüedad:
✔ <header>: Contiene elementos
que ayudan en la identificación del
sitio como son el titulo y el
logotipo.

✔ <nav>: Sección de un documento
que contiene enlaces a otras
páginas o secciones de la misma
página.

✔ <section>:

Representa una
sección genérica del documento o
aplicación, actúa de la misma
manera que un elemento
<div>para separar secciones de
documento.

✔ <article>: Representa una porción
de página destinado a artículos, e
independiente de código.

✔ <aside>: Contenido relacionado al
área principal de una página como
es el caso de posts y nubes de
etiquetas.
✔ <footer>:

que
usualmente contiene información
acerca del autor, enlaces a
contenidos
relacionados y
derechos de autoría.

Elemento



✔ WAI-ARIA: Tomando en cuenta las
recomendaciones de accesibilidad, se
puede dar soporte a los usuarios que
tienen alguna discapacidad. HTML5
trabaja enmarcado en
las
recomendaciones de la WAI-ARIA
(Web Accessibility
Initiative –
Accessible Rich Internet Applications).
Los roles de WAI-ARIA, que son
soportados por lectores de pantallas,
pueden ser adicionados a los
elementos de HTML5.

✔ Experimentando con HTML5: Si se
tiene un navegador que aún no
soporta las características de HTML5
y aun así se tiene la necesidad de
experimentar con los elementos
innovadores, se puede hacer uso de
algunas librerías JavaScript que dan
la posibilidad de dar soporte a los
browsers.

Aunque algunos manifestarán que las nuevas
características que trae HTML5 ya fueron
vistas anteriormente en sus navegadores y
que trabaj