{"id":2816,"date":"2013-09-24T11:31:15","date_gmt":"2013-09-24T14:31:15","guid":{"rendered":"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/2013\/2013\/?p=2816"},"modified":"2013-09-24T11:31:15","modified_gmt":"2013-09-24T14:31:15","slug":"usos-de-la-grilla","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/usos-de-la-grilla\/","title":{"rendered":"Usos de la grilla"},"content":{"rendered":"<p>Luego que un alumno de dise\u00f1o se\u00a0introduce al mundo de las grillas de la mano del libro de Joseph M\u00fcller-Brookman, \u00abSistema de ret\u00edculas\u00bb, hay un \u00e1ntes y un despu\u00e9s, casi como el chico de la pel\u00edcula \u00absexto sentido\u00bb que dice \u00abveo gente muerta\u00bb , uno dice \u00abveo grillas\u00bb \u00a1las grillas nos persiguen! El uso de ret\u00edculas no es exclusivo de las publicaciones editoriales. Como se puede ver \u00a0los usos de la grilla son multiples,\u00a0en este grupo de flickr, los miembros postean im\u00e1genes de p\u00f3sters, sitios y otras piezas de dise\u00f1o influenciadas por el estilo suizo <a href=\"http:\/\/www.flickr.com\/groups\/intertypostyle\">http:\/\/www.flickr.com\/groups\/intertypostyle<\/a><br \/>\nLa utilizaci\u00f3n de grillas poco a poco se est\u00e1 introduciendo en el mundo web tambi\u00e9n, los que m\u00e1s o menos tenemos conocimientos de dise\u00f1o editorial ya o\u00edmos del uso de las grillas. Sin embargo, para los dise\u00f1adores web, (que no son estudiantes de dise\u00f1o gr\u00e1fico)\u00a0las grillas no son muy conocidas.\u00a0 Las p\u00e1ginas web de los diarios (como Clar\u00edn), demuestran claramente una inclinaci\u00f3n al uso de grillas tipogr\u00e1ficas para su armado.<br \/>\nLas ventajas de dise\u00f1ar con una grilla de base son evidentes. La grilla permite una disposici\u00f3n natural y segura de los elementos; al momento de dise\u00f1ar, no tenemos que perder mucho tiempo pensando en d\u00f3nde debemos colocar esa barra de navegaci\u00f3n o qu\u00e9 ancho debe tener, ya que la grilla, al darnos una visi\u00f3n global de los espacios disponibles, nos lo sugiere. Por otro lado, adem\u00e1s de facilitar y sugerir la disposici\u00f3n y jerarqu\u00eda de los elementos, la grilla garantiza la consistencia visual en todo el sitio.<img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-2824 aligncenter\" alt=\"grillas web tipoblog\" src=\"http:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-content\/uploads\/2013\/09\/grillas-web-tipoblog-300x150.jpg\" width=\"300\" height=\"150\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-content\/uploads\/2013\/09\/grillas-web-tipoblog-300x150.jpg 300w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-content\/uploads\/2013\/09\/grillas-web-tipoblog.jpg 985w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br \/>\nPara el dise\u00f1o editorial existen programas como Indesign de adobe, que facilitan la utilizaci\u00f3n de grillas, para el dise\u00f1o web, hay varios sitios que\u00a0 contienen grillas predise\u00f1adas en las cual basarse al dise\u00f1ar un sitio web que pueden ayudar.<\/p>\n<p>Es el caso de\u00a0sitios como\u00a0<strong>960 grid system<\/strong> (<a href=\"http:\/\/960.gs\/\">http:\/\/960.gs\/<\/a>) que cuenta con descargas que contienen plantillas, grillas predise\u00f1adas, de 960 px de ancho, css, y dem\u00e1s archivos que ayudan al dise\u00f1o de una pagina web, con dise\u00f1os a 12, 16 y 24 columnas que luego puede utilizarse en los programas\u00a0 Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp\u00a0Design. Tambi\u00e9n: plantillas para bocetos en PDF + archivos CSS, para realizar el dise\u00f1o gr\u00e1fico de un sitio, que luego se puede\u00a0programar sus funciones en dreamweaver.<\/p>\n<p>Otros sitios de ayuda para dise\u00f1os web:<br \/>\n<strong>Gridulator (<a href=\"http:\/\/gridulator.com\/\">http:\/\/gridulator.com\/<\/a>)<br \/>\n<\/strong>Ofrece archivos png para descargar acorde a las medidas que seleccionemos: el ancho total del dise\u00f1o, la cantidad de columnas, el ancho de \u00e9stas y sus divisiones. Este tipo de archivos pueden servir para dise\u00f1ar paginas web para ser vistas en cualquier dispositivo (celular, tablets, etc)<\/p>\n<div id=\"stcpDiv\">\n<p><strong>1140 Grid (<a href=\"http:\/\/cssgrid.net\/\">http:\/\/cssgrid.net\/<\/a>)<\/strong><br \/>\nUna plantilla css para dise\u00f1ar en un ancho de 1140 px con 12 columnas fluidas que se adaptan al ancho de todas las resoluciones y tambi\u00e9n en tel\u00e9fonos m\u00f3viles.\u00a0La descarga ofrece un html vinculado a diferentes archivos de estilos css.<\/p>\n<p>Y por \u00fatlimo, les dejo este link para que los que aun no tuvieron la oportunidad de leer el libro de Joseph M\u00fcller-Brookman, \u00abSistema de ret\u00edculas\u00bb, puedan baj\u00e1rselo, y utilizarlo para dise\u00f1ar el diario, o cualquier otro dise\u00f1o que venga de ahora en m\u00e1s<br \/>\n<a href=\"https:\/\/www.dropbox.com\/s\/qntl2yzlnwgz4wh\/161542454-Sistema-de-Grillas.pdf\">https:\/\/www.dropbox.com\/s\/qntl2yzlnwgz4wh\/161542454-Sistema-de-Grillas.pdf<\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Todos sabemos que la grilla es el mejor amigo de los dise\u00f1adores al momento de realizar una publicaci\u00f3n editorial, pero \u00bfdonde m\u00e1s podemos utilizar las grilla?<\/p>\n","protected":false},"author":150,"featured_media":2824,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[71,205,8,10,206,193,152],"class_list":["post-2816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-periodico","tag-diseno","tag-diseno-web","tag-estructura","tag-grilla","tag-joseph-muller-brookman","tag-periodico-2","tag-reticula"],"jetpack_featured_media_url":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-content\/uploads\/2013\/09\/grillas-web-tipoblog.jpg","_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/posts\/2816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/users\/150"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/comments?post=2816"}],"version-history":[{"count":22,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/posts\/2816\/revisions"}],"predecessor-version":[{"id":2839,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/posts\/2816\/revisions\/2839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/media\/2824"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/media?parent=2816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/categories?post=2816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2013\/wp-json\/wp\/v2\/tags?post=2816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}