Ip: Es el identificador numérico de una página web, es único y representa la dirección del ordenador que contiene la pagina web. Dominio web/ URL: Uniform Resources Locator (localizador uniforme de recursos). Es el nombre asociado a la IP, y la usamos para solicitar recursos, en nuestro caso sitios web. DNS: Domain Name System (sistema de nombres de dominio). Es un servidor cuya principal función es traducir el nombre de dominio a su identificador único (IP). Sitio web: Es un conjunto de uno varios recursos web, que están alojados en el mismo dominior. Servidor web: Es el programa encargado de mandar la información pedida por el cliente Hosting: Es donde se almacena el servidor web y los recursos Petición: Es la acción de pedir recursos a un servidor Que es HTML (Hyper Text Markup Languaje)? En un lenguaje de marcado de hypertexto (Hyper Text Markup Languaje), por lo que no es un lenguaje de programación, sirve para estructurar tu página web. Etiquetas de HTML: <h>: es la que se usa para los titulos, y posee 6 niveles distintos <p>: es la que se usa para los parrafos <header>: es una etiqueta usada generalmente en la parte superior de nuestra página web, y se usa para colocar contenido como: el logo de tu pagina, menu de la web, nombre del autor, un titulo, etc. <footer>: se usa como un pie de página en tu pagina web. <section>: se usa para agrupar contenido relacionado entre sí. Cuando creamos bloques que forman parte de un bloque total usaremos section <article>: representa contenido independiente, es decir, que se podria leer en cualquier otra parte y tendria sentido por sí mismo. <aside>: se usa para colocar información relacionada con el contenido de la pagína web pero no forma parte del contenido principal. Elementos de bloque y elementos de línea Elementos de bloque Son aquellos que abarcan todo el ancho posible en una página, impidiendo que otro elemento se coloque al lado de ella. Algunos elemento de bloque: <h> <p> <aside> <section> <article> <header> <footer> Elemento de línea Son aquellos que abarcan el ancho mínimo en una pagína web, por lo que pueden tener otros elementos al lado de esta, siempre y cuando tengan el espacio necesario para estar los dos o más elementos de línea. Algunos elementos de linea: <em>: enfasis <strong>: mas enfasis <small>: menos enfasis que el texto normal <br>: forzar un salto de línea <wbr>: forzar un salto de línea si hiciera falta(si tienes guiones en tu página web en navegador lo toma como un wbr) <time>: se usa para presentar un contenido de hora y fecha <i>: italic <b>: bold <u>: underline <sup>: superíndice <sub>: subíndice <a>: anchor <span>: como un div pero en linea Atributos Son palabras especiales, utilizadas dentro de las etiquetas de apertura, para controlar el comportamiento del elemento. La forma de colocarlo seria así: Atributo + = + “ + valor + ” Algunos de los atributos mas importnates son: class id title data-(aquí colocan lo que quieran poner y sin los parentesis) Enlaces Tienen como objetivo conectar una pagína web con otra, tiene el atributo obligatorio href y a ese atributo como valor se le dara la ruta del recurso al que queremos ir . Tambien tiene el atributo target que sirve para escoger como queremos visualizar el recurso que solicitamos. Existen dos tipos de enlaces: enlaces absolutos y enlaces relativos Rutas absolutos Tienen un protocolo, http o https y son unicas en la red, ademas, se usan normalmente para mandar al usuario a un recurso que no se encuentra en nuestro servidor (recurso externo). Rutas relativas Pueden ser relativas al punto en donde nos encontramos o relativas a la raiz del proyecto, ademas, no usan protocolo. Se usan para mandar a un recurso que se encuentre en nuestro servidor (recurso interno). Si el recurso se encuentra al mismo nivel (en la misma carpeta) pondremos unicamente el nombre del archivo. Si necesitamos salir de la carpeta actual usaremos ../ y se pondra uno por cada nivel (carpeta) del que queremos salir. Si necesitamos entrar a una carpeta que se encuentra en el mismo nivel (carpeta) debemos colocar el nombre de la carpeta mas un / y luego se pondra el recurso al que queremos entrar. Rutas relativas a la raiz del proyecto Estas sirven para que cuando coloques un enlace relativo, este no empice a buscar desde el punto en que estas si no que buscara desde la raiz del proyecto (la primera carpeta de toda tu página) para crear una ruta relativa a la raiz el enlace debe empezar con un / y luego colocas a donde quieras ir, recordando que estas desde la raiz del proyecto. Si solo colocas / como enlace el servidor te llevara al archivo index. Atributos de los <a> target: define donde se abrira el recurso solicitado. El valor por defecto es _self Algunos de los valores son: _self : Es el que viene por defecto, y lo que hace es que te manda a la ruta especificada y te saca de donde estabas. _blank: crea una nueva ventana y en ella te manda al enlace especificado. download: Atributo booleano, sirve para descargar el recurso solicitado. IMPORTANTE, el recurso debe estar en tu mismo servidor. Navegación con anclas La navegación con anclas permite ir a un punto especifico de una página web, para esto hay que colocar como ruta el recurso y luego la id de la etiqueta a donde se quiere ir. En caso de que ya estemos en el recurso pero queremos desplazaronos a una parte especifica de el, solo colocaremos la id como enlace. Listas en HTML Las listas en HTML sirven para listar contenido. En función del tipo de contenido de nuestra lista tenemos tres tipos de listas. ul (unordered list) : se utilizan cuando el orden de los elementos no influye (lista de compra). ol (ordered list): se utilizan cuando el orden de los elementos es importante (top 10) dl (definition list): se utilizan para hacer una lista de definición (diccionario). Para colocar cada uno de los elemento de las ol y ul hay que colocarlos dentro de la etiqueta li (list item). Atributos para las listas Para ol: type: estilo de enumaración(1, A, a, I, i). start: inicio de las secuencias ( un número). Para los ul: type: estilo de los items (disc, square, circle). Tablas en HTML Las tablas en HTML sirven para mostrar contenido tabulado. La estructura básica de una tabla se compone de: table: etiqueta que encierra una tabla tr (table row): etiqueta que construye una fila td ( table data) : etiqueta que construye una celda tip: en número de celdas dentro de un tr establecerá el número de columnas de la tabla. Estructura extra de una tabla Caption: para colocar los títulos de las tabla. Es una etiqueta opcional, y según la especificación esa etiqueta se coloca justo después de la etiqueta <table>. <thead>: para colocarle cabecera a la tabla. <th>: se usan para colocar las celdas dentro de una cabecera. Dentro tendremos una etiqueta <tr> normal, pero en el caso de las celdas, las estableceremos con la etiqueta <th> en lugar de <td>. <tbody>: en contenido de la tabla debe ir dentro de esta etiqueta para representar el cuerpo de tabla, por lo que siempre que se use la etiqueta <thead> se debe usar esta etiqueta para separar la cabecera con el cuerpo de la tabla. <tfoot>: se usa para colocar un píe de página en la tabla. Podemos colocar un <tfoot> para establecer un pie de tabla , esto es algo que algunas tablas tienen como una suma de cantidades o total. Para hacer que las celdas ocupen más de una fila o más de una columna tenemos 2 atributos: Rowspan: sirve para que una celda ocupe más de una fila, el valor por defecto es 1 Colspan: sirve para que una celda ocupe más de una columna, el valor por defecto es 1 <Colgroup>: para seleccionar una columna. Nos permite seleccionar una columna en concreto. Dentro pondremos tantas etiquetas col como columnan tengamos, cada etiqueta col equivaldrá a una columna siguiendo el mismo orden que tienen en la tabla. Si necesitamos que una etiqueta <col> agrupe más de una columna, tenemos el atributo span, que funciona exantamente igual que rowspan y colspan. Etiquetas importantes de bloque <address>: se utiliza para aportar información de contacto para el <article> mas cercano o para todo el <body>. <blockquote>: se utiliza para marcar las citas de otros autores o documentos, se puede incluir el atributo cite para poner un enlace al documento original o fuente. <pre>: se utiliza para tener código preformateado que se necesita ser representado igual que se escribió. <div>: se usa como división del documento, semánticamente no significa nada, es un contenedor genérico que se usa generalmente para dar estilos a través de CSS o para usar algo denominado “delegación de eventos” en javascript. <hr>: horizontal rule, se utiliza para decirle al navegador que vamos a cambiar de tema. Etiquetas importantes de linea <span>: es un contenedor de línea, equivalente a div, se suele usar para encerrar palabras o pequeños textos y darles estilos a través de CSS o localizarlos desde javascript. Semánticamente no significa nada. <q>: es el equivalente a blockquote, significa quote, por eso el de bloque se llama block – quote. <code>: sirve para encerrar código que queremos representar visualmente, suele ir unido con la etiqueta <pre>. Formularios La estructura básica de un formulario se compone de 4 elementos: <form>: es la etiqueta que engloba el formulario<label>: sirve para escribir el nombre del campo a rellenar. Si tiene el atributo for al cual se le indica una id lo que hara sera emparejar al label con su input correspondiente. Otra forma de emparejar a un label con un input es colocando al input dentro del label. <input>: sirve para crear un campo que le servira al usuario para colocar información <button>: crea un boton, el cual permite mandar el formulario. IMPORTANTE: los formularios siempre deben tener el atributo name por que si no no se pasaria ninguna información. Atributos que sirven para la etiqueta <form>: action: permite asociar una direccion web a la que dirigirse despues de presionar el boton. Atributos que sirven para la etiqueta <label>: for: sirve para emparejar al label con su input correspondiente Atributos que sirven para la etiqueta <input>: type: sirve para establecer de que tipo quieres que sea tu input. value: para poner un mensaje a la etiqueta cuando es de tipo button. id: sirve para emparejar a un input con un label. Tipos de input: button: se comporta igual que un botón <button> color: se utilza para especificar un color. date: se utiliza para introducir una fecha. datetiem: obsoleto. datetime-local: fecha y hora, no funciona en firefox. email: se utiliza para introducir un email. hidden: campo oculto, puede contener valor pero no se mostrará. month: se utiliza para introducir un mes. number: se utiliza para valores númericos. password: se utiliza para contraseñas. range: se utiliza para establecer un rango. Atributos de <range>: o step o min o max reset: se utiliza para resetear el formulario. search: se utiliza para las barras de búsqueda. submit: se utiliza para enviar el formulario. tel: se utiliza para introducir números tlefónicos. text: valor por defecto. time: se utiliza para introducir una hora. url: se utiliza para introducir URLs. week: se utiliza para introducir el número de semana del año. Inputs que nos permiten seleccionar elementos radio: permite seleccionar una única opción de una lista de opciones relacionadas. checkbox: permite seleccionar varias opciones de una lista de opciones relacionadas Atributos que sirven para estos tipos de input: o name o value o checked Etiqueta que nos permite crear listas <select>: crea una lista de opciones en donde podemos seleccionar una o varias opcones. Cada opción irá dentro de una etiqueta <option> </option>. Si tenemos muchas opciones podemos ordenarlas por categorías a través de la etiqueta <optgroup> con el atributo label para nombrar la categoría. <datalist>: funciona de forma similar a un <select> pero con la diferencia que a este se le puede agregar un filtro a la hora de buscar una opción en la lista. Primero se debe crear un <input> de tipo “list” al cual se le debe agregar el atributo list y alli se debe colocar la id que tenga la etiqueta datalist. Más elementos dentro de un formulario fieldset: se utiliza para agrupar elementos dentro de un formulario legend: representa un etiqueta para el contenido del fielset file: este input se utiliza para cargar archivos y mandarlos desde un formulario meter: representa un valor dentro de un rango conocido. (posiblemente nunca lo use) progress: representa el progreso dentro de una tarea. (posiblemente nunca lo use) textatarea: se utiliza para introducir texto en un formulario. Atributos más usados en los formularios placeholder: da una pista de lo que el usuario tiene que introducir. required: hace que un campo sea obligatorio. readonly: hace que un campo sea de solo lectura. disabled: desactiva el campo, no se podra escribir en el, ademas no se mandara lo que haya escrito en el cuando se envie el formulario. min – max: establece el maximo y minimo de un campo númerico. minlenght – maxlenght: establece un minimo y maximo de caracteres en un campo de texto. selected: equivale a un checked en los <select>, sirve para establecer una opción por defecto. autofocus: sirve para poner el foco por defecto en un campo al cargar el formulario. Envio GET VS POST Es importante saber la diferencia de mandar la informacion a traves del metodo GET vs POST. GET: es el metodo por defecto y se utiliza cuando entramos a una página por medio de la URL. La informacion que se esta pasando del formulario se puede ver en la url a la hora de mandarse. POST: es el envio de formularios a traves de la parte de “atras” de la página por decirlo de alguna manera. Si se intenta mandar la informacion de un formulario pero no encuentra la dirección a donde se va mandar aparece el error 405, ya que a intentado mandar la información pero no ha llegado por que no ha localizado la dirección a donde lo hiba a mandar. Imágenes Los formatos de imágenes para web los podemos clasificar en dos tipos: Vectoriales: o svg (Recomendado siempre que se pueda usar). Hay dos formas de colocar una imagen svg en nuestro documento html 1) colocando en el atributo src la ruta de nuestra imagen svg. 2) entrando a la imagen en donde nos saldrá el código necesario para pintar esa imagen y si lo pegamos en nuestro documento HTML también saldrá la imagen. Los svg son un formato de archivo que solo se pueden abrir en una navegador, no es una imagen normal si no son coordenadas que se les está dando al computador para que pinte. Si quieren modificar el tamaño de la imagen usen la primera opción, pero si quieren hacer otro tipos de cosas (cambios de colores, animación, etc...) deben usar la segunda opción. Mapa de bits: o jpg. o png 8 y 24 (si necesitáis transparencia). o gif (si necesitáis una imagen animada). o webp (el formato mas ligero, ademas acepta transparencia e imágenes animadas). Hay navegadores antiguos que no soportan webp, para esos casos se tendran que hacer un folback (no se si está bien escrito), lo cual significa que si le das una imagen en formato webp y no la soporta pues que puedas darle otra que colocar, la cual se la daremos en otro formato (jpg, png o gif, dependiendo de lo que se necesite). Como insertar imágenes en HTML Se usa la etiqueta <img> en la cual se usaran dos atributos principales: src y alt src: es donde secoloca la ruta donde se encuentra la imagen. alt: se coloca una descripcion, y sirve en caso de que por algun motivo la imagen falle y no se pueda mostrar, para que salga por lo menos la descripción que colocamos en el atributo para que pueda tener el usuario una idea aserca de lo que habia en la imagen. Device pixel ratio Este concepto representa la relacion que hay entre los pixeles reales que tiene el dispositivo y los pixeles que tiene para poder pintar Tip: la palabra viewport representa el espacio que tenemos disponible para dibujar y DPR significa (Device pixel ratio) Como usar el atributo srcset Para que puedas usar una imagen u otra en función del DPR, existe el atributo srcset el cual consiste en que puedes colocar mas de una ruta de una imagen, para coloar las rutas hay que separarlos por comas y si quieres que salga uno en funcion de un DPR en especifico despues de haber agregado la ruta de la imagen debes agragar un espacio y poner el DPR que quieres que tenga la página cuando salga esa imagen y luego “x”. Etiqueta <picture> Funciona similar al atributo srcset pero nos da mas opciones, a esta etiqueta hay que agregarle dentro otra etiqueta, la etiqueta <source>, y dentro de esta hay que meter cada una de las rutas de imágenes que queremos colocar, ADEMAS, hay que colocar un folback (no se si lo escribí bien) y se hace colcando dentro de la etiqueta <picture> la etiqueta <img> en donde pondremos la imagen de respaldo, colocar el folback es obigatorio ya que si no se coloca no se vera nada aunque ya hayas añadido una ruta de imagen en la etiqueta <source>. Si no se va a usar la etiqueta <picture> pero si se usara el atributo sercset se recomienda poner un foldback(no se como se escribe) por si el navegador donde se esta abriendo el programa no soporta el atributo. Atributos para source: media: se puede colocar el ancho que debe tener la pagina para cargar la imagen de respaldo (se debe colocar entre parentesis) ejemplo: media="(max-width:1200px)" Etiqueta <audio> Para intorducir audio hay que colocar la etiqueta <audio> y en el atributo src se colocara la ruta o fuente del audio, pero no se vera nada en el navegador, eso es porque hay que añadirle el atributo booleano controls para que así salga un reproductor para reproducir el audio Etiqueta <video> Funciona de forma similar que la etiqueta <audio>, del mismo modo si no se le añade el atributo controls no se podra reproducir el video. Atributos de la etiqueta <audio> y <video> controls: para que salga el reproductor del audio o el video. autoplay: para que se reproduzca automaticamente el audio cuando se entre a la página. La atributo autoplay es posible que no funcione cuando estemos en un servidor real ya que algunos navegadores lo bloquean ya que podria ser molesto el audio que se esté reproduciendo, sin embargo si se le añade la atributo muted no se bloqueara el atributo autoplay y se seguira reproduciendo el audio. muted: para mutear el audio o video. loop: para que en caso de que se termine el video o audio que se vuelva a reproducir. Atributo unico de <video> poster: le puedes dar una portada al video en cuestión. iframe Un iframe es agarrar una web e introducirla dentro de la nuestra, sirve para cuando queramos traer contenido de otra web a la nuestra. Etiqueta <figure> Sirve para colocar contenido el cual no esnecesario para entender el articulo o documento pero si esta relacionado con el flujo principal. Ademas una etiqueta opcional para colocar dentro de <figure> es la etiqueta <figcaption> la cual sirve para colocar una breve descripcion de la figura que esté dentro de la etiqueta <figure>. Etiquetas <meta> La mayoría de las etiquetas <meta> van a contar con dos atributos: name y content. name: para especificar que tipo de meta dato le estamos dando al navegador. content: el contenido del meta dato en cuestión. Tipos de <meta>: <meta> (viewport): <meta name="viewport" content="width=device-width, initial-scale=1.0"> Su funcion es para cuando trabajamos con diseños que se adpaten a moviles, sin ella todo el tema de adaptabilidad de nuestrasitio web no funcionaría. <meta> (description): Sirve para coloar un contenido que servira como descripcion de tu página a la hora de buscarla en algún navegador. <meta> (author): Permite colocar el nombre de quien realizo la página web. favicon Un favicon seria la imagen que se vera en la parte izquierda de la pestaña de la página web en la que hallas entrado. La forma mas simple de agregarlo seria que en el <head> se coloque la etiqueta <link> (un link con las atributos para colocar un favicon) y alli se coloca la ruta de la imagen que quieres colocar y listo (la imagen puede tener formato jpg, png e ico). Pero esto funcionara de forma correcta solamente si se esta viendo desde un navegador actulaizado y si no se está ingresando desde un telefono a la página. Por lo cual algo recomendado es entrar a favicon-generator.org y darle una imagen para que cree un conjunto de imágenes para que se pueda ver en los dintintos sistema y dispositivos que existen. TIP: si presionas en vsc control + h se activa el buscar y remplazar que consiste en encontrar una palabra o oracion que coloques y la sustituira por lo que quieras. fontawesome ¿Que es un CDN? En terminos generales es un servidor que tiene un copia de lo que estamos solicitando, casi todas las empresas de este estilo (font awesome, google, facebook, twiter) tienen distintas librerias que nos permiten usar de forma gratuita, pues estas librerias se suelen guardar en un servidor y nos probeen un link para poder utilizarlas pero ese link no apunta una sola dirección entonces lo que hay es muchas copiass de servidores que se denominan servidores replicas que tienen la misma información todos, entonces cuando hacemos una peticion para descargar esa librería, hacemos la peticion al servidor mas cercano, y si ese no funciona por cualquier motivo nos manda al siguiente servidor mas cercano Atributos de accesibilidad Para poder usar la librería de iconos de font awesome primero te tendras que registrrar luego de registrarte te daran una dirección la cual hay que poner dentro de la etiqueta <head> y luego se buscara la imagen que quieres usar que se encuentre dentro de font awesome y copiaras el link y lo pegaras como pegarias cualquier imagen. Accesibilidad El tema de accesibilidad es un tema bastante extenso el cual puede dar para un curso completo, en este caso solo veremos unos cuantos atributos de accesibilidad, para que una pagína pueda ser mas accesibe. La accesibilidad es la capacidad que tiene tu pagina para que pueda ser accesible (procesada) por cualquier persona aunque no la pueda ver, esto esta diseñado principalmente para navegadores de terminal y para los navegadores que leen la página y la dictan (navegadores por voz). Atributos: tabindex: permite colocar un número lo cual permitira al navegadores dezplazarse por tu página, a traves de la tecla tab, en el orden de los números que hallas colocado. Atributos creados para gente que usen navegadores por voz aria-label: para que los navegadores no lean lo que dice en esa etiqueta de la página si no lo que pusiste en este atributo. role: para indicar cual es el elemento en el que nos estamos posicionando. OPEN GRAPH PROTOCOL Es un protocolo creado por facebook (meta) para que podamos escoger que se podra ver cuando se comparta un enlace a la pagina en donde colocamos el protocolo, este protocolo interviene en practicamente todas la redes sociales en donde se pueda compartir algun enlace, exceptuando en twitter ya que ella tiene su propio protocolo (twitter card), pero si vas a compartir algo en twitter y no tienes el protocolo de twitter si no el de facebook, interpretara los protocolos de facebook como protocols de twitter, siempre y cuando exista su semejante en el protocolo de twitter enlace para OPEN GRAPH PROTOCOL : https://ogp.me/} Documentación de Twitter Card: https://developer.twitter.com/en/docs... Validator de twitter cards: https://twitter.com/login?redirect_af... Pagínas importantes: Validator.w3.org https://ascii.cl/es/codigos-html.htm imagen.online-convert.com flaticon fontawesome whatismyviewport favicon-generator.org placekitten codepen.io https://www.w3schools.com/spaces/(con esta página puedo crear mi página web y mostrarsela al mundo) palabras interesantes: navegadores web de terminales extensiones de google utiles: chrome voz classic extension tengo que revisar el canal: soy dalto
