Esta clase va a ser

grabada
¡Les damos la
bienvenida!
¿Comenzamos?
 Clase 00. DESARROLLO WEB

Introducción al curso de
desarrollo web
Objetivos de la clase

Conocer los conceptos básicos del curso.

Presentar las herramientas a utilizar.

Instalar y probar cada una de ellas.

Interacciones
en clase
MAPA DE CONCEPTOS

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
Temario

00 01

Introducción al Prototipado y
Desarrollo Web conceptos básicos
de HTML
✓ Conceptos
básicos ✓ Prototipado
desde el papel
✓ Herramientas a
utilizar en el curso ✓ HTML

✓ Instalación y ✓ Etiquetas
práctica
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.
Bienvenidos a
Diseño Web
Que la fuerza te acompañe:
● Inicio
● Blog
● Contactos

Sobre el Profesor:
El Profesor explica, hace y ustedes practican.

Sobre ustedes:
Aprenderán a diseñar una página web.
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.
Bienvenidos a
Diseño Web
Que la fuerza te acompañe:
● Inicio
● Blog
● Contactos

Sobre el Profesor:
El Profesor explica, hace y ustedes practican.

Sobre ustedes:
Aprenderán a diseñar una página web.
 ¿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

Se trata de una red de ¿Es el instrumento Es un sistema informático que

equipos de cálculo, que permite a los busca todo tipo de
que se relacionan usuarios de internet información en la web,
entre sí a través del navegar entre las almacenando la misma en una
uso de un lenguaje distintas páginas de enorme base de datos, para
universal. sitios 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 -
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.

Fuente: Imagen recuperada de http://132.72.155.230:3838/js/web-servers-1.html

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 Balsamiq de Selecciona el sistema Continúa la instalación

la página oficial. operativo que usas, y con el 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.
 ☕
Break
¡10 minutos y volvemos!
 Ejemplo en vivo

Instalación de Sublime Text

 Instalando Sublime Text

1 2 3

Descarga Sublime Text

desde la página web Selecciona el sistema Continúa la instalación
oficial. operativo que usas, y con el 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
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 teclas 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 Studio

Code desde la página Selecciona el sistema Continúa la instalación
web oficial. operativo que usas, y con el asistente hasta
descarga. finalizar.
 Ejemplo en vivo

Creación de un archivo 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 teclas en VSC

��

Para ver los atajos de teclado en VSC, haz clic para

acceder al documento
 Ejemplo en vivo

¡Vamos a practicar lo visto!

 PARA RECORDAR

Te dejamos algunos tips

● Instala todas las aplicaciones necesarias.
● Establece un objetivo a alcanzar.
● Mantén la curiosidad activa.
● No te quedes solo 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?
 ¿Sabías que
premiamos a nuestros estudiantes
por su dedicación?
Conoce los beneficios del Top 10
 Resumen
de la clase hoy
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
Muchas gracias.