curso html5 desde 0, Guías, Proyectos, Investigaciones de Tecnología

¡Descarga curso html5 desde 0 y más Guías, Proyectos, Investigaciones en PDF de Tecnología solo en Docsity!

Table of Contents

Presentación

Contribuciones Markdown ¿Qué vamos a necesitar?

Conceptos básicos

Alojamiento y servidores HTTP Navegadores URLs Peticiones HTTP Ejercicio Recursos

HTML5: Primeros pasos

Introducción a HTML Etiquetas Anidación Estructura básica de una página Etiquetas básicas Ejercicio Recursos

Chrome DevTools

Pestaña network Pestaña elements Pestaña sources Configuración Ejercicio Recursos

HTML5: Mi Curriculum Vitae

Etiquetas - Parte 2 Anidación - Parte 2 Validación y accesibilidad

JS: Primeros pasos

Variables Operadores Consola de Chrome DevTools Ejercicio Recursos

JS: Controlando el flujo

Estructuras de control Depurando con Chrome DevTools Objetos, funciones y ámbitos Ejercicio Recursos

JS: Trabajando como un profesional

Window & Document Peticiones AJAX Expresiones regulares Aplicaciones web offline Bibliotecas de terceros Ejercicio Recursos

Presentación

Este curso es gratuito y lo puedes realizar incluso si no sabes nada de programación , sólo hace falta tener ganas de aprender. A pesar de esto, también puede serte útil si ya sabes HTML pero quieres perfeccionar o refrescar tus conocimientos sobre HTML5, CSS3 o JavaScript.

A lo largo del mismo te voy a:

Enseñar los elementos más comunes de HTML5, CSS3 y JavaScript, osea los que usaremos el día día. Mostrar dónde podrás resolver tus dudas cuando tengas problemas. Explicar cómo trabajar con algunas de las herramientas que usan los profesionales del mundo real como son Github o las herramientas para desarrolladores de Google Chrome.

Es importante saber que en el mundo de la programación hay muchas formas de resolver un mismo problema, y que todas ellas pueden ser igualmente válidas. Dicho esto, quiero aclarar que el objetivo del curso no es aprender todas y cada una de las formas de resolver un problema (esto se va aprendiendo con años de práctica), y es por ello que no entraré en profundidad en todos y cada uno de los elementos y características de cada lenguaje.

Las definiciones estarán simplificadas , esto está hecho a conciencia ya que como decía antes, no he querido asumir que tengas ningún conocimiento previo sobre desarrollo web. Por eso, para facilitarte la comprensión y evitar distraerte del objetivo del curso, te explicaré conceptos en muchas ocasiones que no serán 100% precisos pero que sí correctos.

En muchas ocasiones encontrarás enlaces a la Wikipedia , he elegido hacerlo así por varias razones:

1. Usa un lenguaje bastante coloquial
2. Incluye enlaces a las palabras más complejas
3. Son definiciones consensuadas en las discusiones

A pesar de esto incluiré enlaces al W3C con las definiciones formales, aunque puede que estas sean más difíciles de entender.

Así que no tomes todas las definiciones al pie de la letra , tómalas como definiciones lo suficiente buenas como para ayudarte a entender el contexto. De todos modos, siempre que se dé este caso te añadiré un enlace a un recurso con más información o añadiré un superíndice con aclaraciones al final de la página.

Presentación

Además si consigues terminar el curso sin ninguna duda , el día que estés haciendo un proyecto y algo no te funcione sabrás mucho mejor por dónde empezar a buscar los errores.

Y si te sientes cómodo usando Github, puedes hacer un pull request al repositorio resolviendo cualquier error que encuentres.

Autor(es)

Mi nombre es Raúl Jiménez Ortega, he creado este curso basándome principalmente en mis años de experiencia haciendo webs (llevo desde 1999) y dando formación (desde 2009), pero además he revisado las mejores fuentes que conozco para seleccionar lo mejor de cada curso/tutorial que he encontrado en estos años en Internet.

Aunque inicialmente me he lanzado sólo a crear este curso, mi objetivo es animar a que otros profesionales aporten su granito de arena para mejorar el contenido y mantener este curso actualizado durante mucho tiempo, es por eso que he decidido liberar este libro licenciándolo como Creative Commons (CC-BY-NC-SA 4.0 International).

