Diseño web

L/O/G/O

Diseño

Web

Ing. Rafael Edwin Gordillo Flores

Diseño Web
Geocities ya no existe, el diseño de paginas web ya
no existe, tú ya no haces paginas web, tú ahora haces
aplicaciones web.
Ese cuento de tener presencia en internet ya no
existe, es hora de evolucionar y crear sitios
interactivos.

Diseño Web
– Por ejemplo, Path es una aplicación que aparece
primero en mundos móviles que cada día nos invaden
más.
– Otro ejemplo es Facebook y Twitter, en donde
colocamos contenido todo el día. Recuerda que la Web no
es un poster, ahora trata de una aplicación interactiva.
– En Internet la interactividad no es opcional es obligatoria
– Y es en donde entramos a ver conceptos como Mobile

First y Responsive Design. Vemos la
tendencia de que el contenido se crea primero para los
móviles y no para un escritorio.

Diseño Web

Path

Vine

Instagram

Diseño Web
– El escritorio ha dejado de ser prioridad en Internet a
excepción de los que trabajamos en esta área.
– Ahora bien, no sólo debemos considerar la parte móvil, las
pantallas también varían y ahora tenemos Retina Display.
– Con Retina Display se implica que donde teníamos
un pixel, ahora tengamos 4 píxeles. Es decir, la resolución
de la pantalla será 4 veces más grande. Por lo tanto,
nuestra pantalla y todo su diseño se deben adaptar a este
para que se genere una calidad óptima.
– ¿Te imaginas una pantalla 4 veces más grande de la que
ves en tu iPhone?

Diseño Web
Tips para Diseño Retina
 Usar CSS sí se puede reemplazar por imágenes cortadas.
 Usar vectores y SVG (fuerza al navegador a activar la
tarjeta gráfica) mientras puedan, sin abusar del mismo.
 Exportar las imágenes a el doble de la resolución y al 50%
de calidad.

Diseño Web
Áreas de un equipo de desarrollo que
crean las aplicaciones modernas.
 Frontend
Todo lo que corre en el navegador, en el cliente: HTML, CSS
y Javascript
 Backend
Todo lo que corre en el servidor: Django, Python, Node.js,
Express,js.
 Bases de datos
Todos los datos y jerarquización de los mismos: MySQL,
Postgres, Mongodb.

Diseño Web
Bases de datos
Existen 2 tipos de bases de datos:
Relacionales: Bases de datos que manejan relaciones entre
tablas. Por ejemplo: MySQL, Postgres, SQL Server y Oracle.
No relacionales: Bases de datos que entre tablas no llevan
relación alguna. Por ejemplo: MongoDB, Redis y CouchDB.

Diseño Web
Pasos para desarrollar un proyecto
Primero debemos crear un prototipo o mockup, lo más feo
posible para no cohibir la creatividad del diseñador y luego
realizar un mockup (prototipo-boceto)mas especifico, paso a
paso, hasta llegar al diseño deseado.
No seas neurótico con esto y que tu diseñador no sea un
mico llenando de colores tus mockups. Debe ser usable y
práctico.
Luego, maqueto mi diseño y en paralelo estará alguien en el
backend haciendo las bases de datos. Todo será un trabajo
en equipo, en conjunto y bonito.

Diseño Web
Conceptos básicos
 HTML: Es un lenguaje de etiquetas que modela los datos a
mostrar en un navegador. ¡No es programación!
 CSS: Es un lenguaje de definición de elementos de diseño
gráfico para HTML. ¡No es programación!
 Javascript: Es el lenguaje de programación de la Web. Con
él, denominas el comportamiento de un sitio. En niveles
más adelante, encontraremos “Frameworks” que
sintetizan el lenguaje para hacerte la vida más fácil, como
jQuery.
 HTML5: Es una agrupación de tecnologías como la
semántica de HTML, localstorage, CSS3, entre otros.

Diseño Web
Conceptos básicos
Cuando empezamos a trabajar en HTML empezamos con la
etiqueta HTML en donde tenemos hijos como “head” y “body”.
En “head” se colocan etiquetas como title, meta y link.
En body no tenemos etiquetas obligatorias pero puedes
utilizar “header” para la cabecera de tu página, o “nav” para
el menú de la página.
Tenemos otras etiquetas como “p” la cual define los párrafos.

