innovaciones para internet: la visión de mozilla
Post on 05-Dec-2014
2.520 Views
Preview:
DESCRIPTION
TRANSCRIPT
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><!--otra tabla para colocar cuatro filas --></td><td><!--tabla zona lateral--></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><!--siguen divs--></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>
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>
Nuevas etiquetas semánticas
<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" />
Tipos de campos en formularios
<input type="color" />
<input type="number" />
<input type="url" />
<input type="email" required />
<input type="tel" />
Tipos de campos en formularios
<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
¿Y la compatibilidad con 'viejos' navegadores?
¿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
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
top related