Una introducción a la maquetación web. Se muestran los primeros pasos a seguir y una revisión de editores HTML y CSS

1. MAQUETACIÓN WEB
PSD, AI -> HTML

2. MAQUETACIÓN WEB
Proceso de traslado de la propuesta gráfica de un
formato PSD o AI a HTML + CSS + JS

3. EDITORES HTML, CSS
Son aplicaciones diseñadas con el fin de facilitar
la creación y edición de documentos HTML o
XHTML.
Su complejidad puede variar desde la de un
simple editor de texto plano hasta entornos
WYSIWYG.

5. WYSIWYG
What You See Is What You Get

6. SOFTWARE LIBRE
Brackets (multiplataforma)
http://brackets.io/
Notepad++ (PC)
http://notepad-plus-plus.org/
Atom (Multiplataforma)
https://atom.io/
TextWrangler (Mac OS)
https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12

7. BAJO LICENCIA
HTML Kit (PC)
http://www.htmlkit.com/
Coda (Mac OS)
https://itunes.apple.com/us/app/coda-2/id499340368?mt=12
Coffeecup
http://www.coffeecup.com/free-editor/
Sublime text (multiplataforma)
http://www.sublimetext.com/
CodeEdit (Mac OS)
https://itunes.apple.com/us/app/codeedit/id506732810?mt=12
Dreamweaver (Multiplataforma)
http://www.adobe.com/mx/products/dreamweaver.html

8. OTRAS HERRAMIENTAS
Adobe Muse
http://www.adobe.com/mx/products/muse.html

9. EDITORES CSS
Expresso
http://macrabbit.com/espresso/
Coda (Mac OS)
https://itunes.apple.com/us/app/coda-2/
id499340368?mt=12
TextWrangler (Mac OS)
https://itunes.apple.com/us/app/textwrangler/
id404010395?mt=12

10. FRAMEWORK
“Marco de trabajo”
Conjunto de herramientas

11. FRAMEWORKS PARA
APLICACIONES WEB
Bibliotecas de recursos
Estructura de plantillas
Reutilización de código

12. FRAMEWORKS PARA
APLICACIONES WEB
Bootstrap
http://getbootstrap.com
Foundation
http://foundation.zurb.com
960
http://960.gs

13. Aplicación usada para crear, editar, gestionar y
publicar contenido digital multimedia en diversos
formatos.
CMS
CONTENT MANAGEMENT SYSTEM

14. CMS
CONTENT MANAGEMENT SYSTEM
Wordpress
Joomla
Drupal

15. PROCESO
Exportar elementos gráficos por separado en jpg ó
png
Crear slices y HTML desde Photoshop o Illustrator
(no muy recomenable)
Optimizar imágenes
Estructurar HTML
Aplicar estilos CSS

16. HTML NO ES LENGUAJE DE
PROGRAMACIÓN