Innovaciones para Internet: La visión de Mozilla

Innovaciones para InternetLa visión de MozillaJuan Eladio Sánchez RosasMozilla Perú

¿Qué es Mozilla Foundation?

Mozilla es una organización de bien público dedicada a hacer Internet mejor para todos.

Somos una comunidad mundial de miles de personas que creen en el poder de la tecnología para enriquecer la vida de las personas.

Somos un proyecto de código libre cuyo código es usado por muchas de las aplicaciones más innovadoras de Internet.

Nuestros proyectos

Thunderbird

Firefox

y muchos más ...

Lightning & Sunbird

Bugzilla

Camino

y hemos dado origen a muchos más

Songbird

Miro

Second Life

Pencil Project

Kiwix

Yoono

Estándares webHOY

Antes: HTML y XML (90s)

• HyperText Markup Language

• eXtensible Markup Language

XML: Un ejemplo<?xml version="1.0" encoding="UTF-8" ?>

<canal><titulo>Mozilla Perú</titulo>

<items><item><titulo>Actividades Octubre</titulo><enlace>http://mozilla.pe/actividades-octubre</enlace><descripcion><imagen fuente="fotografiaO.jpg" texto="Evento O" />Este mes que pasó hicimos una pausa ...</descripcion></item><item><titulo>Mozilla Campus Day en FESOLI</titulo><enlace>http://mozilla.pe/mozilla-campus-day-fesoli</enlace><descripcion><imagen fuente="fotografiaF.jpg" texto="Evento F" />Culminando por este año el evento itinerante ...</descripcion></item></items></canal>

XHTML 1

• eXtensible Hypertext Markup Language

Tiene las mismas funcionalidades de HTML, pero cumple las especificaciones, más

estrictas, de XML

XHTML 1 (2000)

• eXtensible HyperText Markup Language

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Mozilla Perú</title></head>

<body> <h1>Mozilla Perú</h1><img src="logo.png" align="left" hspace="10"> <p>Actividades de Mozilla Perú en Octubre 2010 <br />5 de noviembre de 2010 por Juan Eladio. 0 comentarios</p></body>

</html>

CSS 2

• Cascading Style Sheets

Lenguaje creado para controlar el aspecto de los documentos en HTML y XHTML

CSS 2 (1998)

• Cascading Style Sheets

body { margin: 10; padding: 30; width: 100%; font-family: Verdana; font-size: 100%; line-height: 1.125em; color: #282623; background-color: white;}h1 { font-size: 2.125em; }p { line-height:1.909em; }

Diseño web sin tablas (2002)

Enfoque tradicional (sólo HTML)

<table><tr><td>Cabecera</td></tr></table>

<table><tr><td>Navega</td></tr></table>

<table><tr><td></td><td></td></tr></table>

<table><tr><td>Pie de página</td></tr></table>

Diseño web sin tablas (2002)

Enfoque sin tablas (HTML+CSS)

<div id=”cabecera”>Cabecera</div>

<div id=”navegacion”>Navegación</div>

<div id=”seccion”><div id=”zona1”>Contenido 1</div><div id=”zona1”>Contenido 2</div></div><div id=”lateral”>Zona lateral</div>

<div id=”piedepagina”>Pie de página</div>

En CSS van las posiciones y formatos

JavaScript

Lenguaje de programación interpretado que se utiliza principalmente para crear

páginas web dinámicas.

JavaScript

function CountWords (this_field)

var char_count = this_field.value.length;

var fullStr = this_field.value + " ";

var cleanedStr = fullStr.replace(/\s/g,' ');

var splitString = cleanedStr.split(" ");

var word_count = 0;

for (z=0; z<splitString.length; z++)

{if (splitString[z].length > 0) word_count++;}

return word_count;

}

AJAX

• Asynchronous JavaScript And XML

Técnica de desarrollo web para crear aplicaciones interactivas con

XMLHttpRequest, JavaScript y Document Object Model (DOM)

AJAX (2005)

¿Todo esto es nuevo para ti?

¡Aún tienes esperanza!librosweb.es

Ahora si, Innovacionespara Desarrollo Web

HTML5

HTML5

• Nuevo estándar para desarrollo de páginas web

• Iniciado por WHATWG

• En desarrollo por World Wide Web Consortium (W3C)

• Ya existen implementaciones preliminares

Menos atributos innecesarios

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="micodigo.js"></script>

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

Nuevas etiquetas semánticas

<body> <header> <hgroup> <h1>Título de página</h1> <h2>Subtítulo</h2> </hgroup> </header> <nav> <ul> Opción de navegación ... </ul> </nav>


<section> <article> <header> <h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> <article> .. </article></section>


<aside> Enlaces relacionados </aside>

<footer> Copyright © 2010 </footer></body>

Tipos de campos en formularios

