L/O/G/O

Diseo

Web

Ing. Rafael Edwin Gordillo Flores

Diseo Web
Geocities ya no existe, el diseo 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.

Diseo Web
Por ejemplo, Path es una aplicacin que aparece primero en mundos mviles que cada da nos invaden ms.

Otro ejemplo es Facebook y Twitter, en donde colocamos contenido todo el da. Recuerda que la Web no es un poster, ahora trata de una aplicacin 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 mviles y no para un escritorio.

Diseo Web

Path

Vine

Instagram

Diseo Web
El escritorio ha dejado de ser prioridad en Internet a excepcin de los que trabajamos en esta rea.

Ahora bien, no slo debemos considerar la parte mvil, las pantallas tambin varan y ahora tenemos Retina Display.
Con Retina Display se implica que donde tenamos un pixel, ahora tengamos 4 pxeles. Es decir, la resolucin de la pantalla ser 4 veces ms grande. Por lo tanto, nuestra pantalla y todo su diseo se deben adaptar a este para que se genere una calidad ptima. Te imaginas una pantalla 4 veces ms grande de la que ves en tu iPhone?

Diseo Web
Tips para Diseo Retina
Usar CSS s se puede reemplazar por imgenes cortadas. Usar vectores y SVG (fuerza al navegador a activar la tarjeta grfica) mientras puedan, sin abusar del mismo. Exportar las imgenes a el doble de la resolucin y al 50% de calidad.

Diseo 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 jerarquizacin de los mismos: MySQL, Postgres, Mongodb.

Diseo 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 relacin alguna. Por ejemplo: MongoDB, Redis y CouchDB.

Diseo Web

Diseo Web
Pasos para desarrollar un proyecto
Primero debemos crear un prototipo o mockup, lo ms feo posible para no cohibir la creatividad del diseador y luego realizar un mockup (prototipo-boceto)mas especifico, paso a paso, hasta llegar al diseo deseado.
No seas neurtico con esto y que tu diseador no sea un mico llenando de colores tus mockups. Debe ser usable y prctico. Luego, maqueto mi diseo y en paralelo estar alguien en el backend haciendo las bases de datos. Todo ser un trabajo en equipo, en conjunto y bonito.

Diseo Web
Post

Diseo Web
Post Individual

Diseo Web
Post Individual

Diseo Web
Conceptos bsicos
HTML: Es un lenguaje de etiquetas que modela los datos a mostrar en un navegador. No es programacin! CSS: Es un lenguaje de definicin de elementos de diseo grfico para HTML. No es programacin! Javascript: Es el lenguaje de programacin de la Web. Con l, denominas el comportamiento de un sitio. En niveles ms adelante, encontraremos Frameworks que sintetizan el lenguaje para hacerte la vida ms fcil, como jQuery. HTML5: Es una agrupacin de tecnologas como la semntica de HTML, localstorage, CSS3, entre otros.

Diseo Web
Conceptos bsicos
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 pgina, o nav para el men de la pgina.
Tenemos otras etiquetas como p la cual define los prrafos.

Diseo Web
Conceptos bsicos
Primero tenemos un header con un logo, un ttulo y un avatar con un elemento de navegacin, luego tenemos una barra de navegacin la cual ser un nav. Segundo tenemos toda una seccin dedicada al contenido con cada uno de los elementos con etiqueta article con su imagen, botones, ttulo y prrafos.

Cuando iniciamos a codear debemos poner la directriz, la cual indica que utilizaremos HTML5:

Diseo Web
Configurar Sublime Text (Distraction Free Mode)

Diseo 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

Diseo Web
Como instalar paquetes en Sublime Text
El script copiado se pegara en la consola de Slublime Text despus de pegar se dar un enter y despus se reiniciara el programa.

Diseo Web
Como instalar paquetes en Sublime Text
Despus 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.

Diseo Web
Como instalar paquetes en Sublime Text
Despus 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.

Diseo Web
Como instalar paquetes en Sublime Text

Diseo Web
Conceptos bsicos
Aparecen section y article, los cuales significan secciones y artculos respectivamente.

Si observamos detenidamente, HTML funciona como un rbol. Las etiquetas funcionan as:

Diseo Web
Conceptos bsicos
Y tambin pueden tener atributos:

O etiquetas sin valores pero que siempre se deben cerrar:

Una vez entendido esto, vamos a ver cmo est organizada nuestra pgina semnticamente.

Diseo Web
Empezamos a crear nuestro cdigo
Vamos a ver cmo est organizada nuestra pgina semnticamente.
Primero tenemos un header con un logo, un ttulo y un avatar con un elemento de navegacin, luego tenemos una barra de navegacin la cual ser un nav. Segundo tenemos toda una seccin dedicada al contenido con cada uno de los elementos con etiqueta article con su imagen, botones, ttulo y prrafos. Cuando iniciamos a codear debemos poner la directriz, la cual indica que utilizaremos HTML5:

Diseo Web
Empezamos a crear nuestro cdigo
Antes de codificar debemos entender como esta organizada mi aplicacin desde un punto de vista semntica

Diseo Web
Empezamos a crear nuestro cdigo
Ahora crearemos la estructura semntica del header, en donde el nico meta que usaremos ser charset para decirle al navegador que la codificacin es UTF-8.

Luego crearemos un header con el ttulo, la imagen y el avatar dentro de un figure:

Diseo Web
Empezamos a crear nuestro cdigo
Probamos

Diseo Web
Empezamos a crear nuestro cdigo
Ya tenemos listo el header ahora trabajaremos en el men

Diseo Web
Empezamos a crear nuestro cdigo
Probamos

Diseo Web
Empezamos a crear nuestro cdigo
Ahora trabajaremos con la seccin principal que ser el contenido y el footer.

Diseo Web
Empezamos a crear nuestro cdigo
Ahora trabajaremos con la seccin principal.

Diseo Web
Empezamos a crear nuestro cdigo
Probamos.

Diseo Web
Empezamos a crear nuestro cdigo
Ahora crearemos un archivo estilos.css en la carpeta donde se encuentra el index.html

Diseo Web
Insertaremos las imgenes
Empezamos a insertar la imgenes aplicando los tips de Retina, el logo en el diseo mide 80x80 px, entonces debe medir para la web y se vea muy bien 160x160 px

Diseo Web
Insertaremos cdigo al archivo estilos.css
Empezamos con el body

Diseo Web
Crearemos el diseo bsico del header
Empezamos a explicar el modelo de caja, debemos diferenciar entre un margen interno y externo en css todos los elementes de diseo son cajas y las cajas tienen normalmente un ancho y un alto un margen interior (padding) y un margen exterior(margin).

Diseo Web
Crearemos el diseo bsico del header
Una manera de manejar mejor el margin es de la siguiente sintaxis: margin: top right bottom left

Diseo Web
Crearemos el diseo bsico del header
Ahora los valores reales sern:

Diseo Web
Trabajo:
Diseo mvil 480 -720 / Diseo 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