Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Maquetación web

745 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Maquetación web

  1. 1. MAQUETACIÓN WEB PSD, AI -> HTML
  2. 2. MAQUETACIÓN WEB Proceso de traslado de la propuesta gráfica de un formato PSD o AI a HTML + CSS + JS
  3. 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.
  4. 4. WYSIWYG What You See Is What You Get
  5. 5. 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
  6. 6. 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
  7. 7. OTRAS HERRAMIENTAS Adobe Muse
 http://www.adobe.com/mx/products/muse.html
  8. 8. 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
  9. 9. FRAMEWORK “Marco de trabajo” Conjunto de herramientas
  10. 10. FRAMEWORKS PARA APLICACIONES WEB Bibliotecas de recursos Estructura de plantillas Reutilización de código
  11. 11. FRAMEWORKS PARA APLICACIONES WEB Bootstrap
 http://getbootstrap.com Foundation
 http://foundation.zurb.com 960
 http://960.gs
  12. 12. Aplicación usada para crear, editar, gestionar y publicar contenido digital multimedia en diversos formatos. CMS
 CONTENT MANAGEMENT SYSTEM
  13. 13. CMS
 CONTENT MANAGEMENT SYSTEM Wordpress Joomla Drupal
  14. 14. 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
  15. 15. HTML NO ES LENGUAJE DE PROGRAMACIÓN

×