Rogelio Ferreira Escutia. 2 Filosofía HTML 5 Simple is better. Simplify wherever possible.

Presentación del tema: "Rogelio Ferreira Escutia. 2 Filosofía HTML 5 Simple is better. Simplify wherever possible."— Transcripción de la presentación:

1 Rogelio Ferreira Escutia

2 2 Filosofía HTML 5 Simple is better. Simplify wherever possible.

3 ¿Qué es HTML?

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

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

6 6 Nuestra PAGINA WEB es el reflejo de lo que SOMOS ante los demás

7 7 Areas que trabajan en la Web

8 ¿Quién está en la Web?

9 9 Casi TODOS se están mudando a la Web

10 ¿Qué está pasando en la Web?

11 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 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 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.

14 ¿Y si no estoy en la web?

15 15 NO EXISTO

16 ¿Y cómo puedo tener presencia en la Web?

17 17 Indexando mi página en los motores de búsqueda

18 18 Subiendo Videos

19 19 Colocar puntos en importancia en Mapas

20 20 Creando mundos virtuales

21 21 Subiendo información a Bibliotecas Digitales

22 22 Usar Microblogs

23 23 Usar Redes Sociales

24 ¿Cómo funciona HTML?

25 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).

26 ¿Quién hizo HTML?

27 27 A Little History of the World Wide Web, http://www.w3.org/History.html, Vannevar Bush – Wikipedia, http://es.wikipedia.org/wiki/Vannevar_Bushhttp://www.w3.org/History.html 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 28 A Little History of the World Wide Web, http://www.w3.org/History.html, Douglas Engelbart – Wikipedia, http://es.wikipedia.org/wiki/Douglas_Engelbarthttp://www.w3.org/History.html 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 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/http://www.w3.org/History.html http://es.wikipedia.org/wiki/Ted_Nelson 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 30 Arpanet

31 31 A Little History of the World Wide Web http://www.w3.org/History.html.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 32 CERN http://public.web.cern.ch/Public/Welcome.html, CERN – Wikipedia http://en.wikipedia.org/wiki/CERN.http://public.web.cern.ch/Public/Welcome.html 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 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.http://www.w3.org/History.htmlhttp://www.w3.org/History/1989/proposal.html World Wide Web En marzo de 1989, estando en el CERN, Tim Berrners publica el artículoInformation 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 34 Mensajería Instantánea

35 35 A Little History of the World Wide Web http://www.w3.org/History.html, Welcome to info.cern.ch http://info.cern.ch/.http://www.w3.org/History.html 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 36 Internet Actual

37

38 ¿Cuál es la evolución del HTML?

39 39 Tim Berners-Lee: WorldWideWeb, the first web client http://www.w3.org/People/Berners- Lee/WorldWideWeb.html.http://www.w3.org/People/Berners- Lee/WorldWideWeb.html Primer Navegador (Tim Berners Lee)

40 40 Tim Berners-Lee: WorldWideWeb, the first web client http://www.w3.org/People/Berners- Lee/WorldWideWeb.html.http://www.w3.org/People/Berners- Lee/WorldWideWeb.html Primer Navegador (Tim Berners Lee)

41 41 Welcome to info.cern.ch http://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 42 Welcome to info.cern.ch http://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.http://info.cern.ch/hypertext/WWW/TheProject.html

43 43 Primera página de la Web

44 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.http://info.cern.ch/ 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 2 00

45 45 Welcome to info.cern.ch http://info.cern.ch/, NCSA Image Archive http://www.ncsa.uiuc.edu/News/Images/.http://info.cern.ch/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 46 Welcome to info.cern.ch http://info.cern.ch/, Marc Andreseen http://en.wikipedia.org/wiki/Marc_Andreessen.http://info.cern.ch/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 47 NCSA Image Archive http://www.ncsa.uiuc.edu/News/Images/.http://www.ncsa.uiuc.edu/News/Images/ Mosaic

48 48 A Little History of the World Wide Web http://www.w3.org/History.html,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 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.htmlhttp://www.ibiblio.org/pioneers/andreesen.html http://en.wikipedia.org/wiki/Netscape 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 50 Netscape 0.9 http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_inicio.png.http://es.wikipedia.org/wiki/Imagen:Netscape_0.9_p%C3%A1gina_de_inicio.png Netscape Navigator

51 51 Netscape Navigator http://es.wikipedia.org/wiki/Imagen:Netscape_Navigator_2.JPG, A brief history http://browser.netscape.com/history.http://es.wikipedia.org/wiki/Imagen:Netscape_Navigator_2.JPG 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 52 Browser history http://www.blooberry.com/indexdot/history/ie.htm.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 53 AjaxMaximiliano 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 54 Web 1.0 logos http://www.flickr.com/photos/complexify/97303317/.http://www.flickr.com/photos/complexify/97303317/ Web 1.0

55 55 AjaxMaximiliano Firtman Editorial Alfaomega, Web 2.0 Wikipedia http://es.wikipedia.org/wiki/Web_2.0.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 56 Web 2.0 Wikipedia http://es.wikipedia.org/wiki/Web_2.0, tim.oreilly.com http://tim.oreilly.com/, AjaxMaximiliano Firtman Editorial Alfaomegahttp://es.wikipedia.org/wiki/Web_2.0http://tim.oreilly.com/ 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 57 logo 2.0 http://flickr.com/photos/stabilo-boss/93136022/.http://flickr.com/photos/stabilo-boss/93136022/ Web 2.0

58 58 AjaxMaximiliano 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 59 Ajax Maximiliano Firtman Editorial Alfaomega. Web 1.0 y Web 2.0 ConceptoWeb 1.0Web 2.0 Quiénes publicanLos productores de los sitiosproductores y usuarios InformaciónCentralizadaDispersa en miles de sitios PublicidadSólo grandes presupuestosCualquier persona Dueño de la inform.El sitio webLos usuarios TecnologíaHTML 4.0XHTML y CSS DisponibilidadAl final de cada proyectoBeta perpetuo Posibilidad de usarNingunaSitios con APIs servicios de otros

60 60 Ajax Maximiliano Firtman Editorial Alfaomega. Web 1.0 y Web 2.0 ConceptoWeb 1.0Web 2.0 E-mailHotmailGmail PublicidadDoubleClickGoogle AdWords MapasMapQuestGoogle Maps FotografíasOfotoYahoo! Flick Sitios de usuariosGeocitiesBlogger BuscadorAltavistaGoogle EnciclopediaEncartaWikipedia InformaciónSlashdotDigg Oficina---Google Docs ComprasAmazonGAP

61 61 Ajax Maximiliano Firtman Editorial Alfaomega. Web 1.0 vs Web 2.0

62

63

64 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 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 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).

67 ¿Y ahora por qué HTML 5?

68 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?

69 ¿Qué característias Tiene HTML 5?

70 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 y, pero tienen un significado semántico, como por ejemplo (bloque de navegación del sitio web) y. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos y.

71 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 y, 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 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 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 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 75 Reproducción de video

76 ¿Y ya puedo utilizar HTML 5?

77 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 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 79 Los nuevos dispositivos tiene soporte HTML 5

80 ¿Cuáles son las Tendencias a Futuro?

81 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 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 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 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 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 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.

87 Te esperamos en el ITM!!!

88 88 Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento 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!!!