1.introducción a internet y html5

21
1.Introducción a Internet y HTML5 Ramiro Estigarribia Canese

Transcript of 1.introducción a internet y html5

Page 1: 1.introducción a internet y html5

1.Introducción a Internet y HTML5

Ramiro Estigarribia Canese

Page 2: 1.introducción a internet y html5

¿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

¿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

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

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

➔ 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

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

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

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

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

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

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

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

Fuente: http://gs.statcounter.com/#all-browser-ww-monthly-200812-201412

Estadísticas Navegadores en el Mundo.

Page 16: 1.introducción a internet y html5

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

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

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

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

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

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