¡LES DAMOS
LA
BIENVENIDA!
¿Están listos?
RECUERDA PONER A
GRABAR LA CLASE
PRESENTACIÓN DE
ESTUDIANTES
Por encuestas de
Zoom:
1. País
2. Conocimientos previos
en la disciplina
3. ¿Por qué elegiste el
curso?
Se responde en encuestas separadas
creadas por el docente.
¿DUDAS DEL ON-
BOARDING?
MIRALO AQUI
Clase 00. DESARROLLO WEB
INTRODUCCIÓN AL
CURSO DE
DESARROLLO WEB
● Conocer los conceptos básicos del
curso.
● Presentar las herramientas a
utilizar.
OBJETIVOS DE LA ● Instalar y probar cada una de
CLASE ellas.
GLOSARIO:
Arrastrar archivos: implica mover Controlador de versiones: es un sistema
archivos, trasladarlos de una carpeta a que registra los cambios realizados en un
otra, o de una carpeta a un explorador, archivo o conjunto de archivos a lo largo del
utilizando el mouse. tiempo, permitiéndote recuperar versiones
específicas más adelante.
Comprimir archivos: es el resultado de
tratar un archivo, documento, carpeta, Framework: es una estructura conceptual y
etcétera, con un programa específico tecnológica de asistencia, definida
para comprimir, cuyo objetivo principal normalmente con artefactos o módulos
es reducir su peso para que ocupe menos concretos de software, que puede servir de
espacio. Con este proceso no se pierde la base para la organización y el desarrollo de
información original. software
Ir al Directorio: podrás hacerlo a través
del explorador de archivos, o mediante la
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 0
Desarrollo web
Herramientas
Conceptos básicas para el
básicos diseño y desarrollo
web
Internet
Herramientas a
Instalación y
utilizar en el
práctica
curso
CRONOGRAMA DEL
CURSO
Clase 0 Clase 1 Clase 2
Inducción al curso Prototipado y Primeros pasos
de Desarrollo Web conceptos básicos con HTML
de HTML
INSTALACIÓN DE SKETCH LISTAS
SUBLIME TEXT o
VISUAL CODE
CREACIÓN DE UN ARCHIVO PRÁCTICA DE LO PRÁCTICAS DE LO
EN SUBLIME TEXT VISTO EN CLASE VISTO EN CLASE
INSTALACIÓN DE
BALSAMIQ NUEVO DOCUMENTO FORMULARIOS
WIREFRAME Y ESQUELETO
HTML ESTRUCTURA HTML DEL
PROYECTO
GUIÓN DE LA CLASE
Accede al material complementario aquí.
Momento de
exposición
CONCEPTOS
BÁSICOS
¿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: ¿dónde puede ir
el usuario y de qué forma? ¿Cómo
pasar de una página a otra?
● Interactividad: ¿cómo pasar de
un medio a otro, o de una
aplicación a otra? ¿Cómo relacionar
los diferentes medios?
● Arquitectura de la información:
¿cómo organizar esta última?
HERRAMIENTAS BÁSICAS
PARA EL DISEÑO Y
DESARROLLO WEB
LENGUAJES PARA EL
DESARROLLO WEB
Para el diseño y desarrollo web existen
diferentes lenguajes, que nos permiten
llevar el diseño en papel (sketch) a una
estructura que pueda interpretar un
computador. En este curso se verán
dos lenguajes bases: HTML y CSS.
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.
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.
¿QUÉ ES UN LENGUAJE DE
PROGRAMACIÓN?
Fuente: https://blog.ida.cl/estrategia-digital/diferencias-aplicacion-web-sitio-web/
CONCEPTOS BÁSICOS
SOBRE INTERNET
INTERNET NAVEGADOR BUSCADOR
Es un sistema
Se trata de una red
Es el instrumento que informático que busca
de equipos de
permite a los usuarios todo tipo de información
cálculo, que se
de internet navegar en la web, almacenando
relacionan entre sí a
entre las distintas la misma en una enorme
través del uso de un
páginas de sitios base de datos, para
lenguaje universal.
webs. arrojar la información
solicitada.
¿QUÉ ES UN SITIO
WEB?
Es un espacio virtual en Internet.
Se trata de un conjunto de páginas
web, accesibles desde un mismo
dominio o subdominio de la World
Wide Web (WWW).
SITIO WEB Y
PÁGINA WEB
NO SON LO MISMO.
DIFERENCIA ENTRE
PÁGINA WEB Y SITIO
WEB
EL MODELO CLIENTE-
SERVIDOR
Al abrir un browser o navegador, e ingresar una
página web, se lo suele hacer por su nombre, por
ejemplo: www.coderhouse.com
A lo largo de toda la red de internet, hay una serie de
máquinas que hacen de “agenda” y nos dan la
dirección IP. La dirección IP es un conjunto de
números que identifica, de manera lógica y
jerárquica, a una interfaz en red.
www.coderhouse.com = 159.89.87.61
EL MODELO CLIENTE-
Cuando la petición llega al servidor,
el mismo resuelve:
SERVIDOR
● Si el sitio efectivamente está en
ese servidor.
● Qué directorio (o carpeta)
corresponde con ese sitio web.
● Qué archivo está siendo
solicitado (si no es ninguno,
siempre se busca uno por
defecto).
● Qué tecnologías conforman esos
archivos.
EL MODELO CLIENTE-
SERVIDOR
HERRAMIENTAS A UTILIZAR
EN EL CURSO
EXPLORADORES
Para probar tu web, necesitarás varios
exploradores, con el fin de corroborar si
los mismos soportan las etiquetas
aplicadas al diseño. Los más comunes
son:
● Google Chrome.
● Mozilla Firefox.
● Opera.
● Safari.
● Microsoft Edge.
EDITORESSon
DEprogramas
TEXTO que te permiten realizar o
escribir código fuente (HTML, CSS, PHP,
JavaScript) de tus proyectos. Al ser
dinámicos, son idóneos para cuando
desarrollas uno con varios lenguajes de
programación. Algunos de ellos son:
● Sublime Text.
● Atom.
● Brackets.
● Visual Studio Code.
● PHPStorm.
Código fuente: es el conjunto de líneas de textos, las cuales son las directrices que debe
seguir la computadora para realizar dicho programa.
BALSAMIQ
Es una herramienta que facilita la
creación de esquemas o mockups. No
sólo cuenta con una aplicación nativa
para MacOS (también Windows y
Linux), sino también con una versión
web, de modo que puedes trabajar
desde cualquier lugar.
Su finalidad es ayudar al desarrollo
de aplicaciones.
TERMINAL O CONSOLA
En informática, una terminal o
consola es la aplicación que se
utiliza para interactuar con el
computador a través de comandos.
Todos los sistemas operativos la
traen.
☕
BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
INSTALACIÓN Y
PRÁCTICA DE LAS
NUEVAS
HERRAMIENTAS
INSTALACIÓN DE
BALSAMIQ
INSTALANDO BALSAMIQ
1 2 3
Selecciona el
Descarga Continúa la
sistema
Balsamiq de la instalación con
operativo que
página oficial. el asistente
usas, y
hasta finalizar.
descarga.
PRACTICANDO EN BALSAMIQ
1. Abrir el programa
2. Revisar los componentes
3. Pegar el componente
browser con un botón
4. Guardar el documento en
Proyecto -> Guardar como
5. Exportar a PDF: Ir a Proyecto
-> Exportar a PDF.
INSTALACIÓN DE
SUBLIME TEXT
O VISUAL STUDIO
CODE
INSTALANDO SUBLIME TEXT o
VISUAL CODE
1 2 3
Descarga
Sublime Text Selecciona el
Continúa la
desde la página sistema
instalación con
web oficial, o operativo que
el asistente
descarga usas, y
hasta finalizar.
Visual Studio descarga.
Code.
CONFIGURANDO SUBLIME TEXT
Es necesario instalar el Package
Control, el cual te permite acceder a
todos los paquetes de sublime.
1. Accede a la paleta de comandos
con las combinaciones en
Win/Linux: ctrl+shift+p, Mac:
cmd+shift+p
2. Escribe Install Package Control, y
presiona Enter.
CONFIGURANDO SUBLIME TEXT
1. A continuación, en el menú “Preferences” >
”Package Control”.
2. En la ventana emergente, escribe “Install
Package”.
3. Busca los siguientes paquetes:
a. Emmet: automatiza la creación de
bloques de HTML utilizando
abreviaciones.
b. HTML-CSS-JS Prettify: maqueta el
código.
c. ColorPicker: se ahorra mucho tiempo al
no tener que cambiar de ventana para
buscar el código del color por otros
medios.
CREACIÓN DE UN
ARCHIVO EN
SUBLIME TEXT
CREANDO UN ARCHIVO SUBLIME
TEXT
1. Ve a Archivo -> Nuevo Archivo
2. Luego a Archivo -> Guardar como
3. Busca en el explorador de archivos
dónde guardarlo, y pon el nombre de
“index.html”.
4. Escribe “Hola Mundo”.
5. Busca el archivo creado y ábrelo en el
explorador de tu preferencia.
COMBINACIONES DE TECLA EN SUBLIME
● html:5 + tab: genera la estructura básica de un documento
HTML5.
TEXT
● <html + tab: genera la estructura de una documento HTML.
● Lorem + tab: generar texto Lorem Ipsum
● Etiqueta * num + tab: generar etiquetas repetidas. Ejemplo:
<td*2
Fuente: https://tonalidad.es/blog/tuts/sublime-text-las-veinte-mejores-combinaciones-teclas/
¡VAMOS A PRACTICAR LO
VISTO!
Momento de consolidación de
aprendizajes
TIPS
● Instala todas las aplicaciones necesarias.
● Establece un objetivo a alcanzar.
● Mantén la curiosidad activa.
● No te quedes sólo con lo visto en clase.
● Cumple con los desafíos.
● Practica: la práctica hace al maestro.
● Apóyate en los recursos de Coderhouse.
● Revisa el material complementario.
● Internet y las ganas de aprender son tus mejores
amigos.
¿PREGUN
TAS?
¿YA CONOCES LOS
BENEFICIOS QUE TIENES POR
SER ESTUDIANTE DE
CODERHOUSE?
BENEFICIOS
Haz clic aquí y conoce todos nuestros beneficios
exclusivos para estudiantes de Coderhouse.
¡MUCHAS
GRACIAS!
Resumen de lo visto en clase
hoy:
- Presentación de conceptos básicos.
- Introducción de las herramientas a
utilizar.
- Instalación y prueba de dichas
herramientas.
OPINA Y VALORA
ESTA CLASE
¡LES DAMOS
LA
BIENVENIDA!
¿Están listos?
RECORDÁ PONER A
GRABAR LA CLASE
PRESENTACIÓN DE
ESTUDIANTES
Por encuestas de
Zoom:
1. País
2. Conocimientos previos
en la disciplina
3. ¿Por qué elegiste el
curso?
Se responde en encuestas separadas
creadas por el docente.
¿DUDAS DEL ON-
BOARDING?
MIRALO AQUI
DESAFÍOS Y
ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para
enfocarse en
la práctica. 1
0
Desafíos genéricos Desafíos entregables
Ayudan a poner en práctica los Relacionados completamente con el
conceptos y la teoría vista en clase No Proyecto Final. Deben ser subidos
deben ser subidos a la plataforma. obligatoriamente a la plataforma
hasta 7 días luego de la clase para
que sean corregidos.
DESAFÍOS Y
ENTREGABLES
Son actividades o ejercicios que se realizan durante la cursada, para
enfocarse en
la práctica.
4
Desafíos complementarios Entregas del Proyecto Final
Desafíos que complementan a los Entregas con el estado de avance de
entregables. Son optativos y, de ser tu proyecto final que deberás subir a
subidos a la plataforma a tiempo y la plataforma a lo largo del curso y
aprobados, suman puntos para el top hasta 7 días luego de la clase, para
10. ser corregidas por tu docente o
PROYECTO FINAL
El Proyecto Final se construye a partir de los desafíos que se
realizan clase a clase. Se va creando a medida que el estudiante
sube los desafíos entregables a nuestra plataforma.
El objetivo es que cada estudiante pueda utilizar su Proyecto Final
como parte de su portfolio personal.
El proyecto final se debe subir a la plataforma la ante-última o
última clase del curso. En caso de no hacerlo tendrás 20 días a
partir de la finalización del curso para cargarlo en la plataforma.
Pasados esos días el botón de entrega se inhabilitará.
¿CUÁL ES NUESTRO
PROYECTO FINAL?
PROYECTO FINAL
● Descripción: deberás desarrollar un sitio web con 5 secciones, en
diferentes archivos HTML. Contendrá contenido, imágenes,
hyperlinks, estructura, manejo de grids, uso del framework, SEO,
animación y responsive. El tema del proyecto podrás elegirlo vos,
teniendo en cuenta el objetivo, que será llegar a un producto
orientado a una PyME.
● Criterios de evaluación: estructura del sitio web, diseño y
estética, códigos HTML y CSS, contenido y calidad.
● Formato esperado: página final cargada en el servidor, con
PROYECTOS DE NUESTROS
ESTUDIANTES
● https://federicodelpiano.github.io/proyecto_final
/#
● https://jonarosas.github.io/proyecto_final/index.
html
● https://emilianop7.github.io/coder_final/
● https://silvina645.github.io/final/index.html
¡Puedes ver más ejemplos de proyectos de ex-
estudiantes de Coderhouse en:
www.coderhouse.com/proyectos!
ENTREGA REQUISITO FECHA
1° entrega Estructura base de la página Clase N° 4
web: Sketch y estructura en
HTML.
2° entrega Agregar CSS al proyecto, Clase N° 8
modelado, flexbox y grillas.
3° entrega Adaptación del proyecto al Clase N° 12
framework, agregando
animaciones, transformaciones y
transiciones.
4° entrega Aplicación de SASS y subida al Clase N° 16
repositorio de GitHub.
Proyecto final Página final cargada en el Clase N° 18
servidor, con acceso desde la
¡IMPORTANTE!
Los desafíos y entregas de proyecto se deben cargar
hasta siete días después de finalizada la clase. Te
sugerimos llevarlos al día.
Clase 01. DESARROLLO WEB
PROTOTIPADO Y
CONCEPTOS
BÁSICOS DEL HTML
● Comenzar el prototipado de un
sitio web.
● Conocer conceptos básicos del
HTML y sus etiquetas.
● Armar la estructura básica de un
OBJETIVOS DE LA documento HTML y conocer su
CLASE sintaxis.
GLOSARIO:
Clase 0
Desarrollo web: consiste en la Internet: se trata de una red de equipos
planificación y el diseño de páginas de de cálculo, que se relacionan entre sí a
internet, con la interacción de medios través del uso de un lenguaje universal.
como textos, imágenes, vídeos, sonido y
enlaces a otras páginas web. Navegador: es el instrumento que
permite a los usuarios de internet
HTML: es un "lenguaje" de marcado de navegar entre las distintas páginas de
etiquetas, que permite crear documentos sitios webs.
para web.
Buscador: es un sistema informático
CSS: en español, «hojas de estilo en que busca todo tipo de información en la
cascada», es un lenguaje de diseño web, almacenando la misma en una
gráfico, utilizado para definir y crear la enorme base de datos, para arrojar la
presentación de un documento información solicitada.
estructurado, escrito en un lenguaje de
GLOSARIO:
Clase 0
Sitio web: es un espacio virtual en Código fuente: es el conjunto de líneas
Internet. Se trata de un conjunto de de textos, las cuales son las directrices
páginas web, accesibles desde un mismo que debe seguir la computadora para
dominio o subdominio de la World Wide realizar dicho programa.
Web (WWW).
Balsamiq: es una herramienta que
Dirección IP: es un conjunto de facilita la creación de esquemas o
números que identifica, de manera lógica mockups. Su finalidad es ayudar al
y jerárquica, a una interfaz en red. desarrollo de aplicaciones.
Editores de texto: Son programas que Terminal o consola: es la aplicación
te permiten realizar o escribir código que se utiliza para interactuar con el
fuente (HTML, CSS, PHP, JavaScript) de computador a través de comandos.
tus proyectos.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 1
Prototipado
Proyecto web
desde papel
Tips
HTML ¿Qué es?
Convenio de
archivos
Etiquetas
CRONOGRAMA DEL
CURSO
Clase 0 Clase 1 Clase 2
Inducción al curso Prototipado y Primeros pasos
de Desarrollo Web conceptos básicos con HTML
de HTML
INSTALACIÓN DE SKETCH LISTAS
SUBLIME TEXT
CREACIÓN DE UN ARCHIVO PRÁCTICA DE LO PRÁCTICAS DE LO
EN SUBLIME TEXT VISTO EN CLASE VISTO EN CLASE
INSTALACIÓN DE
BALSAMIQ NUEVO DOCUMENTO FORMULARIOS
WIREFRAME Y ESQUELETO
HTML ESTRUCTURA HTML DEL
PROYECTO
GUIÓN DE LA CLASE
Accede al material complementario aquí.
Momento de
exposición
PROTOTIPADO DESDE
EL PAPEL
PROYECTO WEB
1 2 3 4 5
Prototipo
Sketch Wireframe MockUp interactivo Diseño Final
SKETCH
Es un dibujo rápido o bosquejo guía, que reproduce de manera
muy sencilla un concepto, una idea o generalidad de un
proyecto.
WIREFRAME
Es la representación estática, en baja calidad, de un
diseño. Se definen, para una mejor comprensión, los
siguientes aspectos:
● ¿Qué? Los principales grupos de contenido.
● ¿Dónde? La estructura de la información.
● ¿Cómo? La descripción y visualización básica del
usuario – interacción de la interfaz
MOCKUP
Es la representación estática de un diseño, en calidad media o
alta.
PROTOTIPO
Es la representación navegable del producto final.
TIPS PARA ARMAR UN BUEN
● Trabaja primero en la arquitectura de la información:
- Agrupa: qué contenidos están relacionados entre sí.
- Jerarquiza: cuáles contenidos están subordinados.
PROTOTIPO
- Rotula: cómo se nombran los grupos de contenidos.
● 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.
● 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 para 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.
TIPS PARA ARMAR UN BUEN
● Arma tu propia paleta cromática:
paleta PROTOTIPO
Existen muchas páginas que pueden ayudarte a armar una
optimizada.
Te recomendamos visitar colorlouvers o color adobe.
● Releva sitios webs:
En la primera etapa, es fundamental entrenar el ojo y mirar
los sitios webs que ya conoces, así como descubrir nuevos con
ojos de diseñador/a. Te recomendamos visitar awwwards, que
reúne y premia los mejores sitios de la red.
Nota: puedes ver un ejemplo de estructura de un sitio web en la carpeta de la clase
.
☕
BREAK
¡5/10 MINUTOS Y
VOLVEMOS!
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.
CONVENIO DE
● No deben tener espacios, acentos, eñes, ni símbolos o si
ARCHIVOS
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 en ningún
link (por ejemplo, al pedir www.coderhouse.com no dice qué archivo
quieres). 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>
ATRIBUTOS DE LAS
Todas las etiquetas aceptan atributos, esto es, cualquier característica
ETIQUETAS
que pueda ser diferente entre una etiqueta y la otra. El valor que
tendrá va entre comillas.
Cada una puede tener más de un atributo, separados entre sí por
espacios. Los mismos sólo van en la de apertura.
<etiqueta
atributo=”valor”>
Contenido
</etiqueta>
ANIDAR ETIQUETAS
Es posible meter una etiqueta dentro de la otra, de hecho, esto es más
común de lo que parece. Lo más importante es tener presente que
siempre se cierran en orden inverso a la apertura.
SINTAXIS DEL CÓDIGO
Orden dentro del código:
● Manejo de tabulaciones.
● Bloques de código.
ETIQUETAS CERRADAS Y
Las cerradas encierran un contenido, por lo general texto, mientras que
ABIERTAS
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
<p>Este es un párrafo con texto en su interior - Etiqueta
pone a continuación del signo “<”, mientras que en las abiertas delante
Cerrada </p>
del signo “>”.
<hr/> <!-- Esto es una línea horizontal - Etiqueta abierta -->
ETIQUETAS ABIERTAS
EN HTML5
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
● <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.
DOCTYPE
Cuando escribes tu documento HTML, lo primero
que debes hacer es escribir el DOCTYPE, el cual
declara el tipo de documento. Es decir, 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.
<!DOCTYPE html>
Tips:
TIPOS DE ETIQUETAS: GRUPO
Todas las etiquetas que van dentro del <body></body> se
GENERAL
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> <h1> a <h6> (de bloque): un
Elemento de
encabezado es, semánticamente
Bloque
</h1> hablando, el texto que encabeza o
<h2>
Elemento de titula el contenido que sigue. Se
Bloque
</h2> puede tratar de un artículo, un texto o
una sección del documento que
Existen 6 niveles: del <h1></h1> al
estamos viendo.
<h6></h6>
Esta jerarquía se debe respetar en cada documento
HTML que forme parte del sitio web.
<h1> REINO ANIMAL </h1>
<h2 Vertebrados </h2>
<h3> Mamiferos </h3>
<h4> Bipedos </h4>
<h4> Cuadrúpedos </h4>
<h3> Aves </h3>
<h4> Voladoras </h4>
<h4> No voladoras </h4>
<h3> Reptiles </h3>
<h3> Peces </h3>
<h3> Anfibios </h3>
<h2> Invertebrados </h2>
<h3> Insectos </h3>
<h4> Voladores </h4>
<h4> No Voladores </h4>
ETIQUETAS
● <p></p>
HTML:● <br/> (de bloque)
● <em> (de línea)
● <strong> (de línea)
● <div> (de bloque)
● <span> (de línea):
Utilizaremos todas estas etiquetas en nuestro primer ejemplo de
<!DOCTYPE html> estructura web:
<html>
<head>
<meta charset="utf-8">
<title>Mi primer sitio web</title>
</head>
<body>
<h1>Nombres</h1>
<h2>Mi nombre es:</h2> Tu Nombre y Apellido
<h2>El nombre del profesor es:</h2> Nombre y apellido del
profesor
</body>
</html>
HTML5
HTML5 incorpora etiquetas
semánticas que no sólo
generan estructura, sino que
también definen su contenido.
¡VAMOS A PRACTICAR LO
VISTO!
Momento de consolidación de
aprendizajes
SKETCH
Crea un sketch en papel.
¡A PRACTICAR!
Diseña un sketch en papel, con aquello que incluiría el
sitio web que crearás para tu Proyecto Final. Piensa
qué secciones podría tener. Debe tener un
encabezado, un logo y pie de página. Cuentas con 10
minutos para hacer la actividad.
NUEVO DOCUMENTO
Crea un documento nuevo.
¡A PRACTICAR!
En el editor de texto (Sublime), crea un documento nuevo
llamado “index.html”. Escribe con etiquetas HTML:
● Nombre y apellido: tu nombre y apellido.
● Nombre del docente: su nombre y apellido.
Guarda, abre el archivo en el browser de tu preferencia, y
observa el resultado. Contarás con 15 minutos para realizar
la actividad.
1y
2
WIREFRAME Y
ESQUELETO HTMLun logo y un
1. Crea un wireframe en Balsamiq, basado en el sketch
diseñado en clase. Debe tener un encabezado,
pie de página.
2. Crea el esqueleto en HTML de la página principal, usando el
wireframe como base.
WIREFRAME Y ESQUELETO HTML
Formato: el sketch deberá entregarse en formato papel o Balsamiq, mientras
que el esqueleto en HTML en Sublime Text o VisualStudio. Utiliza el nombre
“Idea+Apellido”.
Sugerencia: elige la temática para el proyecto final y realiza las tareas en
base a ello.
>> Consigna:
1. Crea un sketch del sitio web con el tema que crearás para tu Proyecto final. Piensa qué secciones
podría tener, e incluye un encabezado, un logo y un pie de página.
2. Construye el esqueleto en HTML semánticamente correcto de la sección principal de la WEB,
utilizando las etiquetas HTML vistas.
>>Aspectos a incluir en el entregable:
3. Wireframe:
Diseñar un encabezado, logo y pie de página.
Pensar qué secciones podría tener la primera página del sitio.
4. HTML:
Incorporar la estructura básica de html5
Incluir las etiquetas vistas usando el wireframe como base.
>>Ejemplos: Wireframe index / Archivo index.html
¿PREGUN
TAS?
TE INVITAMOS A QUE
COMPLEMENTES LA CLASE
CON LOS SIGUIENTES
CODERTIPS
VIDEOS Y
PODCASTS
● Empezar en el Mundo del Desarrollo Web |
Conseguir Trabajo en Programación Web |
CODERHOUSE |
https://www.youtube.com/watch?v=P3pFRC
Fodog
¿QUERÉS SABER MÁS? TE
DEJAMOS MATERIAL
AMPLIADO DE LA CLASE
● ¿Cómo funciona un DNS? | red.es
● Software para prototipar | InVision
● Referencia de elementos HTML5 | MDN Web
Docs
¿YA CONOCES LOS
BENEFICIOS QUE TIENES POR
SER ESTUDIANTE DE
CODERHOUSE?
BENEFICIOS
Haz clic aquí y conoce todos nuestros beneficios
exclusivos para estudiantes de Coderhouse.
¡MUCHAS
GRACIAS!
Resumen de lo visto en clase
hoy:
-Prototipado de un sitio web.
-HTML, sus etiquetas y sintaxis.
¿Estás disfrutando la
experiencia Coder?
Refiriendo a un amigo nos ayudas a
expandir nuestra comunidad de
estudiantes.
Ingresa aquí
OPINA Y VALORA
ESTA CLASE
