Download - 1.introducción a internet y html5
![Page 1: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/1.jpg)
1.Introducción a Internet y HTML5
Ramiro Estigarribia Canese
![Page 2: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/2.jpg)
¿Qué es HTML?HTML es el lenguaje que se emplea para el desarrollo de sitios en internet.
Está constituido de elementos que el navegador interpreta y los despliega en la pantalla de acuerdo a su objetivo.
Existen elementos para desplegar imágenes sobre una página, enlaces que nos permiten dirigirnos a otra página, listas, tablas para mostrar datos, etc.
![Page 3: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/3.jpg)
¿Qué es necesario para crear una página HTML?Para crear y visualizar una página HTML se requiere un editor de texto y un navegador de internet (Internet Explorer, FireFox, Google Chrome, Opera, etc.).
En este curso utilizaremos: Sublime Text, Firefox, Opera, entre otros.
Los elementos HTML requieren una marca de comienzo y otra de finalización. <> </>
Todo aquello que está fuera de las marcas del lenguaje se despliega en pantalla.
![Page 4: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/4.jpg)
Estructura HTML5La estructura básica de una página HTML5 es:
<!DOCTYPE HTML> <html> <head> <title>Ejemplo1</title> </head> <body> <p>ejemplo1</p> </body> </html>
![Page 5: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/5.jpg)
AntecedentesHTML se creó en 1990, con objetivos de mostrar información. No existían fotos y otros efectos.
No se pensó, que iba a ser utilizado para áreas de ocio y aplicaciones. HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar en el futuro.
Sin embargo, pese a esta deficiente planificación, se han incorporando modificaciones con el tiempo, que hoy día permiten realizar aplicaciones.
![Page 6: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/6.jpg)
➔ A principios de 1990, se define el HTML en conjunto con el World Wide Web.
➔ En 1992, Pei-Yuan Wei presenta el primer navegador web, y se actualiza a HTML 2.
➔ El borrador del estándar HTML 3 fue propuesto por el recién formado W3C en marzo de 1995.
➔ Se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas, y mostrar fórmulas matemáticas complejas.
Antecedentes
![Page 7: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/7.jpg)
Antecedentes➔ En 1997, HTML 4 se publicó como
una recomendación del W3C.
➔ HTML 4 adoptó elementos específicos para aplicaciones, y permitió separar la parte estética, gracias a CSS y JavaScript.
➔ Desde el 2006, el W3C se interesó en el desarrollo de HTML5, marcando la evolución hacia otros dispositivos.
HTML5 actualmente continúa en evolución.
![Page 8: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/8.jpg)
HTML5HTML5 agrega nuevos elementos y atributos que reflejan los sitios web actuales, en donde se ha prestado atención la interoperabilidad entre dispositivos. (tabletas, celulares, notebooks, etc)
Podemos seguir los cambios que se hacen a la especificación del HTML5 en http://twitter.com/HTML5
Entender HTML5 es entender que hoy nos conectamos desde celulares, tablets, notebooks, etc.
![Page 9: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/9.jpg)
La evolución de Google Chrome¿Cuánto un navegador puede cambiar en 3 años? Google Chrome probó que este periodo es suficiente para una serie de perfeccionamientos en internet.
El navegador llegó al mercado en 2009, con la promesa de ser más veloz e intuitivo que la competencia.
Después de 16 meses del anuncio oficial, Chrome tenía 4,63% del mercado de los navegadores. Desde entonces Google no paró de crecer.
![Page 10: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/10.jpg)
Primera versión BetaGoogle Chrome tuvo su versión Beta anunciada en septiembre de 2008 con la divulgación de una historieta.
![Page 11: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/11.jpg)
Google ChromeCaracterísticas● La creación de Chrome tuvo en consideración
el nuevo escenario de la web, más interactivo y dinámico que en la época que los competidores habían sido creados.
● El proyecto del navegador fue elaborado con los siguientes objetivos: velocidad, estabilidad y seguridad.
● Otra diferencia de este navegador fue el mecanismo para mantener las pestañas en ejecución. Cada sitio o servicio es mantenido en un proceso independiente.
![Page 12: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/12.jpg)
Mozilla FirefoxEs un navegador web de código abierto desarrollado por la Corporación Mozilla. Usa el motor Gecko para renderizar páginas webs, el cual implementa actuales y futuros estándares web.Características. 1.Protección antiphishing: Cuando encuentres una página web que sea sospechosa de fraude Firefox te advertirá.2. Bloqueador de ventanas emergentes.Firefox te da control sobre las páginas que estás viendo, bloqueando ventanas emergentes molestas.
![Page 13: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/13.jpg)
Mozilla Firefox3. Búsqueda integrada. Viene con los motores de búsqueda de Google, Yahoo!, eBay, etc. 4. Marcadores dinámicos. Los marcadores dinámicos de permiten ver las noticias o titulares desde la barra de marcadores o desde el menú. 5. Sugerencias de búsqueda. Simplemente comienza a escribir en la barra de búsqueda, y una lista con sugerencias aparecerá. 6.Protección contra programas espías. Firefox no permitirá que una página web descargue, instale, o ejecute programas en tu ordenador sin tu consentimiento explícito.
![Page 14: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/14.jpg)
Fuente: http://gs.statcounter.com/#all-browser-ww-monthly-200812-201412
Estadísticas Navegadores en el Mundo.
![Page 15: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/15.jpg)
Mapa Mundial
http://gs.statcounter.com/#all-browser-ww-monthly-201411-201411-map
![Page 16: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/16.jpg)
Fuente: http://gs.statcounter.com/#all-os-ww-monthly-200812-201412
Estadísticas Sistemas Operativos en el Mundo.
![Page 17: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/17.jpg)
Sublime Text➔ Es un editor de código fuente escrito en
C++ y Python. ➔ Desarrollado originalmente como una extensión de Vim,
con el tiempo fue creando una identidad propia.
![Page 18: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/18.jpg)
Sublime TextCaracterísticas➔ Multi Selección: Hace una selección múltiple
de un término por diferentes partes del archivo.➔ Multi Layout: Trae siete configuraciones de plantilla
podemos editar en una sola ventana o hacer una división de hasta cuatro ventanas verticales o cuatro ventanas en cuadrícula.
➔ Soporte nativo para infinidad de lenguajes: Soporta de forma nativa 43 lenguajes de programación.
➔ Syntax Highlight configurable.➔ Búsqueda Dinámica: Se puede hacer búsqueda de
expresiones regulares o por archivos.➔ Auto completado y marcado de llaves: Se puede ir a la
llave que cierra o abre un bloque de una forma sencilla.
![Page 19: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/19.jpg)
Sublime Text - AtajosCtrl + D Seleccionar palabras.Ctrl + L Seleccionar líneas.Ctrl + A Seleccionar todo.Ctrl + Shift + M Seleccione todo dentro de las llaves { }.Ctrl y hacer clic en las líneas a seleccionar.Ctrl + L: Seleccionar la próxima línea.Ctrl + clic en varios sitios selecciona múltiples punteros para escribir o borrar en todos ellos.Ctrl + G: Poner el número de línea al que queremos ir.Ctrl + P: Abre la consola de comandos.Shift + F11: Activa el modo “freak” (antidistracción).Ctrl + ç: Escribe “//” para poner un comentario.
![Page 20: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/20.jpg)
Sublime Text - AtajosCtrl + Shift + A: Selecciona el código dentro de una etiqueta.Ctrl + Intro: Inserta una línea después de la actual.Ctrl + J: Une líneas.Ctrl + KU: Pone en mayúsculas el texto. Ctrl + KL: Pone en minúsculas el texto. Ctrl + H: Reemplazar texto.Alt + Shift + 2: Divide la ventana en 2 vistas.Ctrl + F2: Añade línea a favoritos. Para ir al siguiente favorito pulsamos F2, para ir al anterior Shift + F2.
![Page 21: 1.introducción a internet y html5](https://reader031.vdocuments.co/reader031/viewer/2022031919/55b06ef91a28abba278b474c/html5/thumbnails/21.jpg)
Alojar sitios en: Google Drive1.Subir los archivos y seleccionar un archivo.2.Clic en el botón Compartir.3.Clic en Avanzadas.4.Haz clic en Cambiar.5.Elige Sí: público en la Web y haz clic en Guardar.6.Antes de cerrar, copia el ID de documento de la URL en el campo de debajo de "Enlace para compartir". Comparte la URL con el formato "www.googledrive.com/host/[ID de documento].