rogelio ferreira escutia. 2 filosofía html 5 simple is better. simplify wherever possible

Rogelio Ferreira Escutia

2

Filosofía HTML 5

“Simple is better.

Simplify wherever possible.”

¿Qué es HTML?

4

¿Qué es HTML?

“Es el lenguaje con el que están hechas TODAS Las páginas de la web (50 millones)”

5

“Su mejor conocimiento nos permite mejorar el contenido que subimos a la web”

6

“Nuestra PAGINA WEB esel reflejo de lo que SOMOS ante los demás”

7

Areas que trabajan en la Web

¿Quién está en la Web?

9

“Casi TODOS se están mudandoa la Web”

¿Qué está pasandoen la Web?

11

Estadísticas

Más del 50% de la población mundial es menor de 30 años.

La página mas visitada es Facebook.

1 de cada 8 parejas en Estados Unidos se conoció en una red social.

Facebook logró 200 millones de usuarios en menos de un año.

Se descargaron 1000 millones de aplicaciones para iPods en 9 meses.

Si Facebook fuera un país sería el tercer mas grande después de China e India.

12

Estadísticas

Según del Departamento de Educación de Estados Unidos la educación a distancia ha logrado mejores resultados que la educación tradicional.

80% de las compañías utilizan redes sociales para reclutamiento.

50% del tráfico en dispositivos móviles en Inglaterra es por Facebook.

Algunas universidades han dejado de dar cuentas de correo electrónico y empiezan a usar las redes sociales

Varias universidades han empezado a usar tablets y lectoras de libros electrónicos.

13

Estadísticas

Google y YouTube son los 2 motores de búsqueda mas usados en el mundo.

Cada 5 minutos se suben más de 100 horas de video a YouTube.

Wikipedia tiene más de 15 millones de artículos y es más exacta y actualizada que la Enciclopedia Británica. El 78% de su contenido está en un idioma diferente del inglés.

Existen 200 millones de blogs en todo el mundo.

¿Y si no estoy en la web?

15

“NO EXISTO”

¿Y cómo puedotener presencia

en la Web?

17

Indexando mi páginaen los motores de búsqueda

18

Subiendo Videos

19

Colocar puntos en importancia en Mapas

20

Creando mundos virtuales

21

Subiendo información aBibliotecas Digitales

22

Usar Microblogs

23

Usar Redes Sociales

¿Cómo funcionaHTML?

25

Es toda la tecnología que tiene que ver con el manejo de información via internet (o a través de una intranet).

¿Quién hizo HTML?

27• ”A Little History of the World Wide Web”, http://www.w3.org/History.html, Vannevar Bush – Wikipedia,

http://es.wikipedia.org/wiki/Vannevar_Bush

Vannevar Bush En 1945 Vannevar Bush escribe un artículo en la

revista “Atlantic Monthly” acerca de un mecanismo foto-eléctrico denominado Memex, el cual podía serguir enlaces entre documentos en un microficha.

28• ”A Little History of the World Wide Web”, http://www.w3.org/History.html, Douglas Engelbart – Wikipedia,

http://es.wikipedia.org/wiki/Douglas_Engelbart

Douglas Engelbart En la década de los 60ś Douglas Engelbart fue la fuerza motriz detrás

del diseño del primer sistema en línea, On-Line System (también conocido como NLS), en el Stanford Research Institute.

Junto con su equipo en el Augmentation Research Center desarrolló varios elementos básicos de la interfaz humana de las computadoras actuales, como pantallas con imágenes en bits, ventanas múltiples, y software multiusuario. También fue el co-inventor del mouse, del que nunca recibió regalías.

29• ”A Little History of the World Wide Web”, http://www.w3.org/History.html, Ted Nelson – Wikipedia,

http://es.wikipedia.org/wiki/Ted_Nelson, Ted Nelson Home Page, http://ted.hyperland.com/

Ted Nelson Ted Nelson fundó el proyecto Xanadu en 1960 y consistía básicamente

en concebir un documento global y único que cubra todo lo escrito en el mundo, mediante una gran cantidad de ordenadores interconectados, que contenga todo el conocimiento existente o, mejor dicho, información en forma de hipertexto. Se pretendía crear un mar de documentos relacionados mediante enlaces hipertextuales, todos disponibles.

Ted Nelson acuña la frase “Hipertexto” en el artículo “A File Structure for the Complex, the Changing, and the Indeterminate”, presentado durante la 20ª Conferencia Nacional de ACM realizada en 1965 en Nueva York.

