MAQUETACIÓN WEBPSD, AI -> HTML

MAQUETACIÓN WEB

Proceso de traslado de la propuesta gráfica de un formato PSD o AI a HTML + CSS + JS

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.

WYSIWYGWhat You See Is What You Get

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

BAJO LICENCIAHTML Kit (PC)http://www.htmlkit.com/

Coda (Mac OS)https://itunes.apple.com/us/app/coda-2/id499340368?mt=12

Coffeecuphttp://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

OTRAS HERRAMIENTAS

Adobe Musehttp://www.adobe.com/mx/products/muse.html

EDITORES CSSExpressohttp://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

FRAMEWORK

“Marco de trabajo”

Conjunto de herramientas

FRAMEWORKS PARA APLICACIONES WEB

Bibliotecas de recursos

Estructura de plantillas

Reutilización de código

FRAMEWORKS PARA APLICACIONES WEB

Bootstraphttp://getbootstrap.com

Foundationhttp://foundation.zurb.com

960http://960.gs

Aplicación usada para crear, editar, gestionar y publicar contenido digital multimedia en diversos formatos.

CMSCONTENT MANAGEMENT SYSTEM

CMSCONTENT MANAGEMENT SYSTEM

Wordpress

Joomla

Drupal

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

HTML NO ES LENGUAJE DE PROGRAMACIÓN