DISEÑO

WEB
UNIDAD 03
Creación de un sitio web
Maquetación: HTML, CSS y JS

PROF. MAURO NUÑEZ

mauronu@gmail.com
Maquetación: HTML, CSS y JS

Continuando con el material de la unidad 03

ya hemos repasado en la segunda parte
del material los primeros puntos a tener
en cuenta en el último paso de la creación
de un sitio web.
Etapas del Proceso
Maquetación: HTML,de
CSS
Diseño
y JS

Una vez que tenemos listo y aprobado

la parte visual del diseño web, está resuelto
el dominio web y el servicio de hosting
y preparados los archivos que necesitaremos
para el armado de la web revisaremos
el punto de maquetación web.
Etapas del Proceso
Maquetación: HTML,de
CSS
Diseño
y JS

Maquetación Web
La maquetación web consiste en transformar
el diseño de las etapas anteriores en archivos
que puedan ser leidos por los navegadores
web y de esta manera hacer funcional y accesible
desde cualquier parte del mundo a través
de internet nuestro sitio web.
Etapas del Proceso
Maquetación: HTML,de
CSS
Diseño
y JS

Maquetación Web
Estos archivos basicamente son los que se
generan a partir de los 3 lenguajes más
utilizados para la maquetación web.
HTML5, CSS3 y Java Script. (.html .css y .js
respectivamente)
Etapas del Proceso
Maquetación: HTML,de
CSS
Diseño
y JS

Maquetación Web
Si bien estos lenguajes son básicos para la
maquetación de una web, no son los únicos
que se pueden llegar a utilizar para el armado
de un sitio web. Existen otros lenguajes de
programación que dependiendo las funciones
que busquemos alcanzar en nuestra web pueden
ser de un tipo o de otro. Por ejemplo para poder
interactuar con las bases de datos de un servidor
se puede utilizar el lenguaje .PHP.
Ampliaremos este punto en la última unidad.
Etapas del Proceso
Maquetación: HTML,de
CSS
Diseño
y JS

Maquetación vs. Programación

Si bien los 3 lenguajes más utilizados para la
maquetación web son HTML CSS y JAVA SCRIPT
vale aclarar que los dos primeros son
puramente lenguajes para la Maquetación web
y el tercero (JS) es un lenguaje de programación
propiamente dicho.
Maquetación: creación
Maquetación, HTML, CSS y JS
y publicación de una web

Maquetación vs. Programación

La diferencia radica en que los lenguajes para la
maquetación HTML y CSS, nos permiten armar
la estructura de las páginas web, definir como
se van a mostrar y los hipervinculos que pueden
tener entre ellas, por eso se trata más bien de
lenguajes de Maquetación, nos permiten armar
la maqueta del sitio web. Estos lenguajes de
maquetación son los que debe manejar un
diseñador web ya que influyen directamente
en como se presenta el contenido, es decir en el
diseño de la interfaz web.
Maquetación: creación
Maquetación, HTML, CSS y JS
y publicación de una web

Maquetación vs. Programación

Los lenguajes de programación tienen otra lógica
de base (lógica de programación). Su uso
está más relacionados con las funciones que se
pueden llevar adelante dentro de una web, como
por ejemplo la interacción avanzada con los
elementos de la web, la actualización de contenido
a través de un CMS, diferentes servicios que se
pueden encontrar en una web, etc.-
Al tener otra lógico y apuntar a otros tipo de
funciones estos lenguajes suelen ser desarrollados
específicamente por programadores.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Maquetación vs. Programación

El desarrollador Full Stack es aquella persona que tiene los
conocimientos y la capacidad de poder llevar adelante sitios
web manejando tanto los lenguajes y conceptos de maque-
tación como de programación.
Para los/as que están interesados/as en esta área van a poder
encontrar varios espacios de formación y contenido en inter-
net para poder ampliar.
Comparto un link en donde se desarrolla este concepto de
Full Stack Developer:

https://www.viewnext.com/que-es-un-full-stack-developer/
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Back End y Front End

Vamos a detenernos un instante en estos dos conceptos de Back End y de
Front End que nos van a permitir entender mejor ciertos aspectos de la ma-
quetación y de la programación de un sitio web...

Front End:
El Front End es la parte que el usuario ve al navegar una web. Es la parte de
un sitio web o interfaz que interactúa con los usuarios, por eso decimos que
está del lado del cliente (Recordar el modelo Cliente/Servidor). Está ma-
yormente relacionado con el Diseño Web. Son todas las tecnologías de
diseño y desarrollo web que corren en el navegador y que se encargan de la
interactividad con los usuarios como HTML, CSS y JS.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Back End y Front End

