¡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
¿EMPEZAMOS?
 Clase 0. DESARROLLO WEB

INTRODUCCIÓN AL CURSO DE
DESARROLLO WEB
 ● Conocer los conceptos básicos del
curso.
● Presentar las herramientas a utilizar.
OBJETIVOS DE LA CLASE ● Instalar y probar cada una de ellas.
GLOSARIO:
Arrastrar archivos: implica mover archivos, Controlador de versiones: es un sistema que
trasladarlos de una carpeta a otra, o de una registra los cambios realizados en un archivo o
carpeta a un explorador, utilizando el mouse. conjunto de archivos a lo largo del tiempo,
permitiéndote recuperar versiones específicas más
Comprimir archivos: es el resultado de tratar adelante.
un archivo, documento, carpeta, etcétera, con
un programa específico para comprimir, cuyo Framework: es una estructura conceptual y
objetivo principal es reducir su peso para que tecnológica de asistencia, definida normalmente con
ocupe menos espacio. Con este proceso no se artefactos o módulos concretos de software, que
pierde la información original. puede servir de base para la organización y el
desarrollo de software
Ir al Directorio: podrás hacerlo a través del
explorador de archivos, o mediante la terminal.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 0

Desarrollo web

Herramientas básicas
Conceptos básicos para el diseño y
desarrollo web

Internet

Herramientas a
Instalación y práctica
utilizar en el curso
 CRONOGRAMA DEL CURSO
Clase 0 Clase 1 Clase 2

Introducción al curso Prototipado y Primeros pasos con

de Desarrollo Web conceptos básicos de HTML
HTML
CONCEPTOS BÁSICOS SKETCH LISTAS

HERRAMIENTAS A UTILIZAR PRÁCTICA DE LO VISTO PRÁCTICAS DE LO

EN EL CURSO EN CLASE VISTO EN CLASE

EJEMPLO EN VIVO
NUEVO DOCUMENTO FORMULARIOS

ESTRUCTURA HTML DEL

PROYECTO
 GUIÓN DE LA CLASE
Accede al material complementario aquí.
CONCEPTOS BÁSICOS
¿QUÉ ES EL DESARROLLO WEB?
“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”

Marie Quilly (2014)

 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.
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.
 ¿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 informático
Se trata de una red de
Es el instrumento que que busca todo tipo de
equipos de cálculo, que
permite a los usuarios de información en la web,
se relacionan entre sí a
internet navegar entre las almacenando la misma en
través del uso de un
distintas páginas de sitios una enorme base de datos,
lenguaje universal.
webs. para 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-SERVIDOR
Cuando la petición llega al servidor, el mismo resuelve:

● 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:

1. Google Chrome https://www.google.com/intl/es_es/chrome/

2. Microsoft Edge https://www.microsoft.com/es-es/edge
3. Firefox https://www.mozilla.org/es-ES/firefox/new/
4. Safari https://www.apple.com/es/safari/
5. Opera https://www.opera.com/es
 EDITORES DE TEXTO
Son programas 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.
INSTALACIÓN Y PRÁCTICA DE
LAS NUEVAS HERRAMIENTAS
INSTALACIÓN DE BALSAMIQ
 INSTALANDO BALSAMIQ

1 2 3

Descarga Selecciona el Continúa la

Balsamiq de la sistema operativo instalación con el
página oficial. que usas, y asistente hasta
descarga. finalizar.
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
 INSTALANDO SUBLIME TEXT

1 2 3

Descarga Sublime Selecciona el Continúa la

Text desde la sistema operativo instalación con el
página web oficial. que usas, y asistente hasta
descarga. finalizar.
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 TEXT
● html:5 + tab: genera la estructura básica de un documento HTML5.
● <html + tab: genera la estructura de una documento HTML.
● Lorem + tab: generar texto Lorem Ipsum
● Etiqueta * num + tab: generar etiquetas repetidas. Ejemplo: <td*2
INSTALACIÓN DE VISUAL STUDIO CODE
 INSTALANDO VSC

1 2 3
Descarga Visual
Selecciona el Continúa la
Studio Code
sistema operativo instalación con el
desde la página
que usas, y asistente hasta
web oficial.
descarga. finalizar.
CREACIÓN DE UN ARCHIVO
EN VSC
CREANDO UN ARCHIVO EN VSC

1. Ve a tu escritorio y crea una carpeta “clase-0”.

2. Luego haz clic derecho y selecciona
3. Cliquea en “New File”
4. Escribe el nombre de tu archivo
COMBINACIONES DE TECLA EN VSC

��
Para ver los atajos de teclado en VSC, haz
clic para acceder al documento
 ☕
BREAK
¡5/10 MINUTOS Y VOLVEMOS!
¡VAMOS A PRACTICAR LO VISTO!
TE DEJAMOS ALGUNOS 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.
¿PREGUNTAS?
¡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.