30

Arpanet

31• ”A Little History of the World Wide Web” http://www.w3.org/History.html.

Tim Berners-Lee Mientras trabajaba en el CERN, durante junio a diciembre

de 1980, Tim Berners-Lee escribe el programa “ENQUIRE” (Enquire-Within-Upon-Everything) el cual permite enlaces entre nodos arbitrarios. Cada nodo tiene un título, un tipo y una lista de enlaces bidireccionales.

32• “CERN” http://public.web.cern.ch/Public/Welcome.html , “CERN – Wikipedia”

http://en.wikipedia.org/wiki/CERN .

CERN El CERN (Organisation Européenne pour la Recherche

Nucléaire, Organización Europea para la Investigación Nuclear) es el laboratorio de investigación sobre partículas físicas más grande del mundo.

Se encuentra en la frontera entre Suiza y Francia. El CERN agrupa 20 países europeos y cuenta con 2600 empleados y 7931 científicos e ingenieros de 500 universidades y 80 países.

33

• ”A Little History of the World Wide Web”, http://www.w3.org/History.html, “The original proposal of the WWW” http://www.w3.org/History/1989/proposal.html , CERN where the web was born http://public.web.cern.ch/Public/en/About/Web-en.html.

World Wide Web

En marzo de 1989, estando en el CERN , Tim Berrners publica el artículo”Information Management: A Proposal”, el cual muestra la propuesta original de la WWW.

En octubre de 1990, Tim Berners inicia su trabajo sobre un programa que maneja y edita hipertexto usando una computadora NeXTStep y nombrando a este programa "WorldWideWeb".

34

Mensajería Instantánea

35• ”A Little History of the World Wide Web” http://www.w3.org/History.html, “Welcome to info.cern.ch”

http://info.cern.ch/ .

Robert Cailliau

Posteriormente Robert Cailliau se une al proyecto y es co-autor de una nueva versión del proyecto “World Wide Web”.

Robert Cailliau se convierte en el primer internauta (web surfer).

36

Internet Actual

¿Cuál es la evolucióndel HTML?

39• “Tim Berners-Lee: WorldWideWeb, the first web client”

http://www.w3.org/People/Berners-Lee/WorldWideWeb.html .

Primer Navegador (Tim Berners Lee)

40• “Tim Berners-Lee: WorldWideWeb, the first web client”

http://www.w3.org/People/Berners-Lee/WorldWideWeb.html .

Primer Navegador (Tim Berners Lee)

41• “Welcome to info.cern.ch” http://info.cern.ch/ .

Computadora NeXT La computadora original donde trabajó Tim Berners

era una computadora NeXT, la cual se convirtió en el primer servidor web, el primer navegador web y el primer editor web.

Actualmente se encuentra en la exhibición “Microcosm” del CERN.

42• “Welcome to info.cern.ch” http://info.cern.ch/ .

Primer sitio de la Web El sitio “Info.cern.ch” fué la dirección del primer sitio web y

del primer servidor web, corriendo en una computadora NeXT en el CERN.

La primera página web fué: ”http://info.cern.ch/hypertext/WWW/TheProject.html“ la cual

informaba acerca del proyecto WWW e incluía detalles para que los visitantes pudieran crear su propia página web y una explicación de cómo encontrar información en la web. La pantalla original de este sitio se modificó y no se creó una copia del original. Actualmente el sitio y la página original se encuentran funcionando en el CERN.

43

Primera página de la Web

44• “Welcome to info.cern.ch” http://info.cern.ch/ , “The Early World Wide Web at SLAC”

http://www.slac.stanford.edu/history/earlyweb/firstpages.shtml .

Primer Servidor en USA Durante 1991 se instalaron varios servidores por toda

Europa y en diciembre de 1991 se instaló el primer servidor web fuera de Europa, en el SLAC (Stanford Linear Accelerator Center).

En noviembre de 1992 había 26 servidores en todo el mundo y en octubre de 1993 había 200

45• “Welcome to info.cern.ch” http://info.cern.ch/ , “NCSA Image Archive” http://www.ncsa.uiuc.edu/News/Images/

.

Mosaic En febrero de 1993 en el NCSA (National Center for

Supercomputing Applications) de la Universidad de Illinois en Urbana-Champaign, liberó la primera versión del navegador Mosaic para plataformas X Windows.