Back End:
Es el “Destrás de escena”. Es la parte del sitio con la que los usuarios no
tienen contacto. Es la parte que se conecta con la base de datos y el servi-
dor que utiliza dicho sitio web, por eso decimos que el backend corre del
lado del servidor. Para poder controlar esta parte y poder llevar adelante
acciones en relación a esto se requiere habilidades y capacidades a nivel de
programación.
En una web dinámica los contenidos que el usuario puede visualizar en un
sitio web a través del Front End, están administrados y procesados desde el
Back End. En el siguiente artículo podrán ampliar aún más estos conceptos
y ver que lenguajes están relacionados con cada parte:

https://platzi.com/blog/que-es-frontend-y-backend/
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

HTML
Html es un lenguaje para escribir las páginas web de nuestro sitio.
Por lo tanto como todo lenguaje tiene sus propias sintaxis y semán-
tiva que tenemos que conocer, es decir sus propios elementos los
significados del los mismos y las reglas con que se debe escribir el
lenguaje.
Html son las siglas de “Hiper Text Marckup Languaje”, en español
Lenguaje de Hiper Texto Marcado.
El lenguaje de Marcado tiene como fin definir o identificar los ele-
mentos dentro de un html. Esto permite definir la estructura del
contenido, donde se encontrará y que tipo de contenido es. Este
proceso de marcar el contenido, se lleva a cabo a través de Etique-
tas (o en ingles Tags).
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

HTML
Por ejemplo una etiqueta para definir que un contenido dentro de la
web es un párrafo se define y escribe de la siguiente manera:

Contenido de la etiqueta
<p>Este es el contenido del párrafo</p>
Etiqueta Etiqueta
de apertura de cierre
Etiqueta de apertura:
carácter <, seguido del nombre de la etiqueta (en este caso “p” que hace
referencia a un párrafo)y terminando con el carácter >
Etiqueta de cierre:
carácter <, seguido del carácter /, seguido del nombre de la etiqueta que estamos
cerrando y terminando con el carácter >
Contenido de la etiqueta
Es lo que se va a visualizar en el navegador con el tratamiento propio de un párrafo
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

HTML
A su vez existen atributos que son términos especiales que se colo-
can dentro de la etiqueta de apertura que sirven para controlar el
comportamiento del elemento o modificarlo.

Valor del
atributo
<p class=”destacado”>Este es el contenido del párrafo</p>
Nombre
del atributo
Atributo:
El atributo se escribe dentro de la etiqueta de apertura dejando un espacio entre el nombre
de la etiqueta (p) y la declaración del atributo. El mismo se forma con un Nombre de Atributo
que debemos conocer para entender su funcionalidad seguido del caracter = y luego sin dejar
espacios se escribe entre comillas el valor del atributo.
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

CSS
Si el HTML es el lenguaje que me permitirá estructurar el contenido
dentro de una web, definir que tipo de contenido es y distribuirlo, el
css nos va a definir como vamos a presentar ese contenido, como
lo va a visualizar el usuario.
CSS son las siglas de Cascading Style Sheets (es decir, hoja de estilo
en cascada).
¿Por qué en cascada? Está relacionado con la herencia, es decir el
estilo definido en el padre influirá y se aplicará también en todos los
elementos hijos. Por lo tanto lo que definimos en una caja general,
se replicará en todas las cajas que se contengan dentro de esta, a
no ser que en alguna caja inferior (hijo) se vuelva a definir de nuevo
alguna propiedad, entonces esta última le dará el estilo a la caja hijo,
dejando de lado la propiedad que tenga la caja padre.
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

CSS
Como todo lenguaje, el CSS, tiene su propia semántica y elementos
para definir los estilos:
Cada uno de los estilos que se definen en un css se lo denomina
Regla y se escribe de la siguiente manera:

Declaración
p{color:red;}
Selector
Selector:
Identifica al elemento o los elementos HTML a quien le vamos a aplicar la regla o estilo,
en este caso a todos las etiquetas p (párrafos) que se encuentren dentro del html.
Decalaración:
Seguido del selector y entre llaves se escribe la declaración que está formada por dos partes,
El nombre de la propiedad (color en el ejemplo) y el valor de la propiedad (red en el ejemplo).
Existen muchas propiedades y diferentes tipos de valores de popiedad según el caso.
En cada declaración de puede color más de una propiedad separadas por punto y coma (;).
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

HTML5 y CSS3
Las última versiones de html y css son la Versón 5 para html
(HTML5) y la versión 3 para css (CSS3)
Cada versión resulta de la revisión de versiones anteriores que a
partir del uso y el avance de internet y las necesidades de desarro-
llos que van surgiendo, se dejan de lado algunas etiquetas que
quedan obsoletas y se suman nuevas etiquetas que le dan mayor
robustes al lenguaje permitiendo responder de manera más eficien-
te a las necesidades de las web.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

