Innovaciones para Internet: La visión de Mozilla

Innovaciones
para Internet
La visión de
Mozilla
Juan Eladio Sánchez Rosas
Mozilla Perú

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 Camino

Bugzilla

Firefox Lightning & Sunbird

Thunderbird y muchos más ...

y hemos dado origen
a muchos más Yoono

Songbird Kiwix

Second Life

Miro
Pencil Project

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)

¡Aún tienes esperanza!
librosweb.es

Ahora si,
Innovaciones
para Desarrollo Web

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" />

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
Canvas
Dibujar elementos gráficos personalizados

Otras Innovaciones
para Desarrollo Web

Otras innovaciones
CSS 3
• Selectores
• Espacios de nombres
• Colores
• Fondos
• Transiciones
• Bordes
• Sombras
• Fuentes

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

Otras innovaciones
Web Workers

Ejecutar scripts en
segundo plano
sin bloquear
el navegador

Otras innovaciones
DOM Storage

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

Demos: Aplicaciones interactivas
• deviantART Muro
muro.deviantart.com

• Cloud Canvas
www.cloud-canvas.com

• HTML 5 Canvas & Audio Experiment
9elements.com/io/projects/html5/canvas/

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

¿Y la compatibilidad
con 'viejos'
navegadores?

Modernizr
• www.modernizr.com

HTML5 Readiness
• www.html5readiness.com

¿Qué hace Mozilla
al respecto?

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

Innovaciones de Mozilla
Firefox 4 Beta Technology
www.mozilla.com/en-US/firefox/beta/technology/

Firefox Mobile
Lleva la experiencia de
Firefox a todas partes

Dispositivos móviles soportados
• Meego
• Android OS

Mozilla Labs
Investigació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
Proyectos activos

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

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

Mozilla Labs
Proyectos activos

Contacts
Información integrada de
contactos en el navegador

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

Mozilla Labs
Proyectos activos

Gaming
Plataforma de juegos para web abierta

Mozilla Labs
Proyectos activos
Messaging addons
Explorar el futuro de las
comunicaciones

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

Mozilla Labs
Proyectos activos
Prospector
Experimentos para buscar y
encontrar contenido

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

Mozilla Labs
Proyectos activos
Raindrop
Intercambio de mensajes

Mozilla Labs
Proyectos activos
Skywriter
Editor de código en HTML5

Mozilla Labs
Proyectos activos
Test Pilot
Estudios sobre uso
del navegador

Mozilla Labs
Proyectos activos
Chromeless
Navegador escrito en
JavaScript

Rainbow
Grabación de audio y video
desde el navegador

Zaphod
Probar nuevas ideas
para JavaScript

Mozilla Labs
Proyectos graduados
Personas
Temas fáciles de instalar

Jetpack
Desarrollo de extensiones

Sync
Sincronización de
datos personales

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.pe
www.facebook.com/mozillaperu
groups.google.com/group/mozilla-peru

Juan Eladio Sánchez Rosas
jesanchez(a)mozilla.pe
blogs.antartec.com/opensource
slideshare.net/juaneladio

Innovaciones para Internet: La visión de Mozilla

Recomendados

Recomendados

Más contenido relacionado

Similar a Innovaciones para Internet: La visión de Mozilla

Similar a Innovaciones para Internet: La visión de Mozilla (20)

Más de Juan Eladio Sánchez Rosas

Más de Juan Eladio Sánchez Rosas (20)

Último

Último (20)

Innovaciones para Internet: La visión de Mozilla