En el siguiente apartado veremos las diferentes maneras de contribuir a mejorar el curso. Por supuesto, las personas que contribuyan tendrán su reconocimiento no sólo en Github sino también dentro de los contenidos del libro.

Motivación - ¿Por qué?

¿Por qué otro curso de HTML/HTML5?, pues las razones que me han llevado a lanzarme a esta aventura son:

1. Compartir los trucos y consejos : a lo largo de estos años he ido aprendiendo muchos trucos y muchas lecciones sobre cómo ser más productivo y me gustaría compartirlos contigo.
2. Asentar una buena base : después de revisar muchos cursos (algunos de ellos muy buenos), tengo la sensación de que ninguno explica todos los conceptos necesarios para crear una buena base que te permita sentirte cómodo a la hora de continuar creciendo por tu cuenta.
3. Creo que los tiempos han cambiado : y creo que hay muchísimas personas con mucho potencial a las que saber HTML, CSS y JavaScript les "daría alas" y les abrirían muchas puertas profesionales.
4. Disfruto compartiendo lo que sé y ayudando a los demás : siempre quise montar una empresa para crear algún producto que mejorase aunque fuese un poco la vida de miles/millones de personas, pero después de 6 años me he dado cuenta de que

Presentación

también es posible cambiar la vida de muchas personas enseñándoles lo que sé.

Todo esto ha sido más que suficiente para que decida a dedicar muchas horas (y cariño) de mi tiempo libre para ir creando poco a poco los contenido de este curso.

Aclaraciones:

1. A lo largo de todo el libro usaré el masculino por facilitar la lectura evitando los: "seguro/a", o los "segur@", espero que nadie se ofenda ;-P.
2. Un programador front-end no es más que un programador que domina HTML, CSS y JavaScript.

Presentación

Para "poder editar" una página (aclaración: en realidad lo que estarás haciendo es enviarme una propuesta de mejora que tendré que revisar y aceptar ), hace falta tener una cuenta y estar identificado en Github.

Por último, añadir que los contenidos están escritos en el lenguaje de marcas Markdown que veremos en la próxima lección.

Contribuciones

Ejercicios

Estado de las tareas: Waffle | Github

Por definir.

Página web

Estado de las tareas: Waffle | Github

Por definir.

Aplicaciones móviles

Estado de las tareas: Waffle | Github

Por definir.

Contribuciones

¿Qué vamos a necesitar?

Un navegador y un editor de código (o editor de texto), en este curso usaremos Google Chrome porque incluye ambas herramientas (navegador y editor), y porque además considero que es más didáctico y te ayudará a asimilar mejor los conceptos.

Es habitual encontrar profesionales que usen otros programas como: Sublime Text, Atom.io, Brackets, WebStorm, IntelliJ, ... pero nosotros de momento no usaremos ninguno de ellos.

Nota : Es posible que hayas oído hablar de Dreamweaver, Frontpage, Aptana, etc. Personalmente no te recomiendo ninguno de ellos para aprender porque incluyen botones que introducen código, cosa que muchas veces nos incita a introducir código innecesario o código que no sabemos qué significa, y por tanto que no sabremos arreglar en caso de que contenga algún fallo.

El tercero no lo recomiendo porque además de ser un programa que consume bastantes recursos, considero que como decimos habitualmente en España: es matar moscas a cañonazos.

¿Qué vamos a necesitar?

Conceptos básicos

En esta primera lección vamos a ver qué son y cómo funcionan:

Los servidores web y HTTP Los navegadores Las URLs Peticiones HTTP

Por tanto empezaremos por aprender los conceptos fundamentales a la hora de entender el funcionamiento de una página web para adquirir una base que nos permita entender de dónde pueden venir los errores que cometamos en el futuro.

Es importante conocer e interiorizar bien estos conceptos ya que los usaremos y nos los encontraremos continuamente tanto en este curso como en cualquier otro recurso de Internet.

