1.introducción a internet y html5

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

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

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

Estructura HTML5
La estructura básica de una página HTML5 es:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<p>ejemplo1</p>
</body>
</html>

Antecedentes
HTML 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.

➔ 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

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.

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

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.

Primera versión Beta
Google Chrome tuvo su versión Beta anunciada en
septiembre de 2008 con la divulgación de una historieta.

Google Chrome
Caracterí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.

Mozilla Firefox
Es 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.

Mozilla Firefox
3. 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.

Fuente: http://gs.statcounter.com/#all-browser-ww-monthly-200812-201412
Estadísticas Navegadores en el Mundo.

Mapa Mundial
http://gs.statcounter.com/#all-browser-ww-monthly-201411-201411-map

Fuente: http://gs.statcounter.com/#all-os-ww-monthly-200812-201412
Estadísticas Sistemas Operativos en el Mundo.

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.

Sublime Text
Caracterí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.

Sublime Text - Atajos
Ctrl + 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.

Sublime Text - Atajos
Ctrl + 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.

Alojar sitios en:
Google Drive
1.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].

1.introducción a internet y html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Similar a 1.introducción a internet y html5

Similar a 1.introducción a internet y html5 (20)

Más de Ramiro Estigarribia Canese

Más de Ramiro Estigarribia Canese (20)

Último

Último (20)

1.introducción a internet y html5