Aplicaciones y flujos de trabajo para diseño web.
Marlon Ceballos -‐ @adobexpert
Adobe Community Professional / Adobe Cer;fied Instructor
pert pert
Learn design & code Learn design & code
www.xpert.co
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
Marlon  Ceballos
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Marlon Ceballos • www.xpert.co • Autor en Lynda.com
Learn
pert
design & code
Learn
www.xpert.co
pert
design & code
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué veremos hoy?
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Obje?vos • Conoceremos el flujo de trabajo de diseño web • Entenderemos las diferentes tecnologías y lenguajes • Aprenderemos sobre herramientas que podemos usar.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Iniciemos
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es un si?o web? • Colección de archivos relacionados • Se accede mediante un nombre de dominio • Se aloja en un servidor o hos;ng.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué es un si?o web? Servidor web
HTML/CSS/JS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Por qué dedicarme al diseño web? • Es súper cool (en serio) • Amplio rango de oportunidades laborales • Amplias oportunidades de emprendimiento.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Conocimientos requeridos en diseño web • • • • • • •
Arquitectura de información Accesibilidad Usabilidad SEO Diseño gráfico Herramientas gráficas Lenguajes.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Arquitectura de información La arquitectura de información permite organizar, filtrar y estructurar la información que hará parte de un si;o web.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Accesibilidad La accesibilidad permite asegurar el acceso al contenido de un si;o web por parte de todos los usuarios.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Usabilidad La usabilidad permite ofrecer la mejor experiencia de usuario posible en nuestro si;o web facilitando el acceso a la información del mismo y eliminando la confusión.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
SEO El SEO (Search Engine Op;miza;on) es el proceso de op;mizar el contenido de nuestro si;o web para mejorar la visibilidad del mismo por parte de los buscadores.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
SEO Tu si;o web
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
SEO
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Diseño gráfico Planear, organizar y desarrollar comunicaciones visuales que transmitan mensajes específicos.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Herramientas
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Lenguajes • • • • • •
HTML CSS Javascript PHP MySQL etc, etc…
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Lenguajes
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
HTML
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS
main.css
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
HTML y CSS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
HTML y CSS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Javascript • Generación de interac;vidad • Lenguaje de programación • Uso de librerías.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
PHP Lenguaje de programación para generación de contenido dinámico.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
MySQL • Sistema de ges;ón de bases de datos.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Cómo funciona un si?o web <?php ?>
Consulta DB
HTML
HTML/CSS/JS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Otros conocimientos
Eso es demasiado conocimiento... Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recomendaciones • • • •
Pierde el miedo al código Disfruta aprender (y dedica ;empo a hacerlo) Experimenta con nuevas tecnologías En lo posible especialízate pero ten una visión global.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Procesos y aplicaciones
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Primeras etapas • •
Sketch: esquema muy básico sin incluir imágenes, textos ni color Sirve para centrar al cliente en los contenidos y su jerarquía.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Primeras etapas •
•
Wireframe: etapa que busca aprobación final de contenidos y estructura general En lo posible debe tenerse ya todo el texto defini;vo pero sin preocuparse por el ;po de fuente.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Primeras etapas Proto;po: sirven evaluar y definir la la interacción como rollovers de botones, validación de formularios o cualquier elemento con el que el usuario cuando interactúe.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Maquetación web
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
HTML • Hypertext Markup Language • No es un lenguaje de programación • Fácil de aprender.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
HTML • • •
Crear la estructura HTML (simple, por favor) E;quetar el contenido Enlazar imágenes.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS • • • •
Crear la capa de presentación Colores, ;pogracas, tamaños Animación e interacción básicas Media Queries.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis CSS
p {font-family: Arial; color: #F00} Selector Declaración
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Sintaxis  CSS
p {font-family: Arial; color: #F00} Propiedad Valor
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Modelo de caja Margin Padding
Contenido Border
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Javascript • •
jQuery Animación e interac;vidad.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Procesos y aplicaciones
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
CSS
Learn
pert
design & code
www.xpert.co
No importa la herramienta que elijas si la usas correctamente.
CERTIFIED INSTRUCTOR
Design Master / Web Master
Primeras e tapas No me convence eso de programar…
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Escribir código? No entres en pánico, si usas Adobe Muse no ;enes que escribir código.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe Muse
En serio? Sin código? Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe Muse • • • •
Herramienta visual para crear micro-‐si;os web Interfaz similar a otras aplicaciones No genera contenido dinámico Genera código HTML, CSS y Javascript.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe Muse
Aprendí Muse y ahora soy diseñador web! Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
No e scribes t u c ódigo? Alterna?va a Flash? Entonces no mereces estar en • Responsive el mundo web (ni siquiera • No requiere plug-‐ins mereces vivir)
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
El mejor consejo p ara e l d iseñador d e h oy: Alterna?va a Flash? • Responsive • No requiere plug-‐ins
Pierde miedo al código!
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Wordpress • Sistema de ges;ón de contenidos o CMS (Content Management System) • Licencia GPL y es sofware libre • Requiere un servidor con soporte para PHP, MySQL y Apache • Flexible y personalizable.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe Dreamweaver • Vista diseño + vista de código • Automa;zación de tareas • Necesitas conocer la sintaxis del código que vas a trabajar.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Y si te digo... Edge Code • Vista diseño + vista de código • Automa;zación de tareas • Necesitas conocer la sintaxis del código que vas a trabajar.
que los hombres usamos editores de código? Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Brackets • • • •
Sin herramientas gráficas Orientado a programadores Uso de plug-‐ins Más liviano.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Qué hay de Flash?
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Importante: Si usas Flash para web, hay tabla!
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Adobe Edge Animate • Animación • Interac;vidad • Integración de jQuery.
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Gracias!
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentación (y otras)
www.xper.co/presenta
Learn
pert
design & code
www.xpert.co
CERTIFIED INSTRUCTOR
Design Master / Web Master