En septiembre de 1993, NCSA liberó las versiones para PCs y Apple Macintosh, lo cual permitió que la gente pudiera tener acceso a la web usando computadoras personales.

46• “Welcome to info.cern.ch” http://info.cern.ch/ , “Marc Andreseen” http://en.wikipedia.org/wiki/Marc_Andreessen

.

Creadores de Mosaic

En septiembre de 1993, NCSA liberó las versiones para PCs y Apple Macintosh, lo cual permitió que la gente pudiera tener acceso a la web usando computadoras personales.

Marc Andreessen y Eric J. Bina fueron los creadores de Mosaic.

47• “NCSA Image Archive” http://www.ncsa.uiuc.edu/News/Images/ .

Mosaic

48• ”A Little History of the World Wide Web” http://www.w3.org/History.html,

W3C

El 30 de abril de 1993 el director del CERN declara que caulquier persona puede usar la tecnología de la WWW sin necesidad de pagar regalías al CERN.

Del 25 al 27 de mayo de 1994 se lleva a cabo la “First International WWW Conference” en Ginebra Suiza.

En octubre de 1994 se funda el consorcio de la WWW (World Wide Web Consortium) comúnmente conocido como W3C.

49

• “Marc Andreessen” http://www.ibiblio.org/pioneers/andreesen.html, “Netscape” http://en.wikipedia.org/wiki/Netscape, “Principal Figures” http://www.ibiblio.org/team/history/pioneers/pioneers.html

Netscape En marzo de 1994, Marc Andreessen y algunos compañeros

que trabajaban en el desarrollo de Mosaic en el NCSA, abandonan su trabajo para en abril de 1994 fundar Netscape junto con Jim Clark.

El 13 de octubre de 1994 sale al mercado el navegador de Netscape, denominado inicialmente “Mosaic Netscape 0.9” y posteriormente renombrado “Netscape Navigator”. En 3 años la compañía Netscape creció de 3 empleados a 2600 y tener un valor de 765 millones de dólares.

50• “Netscape 0.9” http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_inicio.png .

Netscape Navigator

51• “Netscape Navigator” http://es.wikipedia.org/wiki/Imagen:Netscape_Navigator_2.JPG, “A brief history”

http://browser.netscape.com/history .

El navegador Navigator llegó a ser utilizado por el 80% de los usuarios de internet hasta que surgió el “Explorer” de Microsoft.

Posteriormente la compañía fué comprada por AOL y el 1º de marzo del 2008 se terminó el soporte oficial del navegador.

52• “Browser history” http://www.blooberry.com/indexdot/history/ie.htm .

Internet Explorer La primera versión (IE1.0) era un producto que se licenció

de la compañía Spyglass (la parte comercial de NCSA Mosaic).

Posteriormente Microsoft desarrolló su propia versión, la cual para competir con Netscape la distribuyó de forma gratuita.

Para noviembre de 1997, se incluyó la versión 4.0 en el Windows 98, el cual tenía mejores características que su rival de Netscape.

53• “Ajax”Maximiliano Firtman Editorial Alfaomega.

Web 1.0

Se denomina Web 1.0 a la web inicial surgida durante 1995 y que durante un poco mas de 10 años siguió funcionando de la misma manera (e incluso la seguimos utilizando actualmente) hasta que surgió la Web 2.0.

54• “Web 1.0 logos” http://www.flickr.com/photos/complexify/97303317/ .

Web 1.0

55• “Ajax”Maximiliano Firtman Editorial Alfaomega, “Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 .

La nueva Web

La World Wide Web nació a principios de la década de 1990 y en sus inicios sólo ofreció contenido contextual agrupado en los famosos hipervínculos o links, pero posteriormente se requirió animaciones, ventanas desplegables, videos, juegos y aplicaciones completas.

Es por eso que la web como la conocíamos hasta la actualidad está cambiando, aparece una nueva web, la Web 2.0

56• “Web 2.0 Wikipedia” http://es.wikipedia.org/wiki/Web_2.0 , “tim.oreilly.com” http://tim.oreilly.com/ ,

“Ajax”Maximiliano Firtman Editorial Alfaomega

Tim O'Reilly

El término Web 2.0 fue acuñado por Tim O'Reilly en 2004 para referirse a una segunda generación de Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, y los wikis que fomentan la colaboración y el intercambio ágil de información entre los usuarios.

57• “logo 2.0” http://flickr.com/photos/stabilo-boss/93136022/ .

Web 2.0

58• “Ajax”Maximiliano Firtman Editorial Alfaomega.

