Clase 1 - Desarrollo Web HTML

Page 1

Visual studio code, Herramienta fundamental.

Navegación : Usuario puede navegar por la pag, visitando contenidos

Interacción : Poder navegar por la web, interactuar vcon botón, contacto, animaciones, efectos.

Arquitectura de la información: Es el armado de toda la web donde pueda brindar una buena accesibilidad y experiencia del usuario.

Herramientas básicas para diseño y desarrollo web:

Html : Lenguaje de marcado de etiquetas, estructura. Crea base de nuestra web. Constituido por etiquetas, atributos,, propiedades, estructura básica, valores.

CSS: Lenguaje diseño. Estructuras. Agrega parte estética. Estilo, medidas, fuentes, etc.

Desarrollo web : 2 caminos

Web site : Trabajar con el código del sitio.

Aplicación web : Trabajado desde 0 con tecnologia html, css, javascipt. Sin gestor de contenidos.

Que es internet? : Red de equipos de cálculos, serie de computadores entrelazadas entre si.

Explorador : Programa que nos permite acceder a internet de manera simple.

Buscador: Sitio web ( google ), recopila muchos sitios web en una gran base de datos ( big data )

Sitio y pagina web no son lo mismo: Porque pag web es archivo de html, sitio web es el conjunto de archivos no solamente de html sino de todos los que conforma la web.

Prototipado desde el papel : Se puede desde scketch, que es un diseño a mano. Desarrollamos el sitio de manera sencilla.

Wireframe: Es una representación de baja calidad por programa, por ejemplo paint, balsamiq, etc.

Mockup: Representación de calidad media o alta. Se agrega mas detalles para diferentes dispositivos. Incluso especializar el maquetado en ellos. adobe xd, photoshop, illustraitor.

Prototipo : Representación navegable del producto final. Tips: Realizar contenido. Dar jerarquía a contenido. Etiquetar. Testear detalles de web. Correcta tipografía.

W3c, regulariza todos los sitios web.

Párrafo que sea superior a 10 palabras.

Paleta ( Colors.io)

Fundamental : El ojo visual de un diseñador. Esa noción se obtiene visitando sitios de diseños, para ver las tendencias, enfocarse en los detalles y tratar de hacer lo propio. Recomienda, Adwards, behance.

Tarea : micro desafío de práctica

Archivos Html: Se crea proyecto, se hace desde una carpeta llamada root ( raiz ), si es mas de una palabra trata de unirlo con - o _.

.html extensión dentro de la carpeta.

Archivos que se guarda con doble extensión (.html.txt. ) se guarda la ultima extensión.

Carpeta raíz :

Agregar +subniveles en proyectos muy grandes.

Sintaxis: forma de escribir codigo de ese lenguaje.

Etiqueta apertura - cierre.

Etiquetas reales aperturas y cierre

img permite agregar imagenes.

etiqueta meta informativa.

Indent significa sangria

Etiqueta referencia.

ETIQUETAS

ATRIBUTOS

VALORES

no se puede agregar dos h1 por pagina.

Unidad 1 - Plataforma

2.4. Etiquetas y sintaxis de código

Etiquetas Head : Incluyen etiquetas meta. La primera define codificacion de caracteres de nuestra pagina.

Etiqueta Tittle : Define el título de nuestra pagina, nombre de la pestaña.

Etiquetas body : H1 - Etiquetas dedicadas a encabezados. P - Párrafo

Etiqueta "a" - Se utiliza para crear enlaces, Dirige al usuario cuando se crea un botón. Esto se realiza mediante el atributo Href.

Etiqueta IMG - Atributo src - especifica ruta donde esta la imagen. Atributo alt - Atributo que nos da el texto explicativo de la imagen que se esta cargando.

Lista ordenada / desordenada para agrupar elementos.

Dentro de las etiquetas, para cada item se necesita envolverlo con etiquetas "li"

Ol - Lista ordenada. Listas sugeridas, listas de pasos.

Ul - Lista desordenada.

2.5. HTML: Estructura y elementos básicos

Instalación de la extensión " Live Server ". Abre pestaña para mostrar la estructura HTML en web.

<!-- permite agendar o describir cada lista. Esto es para quienes vean el código.

2.6. Profundizando en HTML

Enlace Absoluto -- Apunta a un recurso externo, pagina web de otro tema. Se forma con etiqueta "a"

Enlace relativo -- Ayuda a moverse entre páginas dentro del mismo proyecto. Se forma con etiqueta "a"

Enlace interno -- Lleva a una sección específica de la misma página. Se forma con etiqueta " a"

Inserción videos y audios mediante etiquetas

Video -- Etiqueta Video

Controls -- Atributo que agrega el control de los videos, ayuda a visualizar.

Audio -- Etiqueta audio

Controls -- Atributo que agrega el control de los videos, ayuda a visualizar.

✅🚩Les comparto estos videos tutoriales con todo el contenido de la clase y mas detalles:

📌Estructura Básica de HTML:

https://youtu.be/rCuGq2U81GM

📌Encabezados de HTML:

https://youtu.be/0Z1A6-msgvk

📌Listas en HTML:

https://youtu.be/WFFpIT-hLhw

📌Tablas en HTML:

https://youtu.be/ORnpRwmKOQA

📌Multimedia en HTML:

https://youtu.be/iIo1mn1L3BQ

📌Enlaces en HTML:

https://youtu.be/lQSsR87Eo04

📌Formularios en HTML:

https://youtu.be/D3B7Z3v0yA4

📌Diferentes inputs en HTML:

https://youtu.be/T8DvHTiTq00

Presentación diapositivas unidad 1

* https://docs.google.com/presentation/d/1G1qdbU26zGc8LXPSYpITyZ3eLXP6Nw4NJ8LCW6zqgUM/edit#slide=id.g2dd1daf03b6_2_161

Page 2