La clase de introducción al desarrollo web frontend cubre conceptos básicos como la navegabilidad, interactividad y arquitectura de la información, además de la importancia del prototipado. Se presentan los lenguajes fundamentales HTML y CSS, junto con su estructura y etiquetas, y se ofrecen consejos para crear prototipos efectivos y elegir tipografías adecuadas. La sesión incluye un ejercicio práctico para crear un archivo HTML básico y un desafío para la próxima semana.
0 calificaciones0% encontró este documento útil (0 votos)
5 vistas34 páginas
La clase de introducción al desarrollo web frontend cubre conceptos básicos como la navegabilidad, interactividad y arquitectura de la información, además de la importancia del prototipado. Se presentan los lenguajes fundamentales HTML y CSS, junto con su estructura y etiquetas, y se ofrecen consejos para crear prototipos efectivos y elegir tipografías adecuadas. La sesión incluye un ejercicio práctico para crear un archivo HTML básico y un desafío para la próxima semana.
Descripción original:
Aprende las bases para la programación de páginas web
La clase de introducción al desarrollo web frontend cubre conceptos básicos como la navegabilidad, interactividad y arquitectura de la información, además de la importancia del prototipado. Se presentan los lenguajes fundamentales HTML y CSS, junto con su estructura y etiquetas, y se ofrecen consejos para crear prototipos efectivos y elegir tipografías adecuadas. La sesión incluye un ejercicio práctico para crear un archivo HTML básico y un desafío para la próxima semana.
La clase de introducción al desarrollo web frontend cubre conceptos básicos como la navegabilidad, interactividad y arquitectura de la información, además de la importancia del prototipado. Se presentan los lenguajes fundamentales HTML y CSS, junto con su estructura y etiquetas, y se ofrecen consejos para crear prototipos efectivos y elegir tipografías adecuadas. La sesión incluye un ejercicio práctico para crear un archivo HTML básico y un desafío para la próxima semana.
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 34
¡Bienvenidas a
Frontend! Clase 1 Introducción al Desarrollo Web Frontend ¿Ponemos a grabar la clase? Presentación ¿Qué es el Desarrollo web?
Las invitamos a participar
abriendo el micrófono o escribiendo en el chat ¿Qué es el Desarrollo web?
Marie Quilly (2014) lo define como:
“La planificación y el diseño de páginas
de internet, con la interacción de medios como textos, imágenes, vídeos, sonido y enlaces a otras páginas web” Principios básicos
Navegabilidad: Interactividad Arquitectura de
¿Dónde puede ir el ¿Cómo pasar de un la información: usuario y de qué medio a otro, o de una ¿Cómo organizarla? forma? aplicación a otra? ¿Cómo pasar de una ¿Cómo relacionar los página a otra? diferentes medios? Prototipado desde el papel
Proyecto web
Prototipo Diseño Sketch Wireframe MockUp interactivo Final
1 2 3 4 5 Tips para armar un buen prototipo
Trabaja primero en la arquitectura de
la información:
● Agrupa: qué contenidos están
relacionados entre sí. ● Jerarquiza: cuáles contenidos están subordinados. ● Rotula: cómo se nombran los grupos de contenidos. Tips para armar un buen prototipo
Testea tu prototipo:
● Una vez que tengas el prototipo de
baja fidelidad (sketch), pruébalo con alguien, para conocer si es claro y funciona la forma de navegarlo. Tips para armar un buen prototipo
Elige la tipografía correcta:
● Te recomendamos trabajar con Google
Fonts. ● Evita mezclar familias tipográficas, es mejor trabajar con una o dos que tengan muchas variables (regular / bold / black / extrablack, etcétera). ● Para que una fuente se lea en la web de forma clara tiene que tener alrededor de 16px de tamaño. ● Los párrafos optimizados para lectura suelen tener alrededor de 10 palabras por línea de texto. Lenguajes para el desarrollo web
Para el diseño y desarrollo web existen
diferentes lenguajes, que nos permiten llevar el diseño en papel a una estructura que pueda interpretar un computador. En este curso se verán dos lenguajes bases: HTML y CSS. Editores de código
Instalación paso a paso
1. Dirigirse al sitio oficial de editor. Por ejemplo:
https://code.visualstudio.com/ 2. Efectuar la descarga. 3. Abrir el programa. Extensiones recomendadas Visual Studio Code
Las extensiones de VSC permiten ampliar las funciones y herramientas
disponibles. Nos dirigimos al icono de extensiones para buscarlas e instalarlas. HTML
Es un "lenguaje" de marcado de etiquetas, que permite crear documentos para web.
Durante el curso estaremos viendo
HTML, incluyendo toda su estructura y etiquetas. Los siguientes términos serán de uso frecuente:
● Etiqueta. ● Atributo. ● Estructura. CSS
El CSS permite controlar la
apariencia de una página web.
El CSS, en español «hojas de estilo en
cascada», es un lenguaje de diseño gráfico, utilizado para definir y crear la presentación de un documento estructurado, escrito en un lenguaje de marcado.
Algunos términos que utilizaremos
serán: ● Estilo. ● Reglas. ● Medidas. ● Fuente. Descanso Nos vemos en 10 minutos Convenio de archivos
● No deben tener espacios, acentos, eñes, ni símbolos o si son
varias palabras usar guiones “ - “ o “ _ “ ej: “mi-pagina-web”
● Tienen que estar escritos en minúsculas
● Deben tener la extensión “.html” (es la forma en que el
servidor web sabe que se trata un documento web)
Atención: al guardar archivos en Windows, verificar que no se guarden con la
doble extensión de archivos (archivo.html.txt) Documento predeterminado
● Es el archivo que se carga cuando
todavía no has hecho ningún link.
● Debe llamarse index.html, ya que es el
nombre estandarizado. Etiquetas HTML
● Las etiquetas HTML están delimitadas por un inicio y un
final de cada elemento.
● Lo que se encuentra dentro de la etiqueta (el contenido) es
lo que estás formateando.
● Toda etiqueta es un juego de pares: una etiqueta abre, otra
cierra.
<etiqueta> Contenido </etiqueta> Etiquetas cerradas y abiertas Las cerradas encierran un contenido, por lo general texto, mientras que las abiertas sirven, entre otras cosas, para incluir elementos como imágenes, líneas, entre otros.
En el ejemplo tenemos una etiqueta cerrada llamada Párrafo, que engloba un texto y una etiqueta abierta para incluir una línea horizontal.
El signo “/” se utiliza para las etiquetas de cierre. En estas últimas se pone a continuación del signo “<”, mientras que en las abiertas delante del signo “>”.
<p>Este es un párrafo con texto en su interior - Etiqueta Cerrada </p>
<hr/> <!-- Esto es una línea horizontal - Etiqueta abierta -->
En las etiquetas abiertas, ya no es una obligación poner el signo “ / ”. Por ejemplo,
<img src=””> funcionará correctamente, y lo mismo sucederá con <br>, <hr>, los meta tag. Estructura básica
- <head>: es la parte privada del documento, que se utiliza como un espacio de
comunicación entre el sitio web y el navegador. Esta etiqueta envuelve otras importantes como <title>, las etiquetas <meta> y aquellas relacionadas con la importación de documentos CSS y JS.
- <body>: encierra el contenido propiamente dicho del sitio.
Ambos deben estar dentro de un elemento principal: la etiqueta <html>.
Estructura básica
- <!DOCTYPE html>: declara el tipo de documento. Sirve para indicar que tu
documento está escrito siguiendo la estructura determinada por un DTD concreto. Un DTD es la definición del tipo de documento.
- <html>: etiqueta inicial, que define que el documento está bajo el estándar de HTML. Abre y cierra, por lo tanto es fundamental no olvidar la etiqueta </html> al finalizar el documento, pues sino no cargará correctamente el contenido de mi sitio.
- <title>: la etiqueta title define el título de la página, el cual será visualizado en la
solapa del navegador.
- <meta>: se utiliza para añadir información sobre la página (ya sean palabras clave, el autor, la descripción del sitio, etcétera), la cual pueden valerse los buscadores. También puede definir el idioma y la codificación en la cual está escrita la página.
. Estructura básica Tipos de etiquetas: grupo general
Todas las etiquetas que van dentro del <body></body> se dividen en dos grupos:
- Elementos de bloque: son aquellos que, sin ser modificados por CSS, ocupan el 100% del ancho del contenedor, y se mostrarán uno abajo del otro. - Elementos de línea: sólo ocupan el ancho que diga el contenido, y se verán uno al lado del otro.
● <h1> a <h6> de bloque)
● <p></p>(de bloque) ● <br/> (de bloque) ● <em> (de línea) ● <strong> (de línea) ● <div> (de bloque) ● <span> (de línea) HTML5: etiquetas semánticas
HTML5 incorpora etiquetas semánticas
que no sólo generan estructura, sino que también definen su contenido
Ayudan a la implementación de los
estándares de la Web Semántica, cuya finalidad es hacer el contenido de internet legible para aplicaciones informáticas. Etiquetas semánticas
Tag Descripción
<header> Representa un grupo de ayudas introductorias o de navegación.
También puede contener logos, formulario de búsqueda o tabla de contenidos
<nav> Sección de una página que enlaza a otras páginas o partes de la misma. Una sección con links de navegación.
<aside> Sección de una pagina que contiene contenido relacionado tangencialmente al de su alrededor. Por lo general se utilizan como barras laterales.
<main> Representa el contenido predominante de la página.
Una página debe tener solo un tag <main>. Solo debe estar contenida por tags de tipo <html>, <body>, <div> o <form>.
<article> Representa una sección de contenido que puede ser distribuido de forma independiente. Puede ser un post en un foro, un artículo de periódico, una entrada de un blog, un comentario, etc.
<section> Representa a una sección genérica de una página. Agrupa contenidos que tienen una relación temática entre sí.
<footer> Representa un pie de página para el elemento que lo contiene.
Generalmente contiene información acerca de quién lo escribió, enlaces a documentos relacionados, datos de derechos de autor o similares. ¿Vamos a la práctica? ¡A practicar! 1. En el editor de texto (Visual Studio), crea un documento nuevo llamado “index.html”. Escribe con etiquetas HTML:
- Título de la página - Encabezado y subtítulo - Incluí tu nombre y una mini bio. - Guarda, abre el archivo en el browser de tu preferencia, y observa el resultado.
2. Compartir las producciones.
Ejemplo Utilizaremos todas estas etiquetas en nuestro primer ejemplo de estructura web:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mi primer sitio web</title> </head> <body> <h1>Encabezado nivel 1</h1> <h2>Mi nombre es:</h2> Tu Nombre y Apellido <h2>Objetivos del curso:</h2> Lorem ipsum <h3>Mini bio:</h3> Lorem ipsum
</body> </html> Espacio para compartir las presentaciones ¿Preguntas? Desafío 1 Para la prox. semana cada equipo deberá:
● Completar el desafío iniciado en clase:
crear un index.html y practicar primeras etiquetas ● Hacer un boceto de cómo se vería la página que imaginan ● Pensar un tema de interés para la página que van a desarrollar en grupos ¡MUCHAS GRACIAS!
