Diseño A Drupal

50 %
50 %
Information about Diseño A Drupal

Published on October 11, 2009

Author: nborda

Source: slideshare.net

Description

Tecnicas y Herramientas para pasar diseños a Drupal.

De diseño a Drupal Técnicas y herramientas avanzadas para convertir diseños en temas Drupal de alta calidad

Nicolas Borda • Creo y mantengo temas Drupal que contribuyo al proyecto • He creado temas para otros proyectos de software libre como ProjectPier y proximamente Open Atrium • Trabajo con muchas agencias de Drupal creando temas para sus clientes de manera freelance nic.ipwa.net twitter.com/ipwa drupal.org/user/130909

HERRAMIENTAS

Extensiones Firefox

Firebug • Examina fácilmente el HTML, CSS y JS • Edita el HTML, CSS y JS en vivo • Visualiza el padding y margin de los objetos

YSlow • Una herramienta que te de un análisis y puntaje de performance • Te da sugerencias en como mejorar el puntaje de tú página http://wimleers.com/article/improving-drupals-page-loading-performance

• Te permite superponer tus diseños encima de paginas web • Tiene multiples capas, similar a GIMP o Photoshop

Drupal Para Firebug • Bueno para corregir errores (debugging) • Informacion de tus consultas (queries) SQL

ColorZilla • Te permite extraer colores de páginas webs con herramientas similares a GIMP o Photoshop

MeasureIt • Te permite medir elementos en tu navegador • Se pueden tener ventanas multiples para medir

GridFox • Te permite superponer cuadrículas encima de paginas web • Las cuadrículas son altamente personalizables

GridFox • Te permite superponer cuadrículas encima de paginas web • Las cuadrículas son altamente personalizables

Software de Escritorio

xScope • Reglas en-pantalla • Mide facilmente dimensiones en tu pantalla • Superpon tamaños de pantallas comunes • Guías y cursores de retículo en cruz

Skitch • Toma pantallazos y súbelos a la web fácilmente • Agrega texto, formas, garabatos, etc. • Genial para reportar errores • Jing (alternativa para Windows)

OmniGraffle • Genial para hacer esqueletos • Muy bueno para todo tipo de diagramas • Genial para planear la experiencia del usuario • Gliffy (alternativa grátis) • Visio (alternativa para Windows)

1 CONCEPT / DESCRIPTION [Logo] 1.0 As explained in the final report, this page is designed to target VR's potential and existing 6.0 collaborators / supporters and beneficiaries are invited to a separate landing page (6.0 - Beneficiaries landing page). 3 With the new layout, a left sidebar is no longer required. A right sidebar is added to hold 5.0 2.0 3.0 4.0 Support us Work with us Contact contextual content 2 NOTES About us Our services Our projects Information & resources Volunteer with us Hi! How can we help? Youth Type Element Description 4 12 1 Image Header logo Vital Regeneration logo linked to the homepage 2 Nav Primary menu Links to landing pages that are relevant to larger number of audiences Donate now 3 Link Secondary menu Links to landing pages that are relevant to smaller number of audiences 5 4 Image Banner An eye-catcher photo that communicates VR's activities / Creating opportunities, changing lives 5 Text Description sense of value to visitors A one-liner on VR and summary of its ethos Vital Regeneration is a charity working to transform London’s most deprived neighbourhoods. We develop social, environmental and economic programmes, so that people and communities fulfil their potential through learning, employment and 6 Text Description and link A brief description about VR and link to 'About us' page enterprise. Our vision is for everyone to have equal expectations and opportunities in life and not to be seriously disadvantaged by where they live. 7 Text Description and link A brief description about VR's work and link to 'Our Learn more >> 5.0 specialities' page 6 8 8 Image Image and Few images and descriptions of case studies Michael, 19 description in carousel 9 Text Feed An automatically generated list of the latest news. Displays three direct links to the news articles and a link Our services 2.0 to a page where users can access all news articles composed his own music album Lorem ipsum dolor sit amet with Studio + 10 Text Feed A link and photo to a featured case study consectateur nonummy lorenzino. Interdum volgus videt, est ubi 9 11 Text Feed A list of links to featured events. The thumbnail links to peccat. Latest News the event detail page 7 05.07.09 12 Image Link Donate online image linked to donation functionality Lorem ipsum dolor sit amet, consectetuer 9.0 adipiscing elit. Support us 6.0 05.07.09 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer consectateur nonummy lorenzino. adipiscing elit. Interdum volgus videt, est ubi peccat. DATE TITLE DWG NO. Vital Regeneration - registered charity: #1110882 Privacy policy Media centre 05.18.2009 AUTHOR Mori Home page 1.0

