Clase 00 - Introducción al Desarrollo

Web
¿Qué es el Diseño 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”.
Cuando se diseña una página web se planifica pensando en cumplir un objetivo
dar a conocer un producto y/o servicio, puede ser para vender o sólo informar,
pero siempre es tomando datos y haciendo llegar información a un usuario final
de una forma interactiva, amena y fácil para cualquiera que la consulte.
Quilly nos explica la estructura que debe cumplir el método de trabajo para el
diseño web:
“Es distinto a los demás diseños. Al ser un medio cambiante (depende del
tipo de pantalla con la que se visualice) hay que tener en diversos
conceptos:
● 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 de una aplicación
a otra? ¿Cómo relacionar los diferentes medios?
● Arquitectura: de la información: ¿Cómo organizar la información?”
Esto nos lleva a un diseño con una estructura que nos permita adaptarnos a
cualquier entorno donde se ejecute, es decir, que se pueda aplicar en cualquier
dispositivo para satisfacer las necesidades del usuario.
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.

¿Qué es el HTML?
Es un "lenguaje" de marcado (de etiquetas) para crear documentos para web.
Permite indicar dónde queremos cada elemento (párrafos, negritas, itálicas,
imágenes, etc.). Sólo se encarga de lo estructural, no del diseño (colores y
tamaños son responsabilidad de CSS). Ha sido estandarizado por la W3C
(www.w3.org). Existen varias "versiones" (html4, xhtml, html5).
Durante el curso estaremos viendo HTML y toda su estructura y etiquetas. Para
familiarizarse un poco, se manejará los términos de:

● Etiqueta: Como bien su palabra lo indica, es una palabra que hace

referencia o “etiqueta” algo, ese algo es una oración, bloque de texto,
imagen o lo que se desee mostrar.

● Atributo: Es una característica especial que se le dará a una etiqueta.

● Estructura: Es la organización que tendrá todo el lenguaje para llevar un

orden y un paso a paso de lo que debe realizar.
¿Qué es el CSS?
El CSS, en español «Hojas de estilo en cascada», está definido como un lenguaje
de diseño gráfico para definir y crear la presentación de un documento
estructurado escrito en un lenguaje de marcado.
Durante el curso se estará usando el CSS como el lenguaje de estilos para ser
aplicado al HTML, en esta sección se estará usando términos cómo:

● Estilo: Atributos que se le asignan al HTML para darle un estilo particular.

● Reglas: Características que deben cumplir las sentencias a la hora de

crear la hoja de estilos.

● Medidas: Valores que se le asignan a cada atributo para que tomen un

tamaño.

● Fuente: Tipos de letras.

¿Qué es un lenguaje de programación?

En el desarrollo web existen además de lenguajes de texto y cascadas, lenguajes
de programación que buscan alcanzar el mismo objetivo pero integrando nuevas
funcionalidades tecnológicas como son integrar funciones, conexiones a base de
datos, entre otras, es por ello que se debe diferenciar el lenguaje de
programación con los lenguajes vistos anteriormente.
El lenguaje de programación básicamente es un sistema estructurado que a
través de palabras, sentencias, métodos y llamados entre sí, logran comunicar o
ejecutar una acción en el computador permitiendo procesar datos en
información, basados en algoritmos.
En el desarrollo web existen múltiples lenguajes de programación que se pueden
utilizar para lograr un objetivo como lo es: PHP, JavaScript, Python entre otros. En
este curso no se verán los lenguajes de programación, pero sí es importante
conocer de su existencia.
Conceptos básicos sobre Internet
Antes de sumergirnos en el mundo WEB, debemos tener presentes algunos
conceptos que nos harán comprender mejor todo lo relacionado con el curso.

Internet

Internet es una red de computadoras que se encuentran interconectadas a nivel

mundial para compartir información. Se trata de una red de equipos de cálculo
que se relacionan entre sí a través de la utilización de un lenguaje universal.
El concepto Internet tiene sus raíces en el idioma inglés y se encuentra
conformado por el vocablo inter (que significa “entre”) y net (proveniente de
network que quiere decir “red electrónica”). Es un término que siempre debe ser
escrito en mayúscula ya que hace referencia a “La Red” (que conecta a las
computadoras mundialmente mediante el protocolo TCP/IP) y sin un artículo que
lo acompañe (el/la) para hacerle referencia.
Fuente: http://concepto.de/internet/#ixzz4zYUA5ee9

Navegador WEB

El navegador web o navegador de internet es el instrumento que permite a los

