Copia - 02_DS_C2_SC4_GI_T1_GEN
TLG Producción
Created on February 8, 2024
More creations to inspire you
LAYOUT ORGANIZATION
Presentation
TALK ABOUT DYS TEACHER-TEACHER
Presentation
TALK ABOUT DYS WITH TEACHER
Presentation
ESSENTIAL OILS PRESENTATION
Presentation
ANCIENT EGYPT FOR KIDS PRESENTATION
Presentation
CIRQUE DU SOLEIL
Presentation
YURI GAGARIN IN DENMARK
Presentation
Transcript
Lenguajes principales
Nombres de dominio
Organización W3C “World Wide Web Consortium”
Protocolo de Transferencia de Hipertexto
Web
Instrucciones
Menú
EMPEZAR
Seguramente en tu día a día te conectas a diferentes sitios para consultar información, comunicarte con familiares, amigos o personas del trabajo, conocer lo que pasa alrededor del mundo, entre muchas otras cosas. Esta interacción es posible gracias a la gran infraestructura conocida como la Internet, donde uno de los servicios más populares es la red de ancho mundial, conocida también como la WWW por sus siglas en inglés World Wide Web.
La Web y HTML
La Web
Instrucciones
Inicio
La web es el conjunto de documentos accesibles a través de Internet que tienen una estructura que puede ser entendida por los navegadores, por ejemplo, Microsoft Edge, Mozilla Firefox, Safari, Chrome, entre otros. Esta estructura tiene un formato conocido como HTML, que es un lenguaje de marcado de Hipertexto el cual abordaremos más adelante.
Web
Instrucciones
Inicio
La web utiliza un protocolo para que las entidades que solicitan y envían información puedan entenderse. Este protocolo es el Protocolo de Transferencia de Hiper Texto Cuando abrimos un navegador y queremos ver el contenido de alguna página web, escribimos una dirección en el navegador, ésta se traduce a una dirección IP, que es la dirección de un servidor en algún lugar del mundo que aloja eso que quieres consultar. En este sentido, se utiliza el protocolo HTTP para hacer la solicitud, y el servidor responde con información en formato HTML que el navegador sabe exactamente cómo desplegar en tu pantalla.
Protocolo de Transferencia de Hipertexto
W3C
Instrucciones
Inicio
Día con día surgen nuevas tecnologías, nuevas formas de comunicación con respecto a la web, que de no ser reguladas podrían salirse de control; es por eso que existen organizaciones como la W3C o World Wide Web Consortium por sus siglas en inglés, que es una comunidad internacional encargada de desarrollar estándares abiertos para asegurar un buen crecimiento a largo plazo de la web.
Organización W3C “World Wide Web Consortium”
Nombres de dominio
Instrucciones
Inicio
Un nombre de dominio es mucho más fácil de recordar que la dirección del servidor que queremos consultar, por ejemplo, ¿qué será más fácil de recordar “google.com” o algo como “108.177.122.139”?
Un concepto interesante asociado con la Web son los nombres de dominio.Un nombre de dominio se asocia a una dirección IP de un servidor de Internet, de tal forma que cuando escribimos en el navegador, por ejemplo, google.com, esto es traducido a una dirección IP de un servidor que aloja el buscador más utilizado en nuestros días.
Un nombre de dominio es mucho más fácil de recordar que la dirección del servidor que queremos consultar, por ejemplo, ¿qué será más fácil de recordar “google.com” o algo como “108.177.122.139”?
Los nombres de dominio son nombres fáciles de recordar que se asocian a una dirección IP de un servidor de Internet. Se utilizan estos nombres, ya que es mucho más fácil de recordar Google que 108.177.122.139, ¿estás de acuerdo?
Nombres de dominio
Lenguajes
Instrucciones
Inicio
Descarga los archivos en el apartado de archivos adjuntos
La web está formada por documentos, que son recursos accesibles a nivel global y toda esta información está estructurada en 3 lenguajes principales:
- HTML
- CSS
- JavaScript
Lenguajes principales
HTML
Instrucciones
Inicio
Descarga los archivos en el apartado de archivos adjuntos
El lenguaje HTML, es un Lenguaje de Marcado de Hipertexto, que nos sirve para definir la estructura de un documento. El HTML es un lenguaje de marcado, es decir, va “marcando o señalando” qué es cada parte en el documento, este lenguaje trabaja con etiquetas. Así como en el mundo real la gente marca o etiqueta sus cosas para diferenciarlas de otras, HTML utiliza etiquetas que podemos identificar con los caracteres de “< menor que” y “> mayor que”.
Lenguajes principales
Instrucciones
Inicio
Descarga los archivos en el apartado de archivos adjuntos
Por ejemplo, todo el contenido del documento HTML lo podemos encontrar dentro de las etiquetas <html> y </html>:
- La mayoría de las etiquetas tienen una etiqueta de inicio, por ejemplo <html> y otra de cierre </html>.
- La etiqueta de cierre lleva el mismo nombre de la etiqueta de inicio, pero se diferencia por llevar una / justo después del símbolo de “<”.
Lenguajes principales
Instrucciones
Inicio
Descarga los archivos en el apartado de archivos adjuntos
Como puedes ver, HTML define la estructura del documento y detalla lo que es cada parte de la información, si es un encabezado, un párrafo, una tabla de datos, etc. Es importante que identifiques cómo están estructurados los documentos que componen la web, ya que vamos a utilizar esta estructura más adelante.
Lenguajes principales
CSS
Instrucciones
Inicio
Descarga los archivos en el apartado de archivos adjuntos
CSS es un lenguaje de hojas de estilo, las siglas vienen del inglés Cascading Style Sheets que significa hojas de estilo en cascada, como su nombre lo indica, se utiliza para darle estilo a un documento, es decir, define qué colores tendrá cada elemento como: márgenes, tipo de fuente, tamaño, espaciado entre elementos, barras de navegación, en fin, el diseño general de cómo se verá el documento.
Lenguajes principales
Javascript
Has finalizado la lectura. Continúa con el siguiente apartado.
Descarga los archivos en el apartado de archivos adjuntos
Javascript es un lenguaje que hace posible que la gente interactúe con los documentos HTML. Hace muchos años, los documentos que podíamos visitar eran estáticos, con esto nos referimos a que siempre que visitabas un sitio de Internet el contenido no cambiaba y la gente que visitaba esos sitios no podía interactuar con ellos.Es un lenguaje queAgrega funcionalidad y dinamismo a este tipo de documentos, nos permite hacer actualizaciones de contenido dentro del sitio, almacenar datos, agregar funcionalidades, por ejemplo, gráficas o consumir información de otros sitios entre muchas otras cosas.
Lenguajes principales
Para ver más, visitar https://storyset.com
Para ver más, visitar https://elements.envato.com/es/graphics/similar-to-A5WP8AF
Ilustraciones
Ejemplos de mini ilustraciones
Iconografía
Clic en el ícono
En el ejemplo se mostraron solo algunas de las etiquetas más básicas de HTML, si quieres profundizar en esto, te compartimos un tutorial con el podrás practicar https://tutorialehtml.com/es/tutoriales-html-tutorial-html-completo/
Podemos ver que la primera línea es un tag que indica que tipo de documento es, después viene la etiqueta <html> que encierra dos partes principales: <head> y <body> que son el encabezado y el cuerpo del documento respectivamente.
<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Esto es un encabezado</h1> <p>Esto es un párrafo</p> </body> </html>
Al final de este módulo te compartimos un enlace al final de este módulo por si quieres profundizar en este tema.
En el ejemplo se mostraron solo algunas de las etiquetas más básicas de HTML, si quieres profundizar en esto, al final de la lección te proporcionaremos algunos tutoriales con los que podrás practicar.