innovaciones para internet: la visión de mozilla
DESCRIPTION
Nuevas tecnologías para desarrollo web son discutidas y empleadas hoy alrededor del mundo. Esta charla presenta algunas de ellas y cómo Mozilla trabaja no sólo para soportarlas, sino también proponer nuevas maneras de interactuar con la Web.TRANSCRIPT
![Page 1: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/1.jpg)
Innovaciones para InternetLa visión de MozillaJuan Eladio Sánchez RosasMozilla Perú
![Page 2: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/2.jpg)
¿Qué es Mozilla Foundation?
![Page 3: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/3.jpg)
Mozilla es una organización de bien público dedicada a hacer Internet mejor para todos.
![Page 4: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/4.jpg)
Somos una comunidad mundial de miles de personas que creen en el poder de la tecnología para enriquecer la vida de las personas.
![Page 5: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/5.jpg)
Somos un proyecto de código libre cuyo código es usado por muchas de las aplicaciones más innovadoras de Internet.
![Page 6: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/6.jpg)
Nuestros proyectos
Thunderbird
Firefox
y muchos más ...
Lightning & Sunbird
Bugzilla
Camino
![Page 7: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/7.jpg)
y hemos dado origen a muchos más
Songbird
Miro
Second Life
Pencil Project
Kiwix
Yoono
![Page 8: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/8.jpg)
Estándares webHOY
![Page 9: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/9.jpg)
Antes: HTML y XML (90s)
• HyperText Markup Language
• eXtensible Markup Language
![Page 10: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/10.jpg)
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>
![Page 11: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/11.jpg)
XHTML 1
• eXtensible Hypertext Markup Language
Tiene las mismas funcionalidades de HTML, pero cumple las especificaciones, más
estrictas, de XML
![Page 12: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/12.jpg)
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>
![Page 13: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/13.jpg)
CSS 2
• Cascading Style Sheets
Lenguaje creado para controlar el aspecto de los documentos en HTML y XHTML
![Page 14: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/14.jpg)
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; }
![Page 15: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/15.jpg)
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><!--otra tabla para colocar cuatro filas --></td><td><!--tabla zona lateral--></td></tr></table>
<table><tr><td>Pie de página</td></tr></table>
![Page 16: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/16.jpg)
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><!--siguen divs--></div><div id=”lateral”>Zona lateral</div>
<div id=”piedepagina”>Pie de página</div>
En CSS van las posiciones y formatos
![Page 17: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/17.jpg)
JavaScript
Lenguaje de programación interpretado que se utiliza principalmente para crear
páginas web dinámicas.
![Page 18: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/18.jpg)
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;
}
![Page 19: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/19.jpg)
AJAX
• Asynchronous JavaScript And XML
Técnica de desarrollo web para crear aplicaciones interactivas con
XMLHttpRequest, JavaScript y Document Object Model (DOM)
![Page 20: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/20.jpg)
AJAX (2005)
![Page 21: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/21.jpg)
¿Todo esto es nuevo para ti?
![Page 22: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/22.jpg)
¡Aún tienes esperanza!librosweb.es
![Page 23: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/23.jpg)
Ahora si, Innovacionespara Desarrollo Web
![Page 24: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/24.jpg)
HTML5
![Page 25: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/25.jpg)
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
![Page 26: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/26.jpg)
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" />
![Page 27: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/27.jpg)
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>
![Page 28: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/28.jpg)
Nuevas etiquetas semánticas
<section> <article> <header> <h1>Título de artículo</h1> </header> <section> Contenido de la nota ... </section> </article> <article> .. </article></section>
![Page 29: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/29.jpg)
Nuevas etiquetas semánticas
<aside> Enlaces relacionados </aside>
<footer> Copyright © 2010 </footer></body>
![Page 30: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/30.jpg)
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" />
![Page 31: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/31.jpg)
Tipos de campos en formularios
<input type="color" />
<input type="number" />
<input type="url" />
<input type="email" required />
<input type="tel" />
![Page 32: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/32.jpg)
Tipos de campos en formularios
<input type="date" />
<input type="month" />
<input type="week" />
<input type="datetime" />
![Page 33: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/33.jpg)
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>
![Page 34: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/34.jpg)
Estándares de video
• H.264/AVC/MPEG-4
• OGG/Theora
• WebM (Youtube VP8)
![Page 35: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/35.jpg)
HTML 5
Dibujar elementos gráficos personalizados
Canvas
![Page 36: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/36.jpg)
Otras Innovaciones para Desarrollo Web
![Page 37: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/37.jpg)
Otras innovacionesCSS 3
• Selectores
• Espacios de nombres
• Colores
• Fondos
• Transiciones
• Bordes
• Sombras
• Fuentes
![Page 38: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/38.jpg)
Otras innovaciones
Permite acceder a la ubicación física del usuario.(y mostrar contenido personalizado)
Geolocalización
![Page 39: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/39.jpg)
Otras innovaciones
Ejecutar scripts ensegundo planosin bloquear el navegador
Web Workers
![Page 40: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/40.jpg)
Otras innovaciones
Almacenar mayor cantidad de información de usuario que puedan ser usadas por el navegador
DOM Storage
![Page 41: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/41.jpg)
Demos
![Page 42: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/42.jpg)
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
![Page 43: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/43.jpg)
¿Y la compatibilidad con 'viejos' navegadores?
![Page 46: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/46.jpg)
¿Qué hace Mozilla al respecto?
![Page 47: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/47.jpg)
Firefox 4La próxima generación del navegador de Mozilla
![Page 48: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/48.jpg)
Innovaciones de Mozilla
www.mozilla.com/en-US/firefox/beta/technology/
Firefox 4 Beta Technology
![Page 49: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/49.jpg)
Firefox MobileLleva la experiencia de Firefox a todas partes
![Page 50: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/50.jpg)
Dispositivos móviles soportados
• Meego
• Android OS
![Page 51: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/51.jpg)
Mozilla LabsInvestigación y desarrollo para la Web
![Page 52: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/52.jpg)
Mozilla Labs
• Un laboratorio virtual
• Personas se reúnen para crear, experimentar y usar nuevas tecnologías e innovaciones para la web.
![Page 53: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/53.jpg)
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
![Page 54: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/54.jpg)
Mozilla Labs
ContactsInformación integrada de contactos en el navegador
Proyectos activos
Servicios soportados:- Libreta de direcciones- Facebook- Gmail- LinkedIn- Plaxo- Twitter- Yahoo!
![Page 55: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/55.jpg)
Mozilla Labs
GamingPlataforma de juegos para web abierta
Proyectos activos
![Page 56: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/56.jpg)
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
![Page 57: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/57.jpg)
Mozilla LabsProyectos activos
ProspectorExperimentos para buscar y encontrar contenido
Extensiones:- Speak Words- Find Suggestions- Query Stats 2
![Page 58: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/58.jpg)
Mozilla Labs
RaindropIntercambio de mensajes
Proyectos activos
![Page 59: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/59.jpg)
Mozilla Labs
SkywriterEditor de código en HTML5
Proyectos activos
![Page 60: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/60.jpg)
Mozilla Labs
Test PilotEstudios sobre uso del navegador
Proyectos activos
![Page 61: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/61.jpg)
Mozilla LabsProyectos activos
ChromelessNavegador escrito en JavaScript
ZaphodProbar nuevas ideas para JavaScript
RainbowGrabación de audio y video desde el navegador
![Page 62: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/62.jpg)
Mozilla Labs
SyncSincronización de datos personales
PersonasTemas fáciles de instalar
Proyectos graduados
JetpackDesarrollo de extensiones
![Page 63: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/63.jpg)
Mozilla Perú
![Page 64: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/64.jpg)
Mozilla Perú
• Una comunidad para
• Colaborar
• Aprender
• Disfrutar
![Page 65: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/65.jpg)
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
![Page 66: Innovaciones para Internet: La visión de Mozilla](https://reader035.vdocuments.site/reader035/viewer/2022081716/5482c173b4af9f960d8b4876/html5/thumbnails/66.jpg)
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