Diseño Web
Conceptos básicos
Primero tenemos un header con un logo, un título y un avatar
con un elemento de navegación, luego tenemos una barra de
navegación la cual será un nav.

Segundo tenemos toda una sección dedicada al contenido
con cada uno de los elementos con etiqueta article con su
imagen, botones, título y párrafos.
Cuando iniciamos a codear debemos poner la directriz, la
cual indica que utilizaremos HTML5:

Diseño Web
Configurar Sublime Text (Distraction Free Mode)

Diseño Web
Como instalar paquetes en Sublime Text
– Ingresar a la pagina, y copiar el script de Sublime Text 2
https://sublime.wbond.net/installation#st2

Diseño Web
– El script copiado se pegara en la consola de Slublime Text
después de pegar se dará un enter y después se reiniciara
el programa.

Diseño Web
– Después de reiniciar ya tenemos el instalador de paquetes
instalado, para poder abrir se tecleara: Ctrl (control) + Shift + P
cargara todos los repositorios actuales para poder instalar.

Diseño Web

Diseño Web
Conceptos básicos
Aparecen “section” y “article”, los cuales significan
secciones y artículos respectivamente.
Si observamos detenidamente, HTML funciona como un
árbol.
Las etiquetas funcionan así:

Diseño Web
Conceptos básicos
Y también pueden tener atributos:

O etiquetas sin valores pero que siempre se deben cerrar:

Una vez entendido esto, vamos a ver cómo está organizada
nuestra página semánticamente.

Diseño Web
Empezamos a crear nuestro código
Vamos a ver cómo está organizada nuestra página
semánticamente.
Primero tenemos un header con un logo, un título y un avatar
con un elemento de navegación, luego tenemos una barra de
navegación la cual será un nav.
Segundo tenemos toda una sección dedicada al contenido
con cada uno de los elementos con etiqueta article con su
imagen, botones, título y párrafos.
Cuando iniciamos a codear debemos poner la directriz, la
cual indica que utilizaremos HTML5:

Diseño Web
Antes de codificar debemos entender como esta organizada
mi aplicación desde un punto de vista semántica

Diseño Web
Ahora crearemos la estructura semántica del header, en
donde el único meta que usaremos será “charset” para
decirle al navegador que la codificación es UTF-8.
Luego crearemos un header con el título, la imagen y el
avatar dentro de un figure:

Diseño Web
Probamos

Diseño Web
Ya tenemos listo el header ahora trabajaremos en el menú

Diseño Web
Ahora trabajaremos con la sección principal que será el
contenido y el footer.

Diseño Web
Ahora trabajaremos con la sección principal.

Diseño Web
Probamos.

Diseño Web
Ahora crearemos un archivo estilos.css en la carpeta donde
se encuentra el index.html

Diseño Web
Insertaremos las imágenes
Empezamos a insertar la imágenes aplicando los tips de
Retina, el logo en el diseño mide 80x80 px, entonces debe
medir para la web y se vea muy bien 160x160 px

Diseño Web
Insertaremos código al archivo
estilos.css
Empezamos con el body

Diseño Web
Crearemos el diseño básico del header
Empezamos a explicar el modelo de caja, debemos
diferenciar entre un margen interno y externo en css todos los
elementes de diseño son cajas y las cajas tienen
normalmente un ancho y un alto un margen interior (padding)
y un margen exterior(margin).

Diseño Web
Una manera de manejar mejor el margin es de la siguiente
sintaxis: margin: top right bottom left

Diseño Web
Ahora los valores reales serán:

Diseño Web
Trabajo:
Diseño móvil 480 -720 / Diseño desktop 728 - 1200
Cual es la diferencia entre em y rem.
Se puede utilizar reset.css y normalize.css oh ambos.

L/O/G/O

GRACIAS
Ing. Rafael Edwin Gordillo Flores

Diseño web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Diseño web

Similar a Diseño web (20)

Diseño web