Si crees que ya dominas estos conceptos puedes probar a hacer el ejercicio tipo test de esta lección. Si sacas un 100% de aciertos puedes pasar a la siguiente lección, sino te recomiendo que no te la saltes.

Conceptos básicos

Fuente: w3techs - 6 de Enero de 2016

Aclaraciones:

1. No siempre tiene que ser con un navegador, puede ser con otro tipo de software.
2. Hay muchos tipos de hosting, aunque a nosotros nos vale con esta definición
3. También podría estar conectado a una intranet (o red local)

Alojamiento y servidores HTTP

Navegadores

Un navegador es un programa (complejo) que entiende y transforma el código que recibe desde un servidor en algo entendible para un humano (una página web, imágenes, etc).

Entre algunas de las responsabilidades que debe garantizar un navegador se encuentran:

Integridad : para transmitir páginas web se utiliza una forma de comunicación llamada HTTP (o protocolo HTTP). Este protocolo es el lenguaje común entre el servidor y el navegador web. Seguridad : dado que los navegadores reciben código escrito normalmente por otras personas, el navegador implementa algunas reglas de seguridad. Estas reglas se definen a diferentes niveles: durante la conexión entre las máquinas y el envío (HTTPS), al ejecutarse en el navegador (CORS), etc.

Optimización : al mismo tiempo que reciben la información, los navegadores integran mecanismos para acelerar la carga y mejorar la experiencia del usuario, por ejemplo acelerar el tiempo de carga utilizando una memoria de almacenamiento temporal (memoria caché), o comprimiendo los mensajes durante las comunicaciones.

Aunque existen multitud de navegadores, nosotros usaremos Google Chrome durante todo el curso.

Aquí te dejo además una gráfica que muestra la cuota de uso de los navegadores más populares:

Navegadores

URLs

Para acceder a un fichero/recurso a través de un navegador usamos la URL (Uniform Resource Locator). Cualquier URL sigue el siguiente formato:

scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

Aclaración : En informática se suelen utilizan los corchetes [ ] para indicar que lo que se encuentra contenido entre ellos es opcional.

Vamos a hacer un pequeño repaso a cada una de las partes de la URL:

scheme (obligatorio) : este suele ser "http" o "https", aunque podría ser también: file, ftp, mailto, data, skype, etc. user:password@ : usuario y contraseña (p.e. hhkaos:mipass@). Esto por ejemplo se utiliza en otro tipo de conexiones FTP o SSH que requieren identificación. También se puede usar para conectar a sistemas que usen .htpasswd, podremos identificar que una página está protegida con este sistema cuando al acceder nos aparece una ventana parecida a esta:

host : nombre de dominio (p.e. rauljimenez.info), subdominio o dirección IP del servidor web (p.e. 79.82.123.1) port : puerto (si no se especifica ninguno se usa el 80 por defecto) path (obligatorio) : ruta al fichero (p.e. blog/index.php) query : parámetros/variables (p.e. preview=true) fragment : punto de anclaje (p.e. #introducción)

Así una URL válida podría ser:

URLs

https://hhkaos.gitbooks.io/cursohtml5desdecero/content/chapter1.html#primeros-pasos-co n-html

Donde:

scheme = https user:password@ = (vacío) host = hhkaos.gitbooks.io port = 80 path = cursohtml5desdecero/content/chapter1.html query = (vacío) fragment = #primeros-pasos-con-html

Otro ejemplo de URL válida podría ser: file:///Users/hhkaos/index.html

En este caso le estamos indicando al navegador que acceda a un fichero que se encuentra en nuestro disco duro.

Aclaraciones:

1. Un subdominio es un prefijo que le ponemos al dominio, por ejemplo: mail.google.com, y se puede configurar para que apunte a distintas IPs o "carpetas de nuestro disco duro". Así por ejemplo www sería también un subdominio
2. Los puertos son números enteros que nos permiten especificar a qué " puerta " o " canal " de una máquina nos queremos conectar. Por ejemplo en la web se suele usar el 80 para los servidores HTTP (aunque Skype también lo usa), el 21 para el FTP, el 22 para el SFTP, etc
3. Un punto de anclaje nos permite introducir una URL al abrirla hace scroll hasta un punto de la página determinado (ejemplo).

URLs