Nuevas capacidades de Javascript con Html5

Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha
recibido muchas habilidades nuevas. Esta es una lista de las más importantes.
Web Storage
Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única
forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al
mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor.
Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que
subir los KB que pesan todas las cookies que le hemos dado.
Las cookies apestan.
Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con
soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier
tipo de datos cabe en un Storage.

 

Web SQL

Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer
9 declaró que no implementará Web SQL1 y la realidad es que Web Storage es más que suficiente
para la mayoría de usos. Así que nada, esto por ahora no sirve.

 

Web Workers
¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que
Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso.
Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas
complejas más veloces gracias al multithreading.

 

Web Sockets
Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo
real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible
usar implementaciones multiuser en Javascript como PubSubHubBub1.
Arrastrar y soltar

Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que
es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5.
Puedes traer trozos de datos o archivos enteros.
Geolocalización

Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la
latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona
en cualquier PC, no sólo en teléfonos
Más adelante un capítulo dedicado a la geolocalización en la guía.

¿Por qué es importante HTML5?

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters
y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos
que están reiventando mercados y generando tráfico e ingresos.
Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en
el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento
y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de superheroe
y que venden camisetas para apoyar al movimiento?

 

Nuevas etiquetas de HTML5

<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.

Atención <div> no está muerto:

 

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

 

Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Soporte HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener.
Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio
de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el
objeto XmlHttpRequest, más conocido como AJAX.

Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador
responsable de detener la innovación en los estándares web también es el creador de la innovación
más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían
sido inviables.

 

 

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de
que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE.
Gracias a los grandes hackers del mundo:

  • HTML5 Enabling Script1: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran
    divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible
    agregarles diseño a ellas o cualquier elemento dentro de ellas.
    Para utilizarlo debes incluir esta línea en el HEAD de tu documento.

  • IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes
    redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!
  • Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para
    multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o
    alternativa.

Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores
felices.

No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y
vivan el feliz mundo de HTML5.

Phonegap

Contenidos

La tecnología PhoneGap o Apache Cordova permite compilar un código Web (HTML, CSS, JavaScript etc.) como si fuera una aplicación nativa para móvil. Es decir, con un solo desarrollo web es posible obtener aplicaciones nativas para diferentes plataformas destino como Android, iOS, Windows Phone, etc.

Esta herramienta además nos da acceso a los sensores y características nativas de los dispositivos móviles, como por ejemplo el GPS, acelerómetros, brújula, cámara, etc.

La librería PhoneGap se gestiona de forma muy sencilla mediante línea de comandos, dispone además de un fichero centralizado de configuración de nuestra aplicación, y la posibilidad de instalar multitud de plugins para el acceso a sensores o la ampliación de funcionalidad.

Los contenidos principales del libro son:

Introducción
Instalación
Uso de la línea de comandos
Crear una aplicación
Gestión de plataformas (Android, iOS, etc.)
Actualización de PhoneGap
Compilar y probar/emular una aplicación
Ejemplo – Crear nuestra primera aplicación
Configuración de PhoneGap
Fichero de Configuración (iconos, splashscreens, etc.)
Personalizar plataformas mediante merges
Eventos
deviceready, pause, resume, etc.
Plugins
Gestión de plugins (añadir, buscar, listar, eliminar, etc.)
Uso de la API de PhoneGap (ejemplos).
Ejercicios

Descargar libro

GitHub Student Developer Pack

Cuando uno está estudiando, lo más normal es no tener demasiado poder adquisitivo. Eso hace que muchas herramientas de desarrollo sean demasiado caras para los jóvenes desarrolladores, aun en formación. GitHub también se ha dado cuenta cuenta y ha empezado a ofrecer lo que ellos llaman Student Developer Pack.

Este paquete es muy interesante, ya que nos da acceso a una serie de servicios que de otra manera nos costarían un buen puñado de dólares. Y no solo nos dan acceso a servicios de GitHub, porque como ellos mismos dicen:

