SlideShare una empresa de Scribd logo
1 de 11
Grillas y estructuras web Mg. Gabriela Tallarico – gabitallarico@gmail.com
Grilla ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],utilidad Mg. Gabriela Tallarico – gabitallarico@gmail.com
Estructuras básicas Mg. Gabriela Tallarico – gabitallarico@gmail.com
Estructuras básicas
Estructuras básicas
Estructuras básicas
Estructuras básicas
Grilla en el diseño web - tratar de automatizar/standarizar lo máximo posible el proceso de la construcción de la estructura de cualquier sitio. - mantener la coherencia visual entre todas las vistas del sitio web. - para facilitar el uso, el entendimiento y su modificación, procurando economía en el uso de código y flexibilidad para adaptarse a la mayor cantidad de necesidades de diagramación. objetivo Mg. Gabriela Tallarico – gabitallarico@gmail.com
Grilla en el diseño web ejemplo
Grilla en el diseño web ejemplo
Grilla en el diseño web   1. Marcar la caja contenedora externa (liquid o fix) 2. Identificar módulos o unidades de contenidos  (principal diferencia con gráfica papel). 3. Trazar las líneas verticales principales y  horizontales . 4. Construir cajas contenedoras entre las líneas establecidas. construcción

Más contenido relacionado

Similar a Grilla estructura

Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADEDomestika
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011byroncorrales
 
ENAEDM23 - Antonio López (SEOstar). Clustering
ENAEDM23 - Antonio López (SEOstar). ClusteringENAEDM23 - Antonio López (SEOstar). Clustering
ENAEDM23 - Antonio López (SEOstar). ClusteringEnaeBusiness
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas webJuan Aguillon
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing DigitalDomestika
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la webMiguel Gea
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09Domestika
 
Metricsday2019 - Big query
Metricsday2019  - Big query   Metricsday2019  - Big query
Metricsday2019 - Big query Multiplica
 
Marketing digital para la PYME
Marketing digital para la PYMEMarketing digital para la PYME
Marketing digital para la PYMEMedardo Aparcana
 

Similar a Grilla estructura (13)

Congreso web
Congreso webCongreso web
Congreso web
 
Marketing online 2009 ssrr imade
Marketing online 2009 ssrr imadeMarketing online 2009 ssrr imade
Marketing online 2009 ssrr imade
 
Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADE
 
Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011Wireframe de la teoría a la práctica - DrupalCamp2011
Wireframe de la teoría a la práctica - DrupalCamp2011
 
ENAEDM23 - Antonio López (SEOstar). Clustering
ENAEDM23 - Antonio López (SEOstar). ClusteringENAEDM23 - Antonio López (SEOstar). Clustering
ENAEDM23 - Antonio López (SEOstar). Clustering
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Front
FrontFront
Front
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing Digital
 
Magento Best Practices
Magento Best PracticesMagento Best Practices
Magento Best Practices
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la web
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
 
Metricsday2019 - Big query
Metricsday2019  - Big query   Metricsday2019  - Big query
Metricsday2019 - Big query
 
Marketing digital para la PYME
Marketing digital para la PYMEMarketing digital para la PYME
Marketing digital para la PYME
 

Último

CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGOyordanespinozanina
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 

Último (20)

CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 

Grilla estructura

  • 1. Grillas y estructuras web Mg. Gabriela Tallarico – gabitallarico@gmail.com
  • 2.
  • 3. Estructuras básicas Mg. Gabriela Tallarico – gabitallarico@gmail.com
  • 8. Grilla en el diseño web - tratar de automatizar/standarizar lo máximo posible el proceso de la construcción de la estructura de cualquier sitio. - mantener la coherencia visual entre todas las vistas del sitio web. - para facilitar el uso, el entendimiento y su modificación, procurando economía en el uso de código y flexibilidad para adaptarse a la mayor cantidad de necesidades de diagramación. objetivo Mg. Gabriela Tallarico – gabitallarico@gmail.com
  • 9. Grilla en el diseño web ejemplo
  • 10. Grilla en el diseño web ejemplo
  • 11. Grilla en el diseño web 1. Marcar la caja contenedora externa (liquid o fix) 2. Identificar módulos o unidades de contenidos (principal diferencia con gráfica papel). 3. Trazar las líneas verticales principales y horizontales . 4. Construir cajas contenedoras entre las líneas establecidas. construcción