W3C
Estas versiones se reglamentan a través de un
consorcio internacional denominado World
Wide Web Consortium (W3C) el cual se dedica
exclusivamente al desarrollo de las diferentes
versiones y a definir recomendaciones y están-
dares para las buenas prácticas profesionales y
para unificar la manera en que los navegadores
deben interpretar y mostrar los contenidos y las
interfaces de los sitios web. Es así como los na-
vegadores deben tener en cuenta estos estánda-
res para poder aprovechar las ventajas de cada
versión de los lenguajes.

https://www.w3c.es/ayuda/#activity
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Como veran esta etapa del desarrollo web es muy específico y técnico a la vez
que es muy amplio y tiene muchas aristas que son necesarias manejar para poder hacer
uso de las mismas. Lo positivo es que hay un gran material que pueden encontrar
en internet para poder formarse en estos lenguajes y aspectos del desarrollo web.
En general el material que pueden encontrar es muy bueno pero siempre les
recomiendo que mientras más cerca de las fuentes estén mejor.

Este es un espacio que se mantiene actualizado con tutoriales y cursos interesantes

sobre los lenguajes relacionados a la w3c.

https://www.w3schools.com/

Si bien está en inglés mucho de su contenido se puede traducir al español.

Por otro lado encontraran muchos tutoriales ya sea en videos o formato web o en plataformas
de formación en donde pueden desarrollar las habilidades relacionadas con estos lenguajes.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
El responsive design es una respuesta a la necesidad de adaptación del diseño a los
diferentes tamaños y resoluciones de pantallas que existen actualmente en el
mercado, sobre todo teniendo en cuenta el uso de móviles y tablets.
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Antes de continuar vamos a ver cuales son las ventajas de una web optimizada para
móviles y tablets:

Diseño adaptado a nuestra pantalla

Comodidad a la hora de navegar y leer textos
al no tener que usar el zoom (Experiencia de uso).
Contenido más directo, los elementos irrelevantes se eliminan.
Mayor impacto visual.
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Un solo sitio web para todas los tamaños de pantalla
En lugar de construir un sitio web para cada tipo de dispositivo (smartphone, tablet,
ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola
estructura HTML y utilizando CSS3 mediante las reglas de media queri podemos definir cuál
es el cambio que se debe hacer en la manera en que se visualizan los contenidos dependien-
do el temaño de pantalla definido en la regla. De esta forma, la website detecta desde qué
tamaño de pantalla está accediendo el usuario y muestra la versión más optimizada para ese
medio, reorganizando los elementos de la web e incluso discriminando algunos de
ellos si es necesario (menos imágenes, más ligeras, redistribución de las columnas en
el diseño, menos texto, etc.).

Resumiendo…
El responsive design permite que un mismo html (contenido) se muestre de manera
diferenciada a través de CSS3 con la regla media queri dependiendo el tamaño de
pantalla en el que se visualice
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Contenido
Etapas
Maquetación:
del Proceso
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Como pensar el diseño
Ya desde la etapa anteriores del proceso de diseño se contempla la manera en que se va a
visualizar el sitio web en los dipositivos móviles.
Esto exige pensar el contenido de manera tal que se pueda visualizar como bloques que
iremos adaptando de lugar tamaño importancia según las pantallas.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Mobile First
Básicamente se refiere a un modo de diseñar que tenga en cuenta, en primera instancia, un
dispositivo móvil. Pantallas reducidas en comparación a los monitores que usamos normal-
mente con los ordenadores, y tras tener la maqueta preparada, realizar un escalado, es decir,
aumentar el tamaño y adaptarlo a una pantalla de escritorio.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Mobile First
Es solo una manera de encarar el proyecto si se comienza pensando primero en los móviles
o pensando en la versión de desktop. No hace necesariamente al resultado final, siempre y
cuando contemplemos la necesidad de adaptación del diseño a los diferentes tamaños de
pantalla.
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Responsive Design
Recursos online
Los siguientes recursos les permitirá visualizar ejemplos de responsive design y a su vez eva-
luar que tan bien se adaptan las web a los diferentes tamaños de pantallas. En cada caso in-
gresen la url de la web que desean visualizar y podran verlo en las diferentes pantallas.
Los invito a probarlas y observar con ojos de diseñadores como se adapta el contenido en
cada caso:

http://www.responsinator.com/

http://ami.responsivedesign.is/
Etapas del Proceso
Maquetación:
Maquetación, HTML,de
CSS
creación yDiseño
y JS
publicación de una web

Seguiremos ampliando en la próxima

unidad alternativas para la maquetación y
creación de sitio web.
Muchas Gracias :)