Conceptos equivocados

La Web 2.0 no es Internet 2. La Web 2.0 funciona sobre la misma red de internet que todos conocemos.

La Web 2.0 no es un nuevo lenguaje de programación.

La Web 2.0 no es un cambio radical de tecnología, se sigue utilizando HTTP, HTML, JavaScript y muchas de las tecnologías que han surgido, aunque se usan de otro modo.

59• “Ajax” Maximiliano Firtman Editorial Alfaomega.

Web 1.0 y Web 2.0

Concepto Web 1.0 Web 2.0

Quiénes publican Los productores de los sitios productores y usuarios

Información Centralizada Dispersa en miles de sitios

Publicidad Sólo grandes presupuestos Cualquier persona

Dueño de la inform. El sitio web Los usuarios

Tecnología HTML 4.0 XHTML y CSS

Disponibilidad Al final de cada proyecto Beta perpetuo

Posibilidad de usar Ninguna Sitios con APIsservicios de otros

60• “Ajax” Maximiliano Firtman Editorial Alfaomega.

Web 1.0 y Web 2.0

Concepto Web 1.0 Web 2.0

E-mail Hotmail GmailPublicidad DoubleClick Google AdWordsMapas MapQuest Google MapsFotografías Ofoto Yahoo! FlickSitios de usuarios Geocities BloggerBuscador Altavista GoogleEnciclopedia Encarta WikipediaInformación Slashdot DiggOficina --- Google DocsCompras Amazon GAP

61• “Ajax” Maximiliano Firtman Editorial Alfaomega.

Web 1.0 vs Web 2.0

64• “Ajax” Maximiliano Firtman Editorial Alfaomega.

Segunda Guerra de Navegadores En la década de los 90s existió lo que se denominó la

guerra de los navegadores entre Netscape e Internet Explorer por la compatibilidad.

Con la entrada de la Web 2.0 se puede decir que se ha iniciado la “Segunda Guerra de los Navegadores” entre Internet Explorer, Firefox, Opera, Safari y Google Chrome.

65• “Ajax” Maximiliano Firtman Editorial Alfaomega.

AJAX AJAX (Asynchronous JavaScript and XML – JavaScript

Asincrónico con XML) es una plataforma basada en estándares y no posee dueño.El término fué creado en el 2005 por Jesse James Garret para darle un nombre al conjunto de técnicas (JS y XML).

AJAX no es nuevo y antes se conocía con otros nombres, pero no fué muy popular hasta que Google lo difundió entre los usuarios y programadores.

AJAX usa XHTML y CSS como lenguaje de estructura y diseño, JavaScript como lenguaje de programación, el modelo DOM (Document Object Model) para trabajar con la estructura del sitio, XML como uno de los formatos de transporte de datos desde y hacia el servidor y un lenguaje de servidor (PHP, ASP o Java) para la lógica de servidor y el acceso a bases de datos.

66”HTML 5”, http://es.wikipedia.org/wiki/HTML_5, septiembre 2010

HTML 5 HTML 5 (HyperText Markup Language, versión 5) es la quinta

revisión importante del lenguaje básico de la World Wide Web, HTML.

HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).

¿Y ahorapor qué HTML 5?

68

Sus características le permiten un comportamiento parecido al de una aplicación de escritorio, permitiendo una nueva interacción en el navegador.

¿Por qué cambiarse a HTML 5?

¿Qué característiasTiene HTML 5?

70”HTML 5”, http://es.wikipedia.org/wiki/HTML_5, septiembre 2010

Nuevos elementos HTML 5 establece una serie de nuevos elementos y

atributos que reflejan el uso típico de los sitios web modernos.

Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.

Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.

71”HTML 5”, http://es.wikipedia.org/wiki/HTML_5, septiembre 2010

Mejoras Algunos elementos de HTML 4.01 han quedado

obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS.

También hay un renovado enfasis en la importancia del scripting DOM para el comportamiento de la web.

72”Pro HTML Programming” Peter Lubbers, Brian Albers y Fran Salim, Apress, USA 2010

Desarrollo de HTML 5 Los que actualmente trabajan en HTML 5 son:

WHATWG (Web Hypertext Application Technology Working Group): Fundanda en 2004 por compañías que desarrollan los navegadores (Apple, Mozilla, Google y Opera).

W3C (World Wide Web Consortium): Tiene un grupo de trabajo encargado de liberar la especificación HTML5.