Módulos Drupal

Theme Developer • Parte del módulo devel • Al apretar el cursor en cualquier elemento te de la función que creo el HTML • Facilita saber que función tienes que sustituir

Skinr • Permite que los usuarios puedan seleccionar estilos predifinidos • Funciona con bloques, paneles y vistas

Skinr • Permite que los usuarios puedan seleccionar estilos predifinidos • Funciona con bloques, paneles y vistas

Skinr • Permite que los usuarios puedan seleccionar estilos predifinidos • Funciona con bloques, paneles y vistas

TÉCNICAS

Sprites • Una imagen o animación de dos o tres dimensiones que se integra a una escena más grande • Se empezo usando en video juegos y software

Sprites en CSS • 80%+ del tiempo de carga viene desde el “front-end” • Reduce el número de recuestas HTTP • “Markup” limpio

Sprites en CSS ANTES DESPUES Número de recuestas HTTP: Número de recuestas HTTP: Tamaño total de imágenes: Tamaño total de imágenes: EJEMPLO EJEMPLO Credit: http://css-tricks.com/css-sprites/

Sprites en CSS

Sprites en CSS Sprite vertical Sprite horizontal

Sprites en CSS • 16 kb para toda la interfaz • El sprite vertical permite repetir patrones y gradientes • Aplicas una solucion para PNGs transparentes en IE6 a un solo elemento

Reemplazo de imagenes • “Markup” limpio • Bueno para optimizacion de listados en resultados de busquedas (SEO) • Accesible?

sIFR • Requiere JavaScript y Flash :/ • El texto es seleccionable! • Es difícil de controlar

cufón • Solo requiere JS • Usa el elemento HTML canvas (sexy!) • Todo el éstilo es tomado directamente del CSS

Add a comment

Related pages

Creación y diseño de themes en Drupal 7 | Udemy

Explicaremos como funciona un tema en drupal, como editar el css, trabajar con Sass, Compass y diseño responsivo
Read more

Diseño web | Desarrollo en Drupal Suomitech

Desarrollo de todo tipo de aplicaciones web basadas en el CMS Drupal. Contamos con más de 5 años de experiencia.
Read more

Diseño web con Drupal | Drupal Groups

Esta vez propongo que la próxima quedada del grupo trate sobre Diseño Web con Drupal. Durante la sesión, hablarán diseñadores y maquetadores ...
Read more

Diseño A Drupal - Documents

1. De diseño a Drupal Técnicas y herramientas avanzadas para convertir diseños en temas Drupal de alta calidad . 2. Nicolas Borda• Creo y mantengo ...
Read more

Diseño de plantillas en Drupal y temas en Drupal, Diseño ...

Agencia digital experta en Drupal, diseños web exclusivos de plantillas en Drupal y temas en Drupal. Diseños web de vanguardia en Drupal, Conózcanos HOY!
Read more

Diseño para el Website de DrupalCamp CA | Drupal Groups

Saludos Drupaleros, Uno de nuestros patrocinadores para el Evento Hizo un diseño para el website de DrupalCamp Guatemala 2010 se los comparto para que ...
Read more

Diseño web Drupal | Diseño Tiendas Online Drupal

Diseño web Drupal | Diseño Tiendas Online Drupal Crea tu página o diseño web a medida con DrupalDesign. Porque seguramente lo hagamos mejor que nadie.
Read more

Programación y diseño web Drupal y Magento en Barcleona

Equipo de diseño web en Barcelona, formado por profesionales de la programación y diseño web. Estamos especializados en Drupal, Magento y PHP Symfony.
Read more

Giving design feedback | Drupal.org

Giving design feedback. Last updated April 17, 2015. ... In a system as complex and broad as Drupal, there never is a single perfect solution.
Read more