Playing with the open web

Resumen (Spanish)

HTML5 y otras tecnologías relacionadas están incrementando considerablemente las capacidades de los navegadores, extendiendo su uso a ámbitos retringidos hasta hace poco a aplicaciones nativas. Además, la inmensa cantidad de módulos libres dispnible permite construir muchísimas aplicaciones con muy poco código extra. En esta presentación se mostrará de forma práctica cómo, con unas pocas líneas de HTML, y a veces un poquito de JavaScript, se pueden realizar aplicaciones de realidad virtual y aumentada, de videoconferencia, de mapas… Tráete tu navegador preferido y podrás ver los resultados (y el código para construirlos, y punteros para seguir aprendiendo por tu cuenta). Y como no sólo de código vivimos las personas, también se explicará brevemente lo importante que es mantener la web abierta como un ecosistema sano y robusto, frente a las tendencias a limitar lo que puedes hacer con tus dispositivos. (Por cierto: si eres de los que dicen “el web” en lugar de “la web”, también puedes venir ;-) )

Playing with the camera

Browsers provide an API for accessing devices, such as the camera.

Building stuff:

• Camera demo (code).

Some links:

• ASCII camera (code)

• WebRTC Basics in HTML Rocks

Building maps

Browsers provide an API for location.

Building stuff:

• Yet another map (code).

• Click to coordinate (code).

• Finding my place in the world (code). Check this one with a mobile.

Some links:

• Leaflet.

Virtual reality

Browsers provide WebVR, based on WebGL.

Building stuff:

• Geometry (code).

• Robots in the fog (code).

Some links:

• AFrame

• AFrame Playground

Augmented reality

Building stuff:

• Something is moving near you (code). Check this one with a mobile, be sure you allow the camera to work, and point it to the marker.

• There be robots… (code). Check this one with a mobile, be sure you allow the camera to work, and point it to the marker.

Marker: PNG, PDF

Some links:

• AFrame

• AR.js

• AFrame Playground

The Open Web

Open standards, open source software (free software), decentralization, hackability…

• What is the open web and why is it important?, by Mark Surman (Mozilla).

• What Is the Open Web and Why Is It Important?, by Brad Neuberg.

Some other (interesting) stuff

All of these are free, open source software HTML5 libraries and applications:

• Games

  • 2048, with source code

  • PacMan, with source code

  • Astray, with source code

  • Vue Chess

  • FreeCivWeb, with source code

  • OpenLara, with source code

• Video

  • Plyr, with source code

  • Video.js, with source code

• Really cool stuff

  • Windows 95 in your browser. Windows 95 running on EM-DOSBox, a JavaScript version of DOSBox. The transpiling from C/C++ (DOSBox) to JavaScript (EM-DOSBox) is done with Emscripten an LLVM-based system to compile to asm.js and WebAssembly.