<input type="range" min="0" max="50" step="2" value="0" />

<input results="10" type="search" required autofocus />

<input type="text" placeholder="Search history" />


<input type="color" />

<input type="number" />

<input type="url" />

<input type="email" required />

<input type="tel" />


<input type="date" />

<input type="month" />

<input type="week" />

<input type="datetime" />

Audio y Video

<audio src="sound.ogg" controls></audio>

<script>document.getElementById("audio").muted = false;</script>

<video src="movie.ogv" autoplay controls></video>

<script>document.getElementById("video").play();</script>

Estándares de video

• H.264/AVC/MPEG-4

• OGG/Theora

• WebM (Youtube VP8)

HTML 5

Dibujar elementos gráficos personalizados

Canvas

Otras Innovaciones para Desarrollo Web

Otras innovacionesCSS 3

• Selectores

• Espacios de nombres

• Colores

• Fondos

• Transiciones

• Bordes

• Sombras

• Fuentes

Otras innovaciones

Permite acceder a la ubicación física del usuario.(y mostrar contenido personalizado)

Geolocalización

Otras innovaciones

Ejecutar scripts ensegundo planosin bloquear el navegador

Web Workers

Otras innovaciones

Almacenar mayor cantidad de información de usuario que puedan ser usadas por el navegador

DOM Storage

Demos

Demos: Aplicaciones interactivas

• deviantART Muromuro.deviantart.com

• Cloud Canvaswww.cloud-canvas.com

• HTML 5 Canvas & Audio Experiment9elements.com/io/projects/html5/canvas/

• Galactic Inbox: HTML 5 Gamewww.monocubed.com/?p=549

http://muro.deviantart.com/

http://www.cloud-canvas.com/

http://9elements.com/io/projects/html5/canvas/

http://www.monocubed.com/?p=549

¿Y la compatibilidad con 'viejos' navegadores?

Modernizr

• www.modernizr.com

http://www.modernizr.com/

HTML5 Readiness

• www.html5readiness.com

http://www.html5readiness.com/

¿Qué hace Mozilla al respecto?

Firefox 4La próxima generación del navegador de Mozilla

Innovaciones de Mozilla

www.mozilla.com/en-US/firefox/beta/technology/

Firefox 4 Beta Technology

http://www.mozilla.com/en-US/firefox/beta/technology/

Firefox MobileLleva la experiencia de Firefox a todas partes

Dispositivos móviles soportados

• Meego

• Android OS

Mozilla LabsInvestigación y desarrollo para la Web

Mozilla Labs

• Un laboratorio virtual

• Personas se reúnen para crear, experimentar y usar nuevas tecnologías e innovaciones para la web.

Mozilla Labs

Concept SeriesCompartir, colaborar y explorar nuevas ideas sobre el futuro de la web

Proyectos activos

Subproyectos- Community Concepts- Design Challenges- Student Outreach- Jam Days

Mozilla Labs

ContactsInformación integrada de contactos en el navegador

Proyectos activos

Servicios soportados:- Libreta de direcciones- Facebook- Gmail- LinkedIn- Plaxo- Twitter- Yahoo!

Mozilla Labs

GamingPlataforma de juegos para web abierta

Proyectos activos

Mozilla Labs

Messaging addonsExplorar el futuro de las comunicaciones

Proyectos activos

Extensiones:- Thunderbird Contacts- Mailing List Manager- Mozilla F1- Mute Thread- Quick Filter- about:support

Mozilla LabsProyectos activos

ProspectorExperimentos para buscar y encontrar contenido

Extensiones:- Speak Words- Find Suggestions- Query Stats 2

Mozilla Labs

RaindropIntercambio de mensajes

Proyectos activos

Mozilla Labs

SkywriterEditor de código en HTML5

Proyectos activos

Mozilla Labs

Test PilotEstudios sobre uso del navegador

Proyectos activos

Mozilla LabsProyectos activos

ChromelessNavegador escrito en JavaScript

ZaphodProbar nuevas ideas para JavaScript

RainbowGrabación de audio y video desde el navegador

Mozilla Labs

SyncSincronización de datos personales

PersonasTemas fáciles de instalar

Proyectos graduados

JetpackDesarrollo de extensiones

Mozilla Perú

Mozilla Perú

• Una comunidad para

• Colaborar

• Aprender

• Disfrutar

Mozilla Campus Day*

Promover el desarrollo de Internet y la web en nuestro país

Para estudiantes y docentes de universidades e institutos peruanos

Conferencias y talleres sobre tecnologías de vanguardia en Internet

mozilla.pe/mozilla-campus-day

Innovaciones para Internet La visión de Mozilla

Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru

Juan Eladio Sánchez Rosasjesanchez(a)mozilla.peblogs.antartec.com/opensourceslideshare.net/juaneladio