IETF (Internet Engineering Task Force): Responsable de los protocolos como HTTP y encargado de definir la API WebSocket que se encuentra bajo desarrollo.

73”Pro HTML Programming” Peter Lubbers, Brian Albers y Fran Salim, Apress, USA 2010

NO Plugins

HTML 5 tiene soporte nativo para varias tecnologías sin necesidad de utilizar plugins. Algunos problemas de usar plugins son los siguientes:

– a) No siempre pueden instalarse

– b) Puede deshabilitarse o bloquearse

– c) Son difíciles de integrar con el resto del documento HTML

74”Pro HTML Programming” Peter Lubbers, Brian Albers y Fran Salim, Apress, USA 2010

Nuevas características Algunas de la nuevas características de HTML 5 son las

siguientes:

Channel messaging Cross-document messaging Canvas (2D and 3D) Geolocation MathML Microdata Server-Sent events Scalable Vector Graphics (SVG) WebSocket API and protocol Web origin concept Web storage Web SQL database Web Workers y XMLHttpRequest Level 2

75

Reproducción de video

<html><body><video width="640" height="360" src="google_main.mp4" controls autobuffer></video></body></html>

¿Y ya puedo utilizarHTML 5?

77”The HTML 5 test”, http://html5test.com/, septiembre 2010

Firefox 4.0b 5 Logró 204 de 300 puntos posibles para lograr un

soporte completo de HTML 5.

78”The HTML 5 test”, http://html5test.com/, septiembre 2010

Google Chrome Logró 217 de 300 puntos posibles para lograr un

soporte completo de HTML 5.

79

Los nuevos dispositivostiene soporte HTML 5

¿Cuáles son lasTendencias a Futuro?

81

Carreras del Futuro

Expertos en megatendencias coinciden en que las profesiones más prometedoras en un futuro inmediato serán aquellas relacionadas con las siguientes tecnologías: informática, telemática, telefonía celular, ingeniería genética, biotecnología, biónica, realidad virtual, información multimedia, y los nuevos materiales cerámicos".

"Lo que sin duda es una realidad, es que en el futuro cercano, no importando la profesión que se estudie, el dominio de idiomas, los conocimientos en tecnología e informática, así como la capacidad de gestionar y coordinar, serán herramientas necesarias para conseguir un mejor empleo."

82

Carreras del Futuro

De acuerdo con la Organización para la Cooperación y Desarrollo Económico (OCDE) “en el siglo que comienza el mundo laboral y la creación de la riqueza se fundamentarán cada vez más en la información, ya sea en carreras profesionales o técnicas. Un hecho es que siete de las 10 carreras mejor pagadas en México están en las ingenierías"

83

Tendencias según Google

Internet Móvil.

Red Onmipresente.

Máxima velocidad.

Computación en la nube.

Crecimiento exponencial de la publicidad en línea.

Aplicaciones en tiempo real.

Redes Sociales.

84

Carreras en el ITM Actualmente se cuenta con la especialidad en

“Tecnología Web y Redes” como parte de las carreras de:

ISC (Ingeniería en Sistemas Computacionales)LINF (Licenciatura en Informática)

En Enero del 2010 arrancó la carrera de:

ITIC (Ingeniería en Tecnologías de la Información y Comunicaciones).

En agosto del 2010 arrancó la carrera de:

IINF (Ingeniería Informática)

85

Proyectos Actuales en el ITM

Montar servidores propios. Construir un Cluster. Motor de búsqueda para páginas en México. Aplicaciones para intercambio de datos (P2P). Aplicaciones para distribución de tareas (Grid

Computing). Aplicaciones basada en la nube (cloud computing). Construcción de Redes Sociales. Aplicaciones de Comercio Electrónico. Aplicaciones Móviles. Plataforma de Educación a Distancia

86

Proyectos Futuros en el ITM

Iniciar una línea de especialidad en “Tecnologías Web”.

Conformar un grupo de Investigación sobre Tecnologías Web.

Creación de un laboratorio para Tecnologías Web.

Iniciar con desarrollos Web dentro y fuera del ITM.

Te esperamos en el ITM!!!

88

Rogelio Ferreira Escutia

Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación

Correo: rogeplus@gmail.com rferreir@itmorelia.edu.mx

Página Web: http://antares.itmorelia.edu.mx/~kaos/http://www.xumarhu.net/

Twitter: http://twitter.com/rogeplus

Facebook: http://www.facebook.com/group.php?gid=155613741139728

Gracias!!!