Clase 0 - Introducción Al Desarrollo Web - CODER

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 ● Instalar y probar cada una de ellas.
CLASE
GLOSARIO:
Arrastrar archivos: implica mover archivos, Controlador de versiones: es un sistema que registra
trasladarlos de una carpeta a otra, o de una carpeta a los cambios realizados en un archivo o conjunto de
un explorador, utilizando el mouse. archivos a lo largo del tiempo, permitiéndote recuperar
versiones específicas más adelante.
Comprimir archivos: es el resultado de tratar un
archivo, documento, carpeta, etcétera, con un Framework: es una estructura conceptual y tecnológica
programa específico para comprimir, cuyo objetivo de asistencia, definida normalmente con artefactos o
principal es reducir su peso para que ocupe menos módulos concretos de software, que puede servir de
espacio. Con este proceso no se pierde la base para la organización y el desarrollo de software
información original.
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 de Prototipado y conceptos Primeros pasos con

Desarrollo Web 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
Se trata de una red de Es un sistema informático que
Es el instrumento que
equipos de cálculo, que se busca todo tipo de información
permite a los usuarios de
relacionan entre sí a través en la web, almacenando la
internet navegar entre las
del uso de un lenguaje misma en una enorme base de
distintas páginas de sitios
universal. datos, para arrojar la
webs.
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:
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
Selecciona el Continúa la
Descarga Balsamiq
sistema operativo instalación con el
de la 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 página sistema operativo instalación con el
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

Clase 0 - Introducción Al Desarrollo Web - CODER

Cargado por

Copyright:

Formatos disponibles

Clase 0 - Introducción Al Desarrollo Web - CODER

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 0 - Introducción Al Desarrollo Web - CODER

Cargado por

Copyright:

Formatos disponibles

Clase 0.

OBJETIVOS DE LA ● Instalar y probar cada una de ellas.

Ir al Directorio: podrás hacerlo a través del

Introducción al curso de Prototipado y conceptos Primeros pasos con

CONCEPTOS BÁSICOS SKETCH LISTAS

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

ESTRUCTURA HTML DEL

Marie Quilly (2014)

● 👀 Navegabilidad: ¿Dónde puede ir el usuario y de qué forma?

Durante el curso estaremos viendo HTML,

El CSS, en español «hojas de estilo en cascada», es un

Algunos términos que utilizaremos serán:

SITIO WEB Y PÁGINA WEB

A lo largo de toda la red de internet, hay una serie de máquinas que

Para probar tu web, necesitarás varios exploradores, con

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

Es una herramienta que facilita la creación de

Su finalidad es ayudar al desarrollo de

En informática, una terminal o consola es la

Descarga Sublime Selecciona el Continúa la

1. Accede a la paleta de comandos con las

2. Escribe Install Package Control, y

También podría gustarte