HTML5 And Javascript Projects
Jeanine Meyer
- Editorial
- Apress
- Año
- 2011
- Páginas
- ~448
- Nivel
- Intermedio
De qué trata
Primera edición (Apress, 2011) del libro de proyectos de Jeanine Meyer, profesora del Purchase College de la Universidad Estatal de Nueva York, que continúa su obra The Essential Guide to HTML5. Está dirigido a quienes ya tienen conocimientos básicos de HTML5 y JavaScript y quieren pasar a aplicaciones de mayor envergadura. Se escribió cuando HTML5 todavía era una novedad en los navegadores, así que todo usa JavaScript "vanilla", sin frameworks.
Los diez capítulos son diez proyectos, y cada uno sigue el mismo patrón: requisitos, repaso de las funciones de HTML5, CSS y JavaScript implicadas, construcción paso a paso con el código explicado línea por línea, y pruebas y publicación. Los temas son el dibujo de trayectorias y texto en canvas con transformaciones de coordenadas, la entrada de tipo range, los objetos definidos por el programador y la exportación del canvas a imagen, la animación y el enmascarado de video HTML5, la API de Google Maps (eventos, cálculo de distancias y geocodificación inversa), la geolocalización, las expresiones regulares, la generación dinámica de marcado, los eventos de ratón y táctiles, y la persistencia de datos con localStorage o en el servidor con PHP y MySQL.
La práctica se reparte en proyectos visuales y variados. Su gran virtud es la explicación minuciosa del código, ideal para consolidar fundamentos. A cambio, el JavaScript es anterior a ES6 y algunas partes han envejecido: la API de Google Maps ha cambiado y ahora exige una clave, y el uso de PHP y MySQL es muy básico. Conviene leerlo como un libro de práctica de conceptos y no como una guía de buenas prácticas actuales.
- HTML5 Canvas
- JavaScript
- Video HTML5
- Google Maps API
- Geolocalización
- localStorage
- Eventos de ratón y táctiles
- Expresiones regulares
- PHP
- MySQL
- Juegos educativos
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Logo de HTML5
Dibuja el logo de HTML5 en un canvas con trayectorias y texto, y permite escalarlo con un control range y transformaciones de coordenadas.
Collage familiar
Aplicación en la que se arrastran sobre el canvas fotos y figuras definidas como objetos JavaScript, y el resultado se guarda como imagen.
Video que rebota
Animación de un video HTML5 que rebota por la ventana, dibujado en canvas o como elemento móvil, con reproducción en bucle y una máscara que se desplaza.
Map Maker y Map Portal
Dos aplicaciones que combinan la API de Google Maps con canvas: una marca ubicaciones y calcula distancias, y la otra usa el mapa como portal hacia videos, audios e imágenes, e incluye un cuestionario.
Where am I
Usa la geolocalización y la geocodificación inversa de Google Maps para mostrar la ubicación del usuario, y la envía por correo mediante un script en PHP.
Instrucciones de origami, rompecabezas de video y juego de estados de EE. UU.
Instrucciones de plegado con dibujos generados matemáticamente, fotos y videos; un rompecabezas que se arma con ratón o con gestos táctiles; y un juego con varias actividades sobre los estados de EE. UU.
Base de datos de un sitio web
Aplicación que almacena y consulta información en el servidor con PHP y MySQL.