usuarios de internet navegar o surfear entre las distintas páginas de sus sitios
webs preferidos. Se trata de un software que posee una interfaz gráfica
compuesta básicamente de: botones de navegación, una barra de dirección, una
barra de estado (generalmente, en la parte inferior de la ventana) y la mayor
parte, en el centro, que sirve para mostrar las páginas web a las que se accede.
Los principales navegadores web del mercado son: Microsoft Edge, Firefox,
Google Chrome, Opera y Safari.

Fuente: Mirá cómo se hace

Buscadores WEB

Son los programas dentro de un sitio o página web, los cuales al ingresar
palabras clave, operan dentro de la base de datos del mismo buscador y
recopilan todas las páginas posibles, que contengan información relacionada con
lo que se esté buscando.
Estos motores de búsqueda funcionan mediante el envío de “arañas”, las cuales
son pequeños robots que se dedican a rastrear todos los sitios web a lo largo y
ancho de Internet. Otro programa, llamado un indexador, a continuación, lee
estos documentos y crea un índice basado en las palabras contenidas en cada
documento. Cada motor de búsqueda utiliza un algoritmo propietario para crear
sus índices tales que, idealmente, sólo los resultados significativos se devuelven
para cada consulta.

Fuente: https://es.wikipedia.org/w/index.php?title=Motor_de_b
%C3%BAsqueda&oldid=103402577

¿Qué es un sitio web?

Es un conjunto de archivos y directorios que están almacenados en una

computadora de acceso público. Esa computadora se llama Servidor Web y está
conectada a internet las 24hs del día. Puede ser un servidor compartido
(Hosting) o uno privado (Servidor dedicado). A esa computadora se puede
acceder de dos formas: Mediante un nombre de dominio (www.coderhouse.com)
o mediante un número de IP (162.243.9.191).
Diferencia entre una página web y un sitio web

Página web

Un documento que se puede mostrar en un navegador web como Firefox, Google

Chrome, Microsoft Edge, o Safari de Apple. A menudo también se puede
denominar "páginas web" o simplemente "páginas".

Sitio web

Es una colección de páginas web que se agrupan y normalmente se conectan de

varias maneras. A menudo es llamado "sitio web" o simplemente "sitio".

Fuente:
https://developer.mozilla.org/es/docs/Learn/Common_questions/Pages_sites_servers_and_search_engine
s

El modelo cliente-servidor

Al abrir un browser y pedir una página web, se suele hacer por su nombre
normalmente. A lo largo de toda la red de internet, hay una serie de máquinas
que hacen de “agenda” y nos dan la IP. Cuando la petición llega al servidor, el
mismo resuelve: 1) Si el sitio efectivamente está en ese servidor; 2) Qué
directorio (o carpeta) corresponde con ese sitio web; 3) Qué archivo estás
pidiendo (si no pedís ninguno, siempre se busca uno por defecto), y 4) Qué
tecnologías conforman esos archivos.
Herramientas a utilizar

Exploradores
Para probar nuestra web se necesitará más de un explorador para ver si los
mismos soportan las etiquetas aplicadas al diseño. Los exploradores más
comunes son:

● Google Chrome
● Mozilla Firefox
● Opera
● Safari
● Microsoft Edge
● Entre otros.
Lo ideal es tener al menos tres exploradores para probar la web.

Editor de Texto
Son programas que nos permiten escribir código fuente de nuestros proyectos,
al ser dinámicos son idóneos para cuando se desarrolla un proyecto con varios
lenguajes de programación, permitiendo que se codifiquen todos en una misma
herramienta, como por ejemplo: en el caso de diseño web se puede usar, HTML,
CSS, JavaScript o PHP, con el editor de texto se puede manejar cualquier
lenguaje y no causar ningún conflicto entre archivos.
El código en sí no es más que texto, que será interpretado como código cuando
se ejecute en el contexto adecuado. La diferencia es que los editores de texto
nos ayudan con la tarea de verificar dicho código, autocompletando funciones o
palabras claves propias del lenguaje de programación.
Es de suma importancia aclarar que Microsoft Word u OpenOffice, no son
editores de texto por más que manejen textos planos.
Entre los editores más conocidos se tiene:

● Visual Studio Code

● Sublime Text.
● Brackets.

Para aquellos que usan modo consola o terminal están:

● Vim – http://www.vim.org/
 ● Nano – https://www.nano-editor.org/
● Gedit – https://wiki.gnome.org/Apps/Gedit
● Notepad++ – https://notepad-plus-plus.org/
● TextWrangler – http://www.barebones.com/products/TextWrangler/