Hemos creado GitHub Student Developer Pack, con algunos de nuestros partners y amigos para dar acceso a estudiantes, a las mejores herramientas de desarrollo, para que aprendan usándolas.

Estos son algunos de los servicios y herramientas que incluye el pack:

Logo Github Bb029af0fc13d87fbba75ffde44aee90

Cuenta Micro en GitHub. Precio habítual 7$ al mes. Con esta cuenta podemos obtener varias ventajas, como la de poder gestionar 5 repositorios privados. Los repositorios de GitHub nos permiten realizar el control de versiones de nuestro código fuente, y si queremos, de forma colaborativa.

Logo Dotme Cdfa9dd8e717c44209d8b41a548d0bdd 1

Registro de domino .me con namecheap. Normalmente con namecheap el dominio cuesta unos 8,99 $ al año. Los dominios .me se suelen usar como página personal de presentación. Podemos crear nuestra propia página para darnos a conocer al mundo (y a los recruiters).

Bitnami

Business plan en Bitnami. Podremos desplegar aplicaciones en la nube de forma sencilla y sin complicarnos la vida. Bitnami permite desplegar Liferay, WordPress, Drupal, Moodle y un largo etc. Y la lista sigue creciendo. Con esta oferta tendremos acceso durante un año. El servicio suele costar 49 $ al mes.

Logo Digitalocean Bd8453e85cea3c3eef68c422182e784d

Crédito de 100 $ en DigitalOcean. Hosting con discos duros SSD para alojar nuestras aplicaciones. Y con ese crédito en DigitalOcean podemos tener el hosting asegurado durante un año o quizá más (dependiendo del plan elegido). Los servidores corren sobre Linux (podremos elegir entre varias distribuciones), pero podemos desplegar Docker, Node.js, Ruby on Rails de forma sencilla.

Logo Orchestrate 24e36fc6f7a032e2602ca9f8ee94607b

Cuenta de desarrollador en Orchestrate, mientras seas estudiante. Con Orchestratepodremos gestionar nuestras bases de datos como servicio, haciendo llamadas a través de una API. Al mes cuesta unos 49 $.

Logo Unreal Bd14dbb8f8622b357b2f42ba5a69496a

Suscripción a Unreal Engine. Si te gusta desarrollar videojuegos, Unreal Engine es otro regalo. Nos da acceso a Unreal Editor, que nos sirve para desarrollar la UI, gestionar los niveles, animaciones, efectos visuales, física y muchos más aspectos de nuestro juego. La suscripción es válida mientras seas estudiante. Normalmente cuesta 19 $ al mes.

Para acceder a estos servicios (y a alguno más) debes ser estudiante y lógicamente poder demostrarlo. Basta por ejemplo con tener un correo de una Universidad que los chicos de GitHub puedan verificar. También es necesario tener cuenta en GitHub.

Si eres estudiante, no deberías dejar pasar la oportunidad.

Más Información | GitHub Student Developer Pack

fuente: http://www.genbetadev.com/

Fundamentos Jquery

Detalles del libro:

GLOBAL
CATEGORÍA
Año: 2011
Editor: Autoedición
Páginas: 112 páginas
Idioma: español
Desde: 13/10/2011
Tamaño: 359 KB
Licencia: Pendiente de revisión

Contenido:

jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web debería de conocer. El propósito de este libro es proveer un resumen de la biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje. El libro fue diseñado para ser utilizado como material en un salón de clases, pero también puede ser útil para estudiarlo de forma individual.

La modalidad de trabajo es la siguiente: En primer lugar se dedicará tiempo a comprender un concepto para luego realizar un ejercicio relacionado. Algunos de los ejercicios pueden llegar a ser triviales, mientras que otros no tanto. El objetivo es aprender a resolver de manera fácil lo que normalmente se resolvería con jQuery.

link: https://openlibra.com/es/book/download/fundamentos-de-jquery