En este curso se recomienda utilizar Visual Studio Code, ya que es muy amigable
y compatible con Mac, Linux y Windows, tiene una versión gratuita muy
completa y es fácil de instalar y configurar.
Se puede descargar aquí.

Moqups
Moqups es una aplicación web que nos permite crear esquemas (wireframes),
maquetas (modelos) y prototipos de nuestros sitios web. En esta herramienta
podemos diseñar cómo queremos que se vea nuestro sitio, para luego poder
usar ese diseño como referencia y codificar cada elemento.
Moqups nos brinda componentes prediseñados (como un botón o una imagen),
y también tenemos la posibilidad de realizar prototipos complejos desde cero.
Esta aplicación web cuenta con una versión gratuita, que sólo requiere que nos
registremos con nuestra cuenta de correo de Google. Al ser online, no
necesitamos instalar nada y se puede trabajar desde cualquier PC o Mac,
siempre y cuando tengamos conexión a internet.
Un punto en contra de esta aplicación es que, en su versión free, nos permite
crear varios proyectos, pero sólo nos permite trabajar colaborativamente, y
exportar o compartir, dos proyectos. De cualquier manera, esta limitación no nos
impide utilizarla para el curso, ya que sólo trabajaremos en un sitio, por lo tanto
no precisamos más que un proyecto.
Existen más herramientas de diseño que te permiten realizar mockups de los
proyectos, en el presente artículo explican alguno de ellos: Herramientas para
crear Mockups.

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. Para activarla dependiente de cada sistema operativo es:

● Windows: Ve al menú o pantalla de Inicio, y escribe "Símbolo del Sistema"

en el cuadro de búsqueda escribe CMD.

● Linux: Aplicaciones → Accesorios → Terminal, o Aplicaciones → Sistema

→ Terminal

● OS (Mac): Ve a Aplicaciones → Utilidades → Terminal.

Para manejarse en la terminal existen comandos básicos que nos permitirán

movernos entre los diferentes directorios, crear carpetas, copiar o eliminar. Por
ejemplo: Quiero ver el archivo index.html ubicado en la Carpeta Documentos ->
Coderhouse -> Carpeta de Ejemplo -> proyecto, existen dos formas de ingresar,
por el gestor de archivos o a través de la consola con el comando “CD”.
Los comandos más útiles son:

Comando Comando (Mac

Descripción Ejemplo
(Windows) OS / Linux)

exit exit Cierra la ventana exit

 Comando Comando (Mac
Descripción Ejemplo
(Windows) OS / Linux)

cd cd Cambia el cd test
directorio

cd pwd Mostrar el cd (Windows) o pwd

directorio actual (Mac OS / Linux)

dir ls Lista dir

directorios/archivo
s

copy cp Copia de archivos copy c:\test\test.txt

c:\windows\test.txt

move mv Mueve archivos move c:\test\test.txt

c:\windows\test.txt

mkdir mkdir Crea un nuevo mkdir testDirectory

directorio

rmdir (o del) rm Eliminar un archivo del c:\test\test.txt

rmdir /S rm -r Eliminar un rm -r testDirectory

Directorio

[CMD] /? man [CMD] Obtener ayuda cd /? (Windows) o

para un comando man cd (Mac OS /
Linux)
Fuente: https://tutorial.djangogirls.org/es/intro_to_command_line/
 Estos son solo algunos de los comandos que puedes ejecutar en tu línea
de comando o consola.
Tips de ayuda
A la hora de iniciar en el mundo del diseño y desarrollo web, te
recomendamos:

● Preparar el equipo donde se estará trabajando.

● Instalar todas las aplicaciones necesarias.
● Establecer un objetivo a alcanzar.
● Organizarse.
● Mantener la curiosidad activa.
● No quedarse sólo con lo visto en clase, buscar nuevas tecnologías,
métodos y desear hacer algo fuera de lo cotidiano, ayuda a crecer
profesionalmente.
● Usar las palabras claves a la hora de buscar en la web.
● Cumplir con los desafíos.
● Practicar. La práctica hace al maestro.
● Apoyarse en los recursos de Coderhouse.
● El internet y las ganas de aprender, son los mejores amigos.

Bibliografía y web que se pueden consultar:

● Quilly, M. (2014) Preparación de proyectos de diseño Gráfico. IC Editorial.

● https://www.w3schools.com/
● https://www.creativosonline.org/blog/10-herramientas-imprescindibles-
para-crear-mockups.html
● https://www.initcoms.com/5-herramientas-gratis-para-crear-mockups/