{"id":1047,"date":"2017-05-10T10:40:35","date_gmt":"2017-05-10T16:40:35","guid":{"rendered":"http:\/\/www.crec.mx\/ispring\/?p=1047"},"modified":"2017-05-10T10:42:35","modified_gmt":"2017-05-10T16:42:35","slug":"flat-la-tendencia-del-diseno-web","status":"publish","type":"post","link":"http:\/\/www.crec.mx\/ispring\/2017\/05\/10\/flat-la-tendencia-del-diseno-web\/","title":{"rendered":"FLAT: La tendencia del dise\u00f1o web"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"border: none; overflow: hidden;\" src=\"https:\/\/www.facebook.com\/plugins\/share_button.php?href=http%3A%2F%2Fwww.crec.mx%2Fispring%2F2017%2F05%2F10%2Fflat-la-tendencia-del-diseno-web%2F&amp;layout=button_count&amp;size=small&amp;mobile_iframe=true&amp;width=91&amp;height=20&amp;appId\" width=\"91\" height=\"20\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: justify;\">Al principio de los tiempos -\u2026de la era del internet-, no se pod\u00eda hablar de dise\u00f1o web porque las posibilidades que exist\u00edan eran muy limitadas, tanto por los recursos y la infraestructura que exist\u00eda; en especial por la conexi\u00f3n a internet, que era muy lenta. El dise\u00f1o de sitios web se ha ido desarrollando y mejorando conforme ha ido creciendo el internet. La necesidad de atraer a la mayor cantidad de usuarios posibles a que visiten nuestro sitio, ha llevado a explotar una mayor cantidad de recursos, visuales y de interfaz; lo que origin\u00f3 en un n\u00famero exponencial de sitios web. Todos dise\u00f1ando sus sitios lo mejor que pod\u00edan, y poco a poco se fue creando una tendencia. En un tiempo relativamente corto, el avance y desarrollo que se ha tenido es gigantesco, pero ha ido marcando una tendencia de dise\u00f1o al estilo FLAT. \u00bfC\u00f3mo fue que el dise\u00f1o FLAT, se volvi\u00f3 tendencia en el desarrollo de sitios web? Es de lo que hablaremos en la presente nota.<\/p>\n<p style=\"text-align: justify;\">Empecemos por el nacimiento del internet, ya una vez que hab\u00eda trascendido la instalaci\u00f3n militar ARPANET, y se empez\u00f3 a difundir entre universidades; las comunicaciones se daban desde el protocolo \u201cTELNET\u201d. Todo era pantallas negra con letras verdes. A\u00fan no nac\u00eda el dise\u00f1o web, sino hasta el surgimiento de la comunicaci\u00f3n en html y el ambiente www.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1051\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/W3gW73i.jpg\" alt=\"\" width=\"600\" height=\"338\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/W3gW73i.jpg 600w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/W3gW73i-300x169.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p style=\"text-align: justify;\">A principios de los 90s, surge MOSAIC, el pionero de los navegadores web, su desarrollo estaba basado en el sistema operativo UNIX, lo que le permit\u00eda ejecutar m\u00e1s de un programa y gestionar a m\u00e1s de un usuario. Esta primera generaci\u00f3n de navegadores, pod\u00eda soportar contenido multimedia a un nivel muy austero, permitiendo el uso de texto e im\u00e1genes. Debido a que la conexi\u00f3n ya se realizaba mediante un modem, la velocidad de transferencia de datos aumento, el dise\u00f1o web era muy b\u00e1sico, ya que la infraestructura aun era muy austera, pero se daban ya los primeros pasos para el mejoramiento del dise\u00f1o en los sitios web.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-1052\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/Mosiac-SG-1024x727.jpg\" alt=\"\" width=\"624\" height=\"443\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/Mosiac-SG-1024x727.jpg 1024w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/Mosiac-SG-300x213.jpg 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/Mosiac-SG-768x545.jpg 768w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/Mosiac-SG.jpg 2048w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/p>\n<p style=\"text-align: justify;\">El siguiente paso en el dise\u00f1o web fue muy discreto, pero a largo plazo, ser\u00eda un gran impulso para el desarrollo de p\u00e1ginas web. Algunos elementos estructurales se empezaban a advertir: se empiezan a sustituir palabras por iconos; se empiezan a utilizar botones con relieve, que dan la sensaci\u00f3n de crear volumen; se puede colocar como fondo una imagen; se empiezan a usar tablas para la organizaci\u00f3n de los contenidos, con lo que hace su aparici\u00f3n la <a href=\"http:\/\/www.crec.mx\/ispring\/2017\/02\/16\/elegir-la-tipografia-proyecto\/\">jerarqu\u00eda tipogr\u00e1fica<\/a>. Esta evoluci\u00f3n se da gracias a la mejora en los monitores y las tarjetas gr\u00e1ficas, que permiten mayores resoluciones de im\u00e1genes y una mejora en los colores, la aparici\u00f3n del c\u00f3digo HTML permite un nuevo nivel de dise\u00f1o, en el que se trataba de crear una maquetaci\u00f3n muy similar a la de libros o revistas.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1054\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/18s14vugshn3sjpg.jpg\" alt=\"\" width=\"603\" height=\"576\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/18s14vugshn3sjpg.jpg 603w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/18s14vugshn3sjpg-300x287.jpg 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/p>\n<h2 style=\"text-align: justify;\"><strong>Macromedia Flash y la revoluci\u00f3n del dise\u00f1o web<\/strong><\/h2>\n<p style=\"text-align: justify;\">La historia del dise\u00f1o, tiene un momento especial con el advenimiento de la tecnolog\u00eda Flash. La capacidad de crear capas, acciones y una resoluci\u00f3n basada en pantalla (800&#215;600) dio un giro a la maquetaci\u00f3n vertical basada en el hipertexto. En esta parte de la historia, los dise\u00f1adores empezar a tener mas presencia en el desarrollo de la interfaz, generando mucho m\u00e1s dinamismo en la interacci\u00f3n de los usuarios.<\/p>\n<p style=\"text-align: justify;\">Con la consolidaci\u00f3n de la tencnolog\u00eda Flash, los sitios empiezan a tener una mejor apariencia, generando una mejora significativa en el dise\u00f1o web, ya que permit\u00eda enfocar el dise\u00f1o a las caracter\u00edsticas o tipo de p\u00e1gina que se esta realizando, la navegaci\u00f3n se hace mucho m\u00e1s sencilla e intuitiva.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1055\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/diseno-web-flash-gazapo-3.jpg\" alt=\"\" width=\"500\" height=\"304\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/diseno-web-flash-gazapo-3.jpg 500w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/diseno-web-flash-gazapo-3-300x182.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p style=\"text-align: justify;\">Una de las principales acciones que deton\u00f3 el dise\u00f1o web, fue que se incremento el n\u00famero de usuarios de internet, por lo que cada vez se necesitaban sitios m\u00e1s especializados en los temas de inter\u00e9s. El flujo de informaci\u00f3n ya no era unilateral, sino que empezaba a surgir la participaci\u00f3n colectiva mediante el uso de comentarios, chats y grupos de participaci\u00f3n.<\/p>\n<h2 style=\"text-align: justify;\"><strong>Dise\u00f1o esqueum\u00f3rfico, la realidad llevada a la web.<\/strong><\/h2>\n<p style=\"text-align: justify;\">El uso de Flash permiti\u00f3 generar volumen a los elementos dando la sensaci\u00f3n de tener objetos en 3D, con la aparici\u00f3n del <strong><em>dise\u00f1o esqueum\u00f3rfico<\/em><\/strong> este tipo de dise\u00f1o se lleva al siguiente nivel, ya que con esta tendencia en el dise\u00f1o se busca imitar la realidad para llevarla a los dispositivos, por tal motivo, con la reciente aparici\u00f3n de los smartphones y tabletas digitales, el dise\u00f1o de la interfaz semejando la realidad har\u00eda mucho m\u00e1s sencilla la navegaci\u00f3n a trav\u00e9s de los dispositivos, porque a los usuarios les resultar\u00eda mucho m\u00e1s familiar una interfaz con este tipo de dise\u00f1o.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1056\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/OAYTNF0-copia.jpg\" alt=\"\" width=\"600\" height=\"400\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/OAYTNF0-copia.jpg 600w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/OAYTNF0-copia-300x200.jpg 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/OAYTNF0-copia-140x94.jpg 140w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p style=\"text-align: justify;\">Uno de los ejemplos que podr\u00edan mostrar con m\u00e1s claridad este concepto, son los libros digitales, los cuales, al pasar de una p\u00e1gina a otra, nos daba la sensaci\u00f3n de verdad estar pasando las p\u00e1ginas, o cuando se captura una foto con alguno de estos dispositivos m\u00f3viles podemos escuchar el cerrar del obturador de una c\u00e1mara an\u00e1loga, gracias a estos recursos, nos permitimos no sentirnos ajenos a estos nuevos dise\u00f1os. De cierto modo, el hecho de que el dise\u00f1o esqueum\u00f3rfico apareciera, permiti\u00f3 que en poco tiempo los usuarios de los dispositivos m\u00f3viles, se pudieran desplazar con facilidad por la interfaz y el sistema operativo en general para dar el siguiente paso en el dise\u00f1o web.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1057\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/preview_small.jpg\" alt=\"\" width=\"600\" height=\"401\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/preview_small.jpg 600w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/preview_small-300x201.jpg 300w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/preview_small-140x94.jpg 140w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2 style=\"text-align: justify;\"><strong>Dise\u00f1o Flat, la tendencia en el dise\u00f1o web. <\/strong><\/h2>\n<p style=\"text-align: justify;\">Con la aparici\u00f3n de los dispositivos m\u00f3viles y las aplicaciones de estos, se desarrollo el dise\u00f1o responsivo. Este tipo de dise\u00f1o es el que, independientemente del dispositivo en donde te encuentres, ya sea smartphone, tableta, laptop o computadora de escritorio, en todas ellas se puede visualizar completamente la p\u00e1gina o app en la que estamos.<\/p>\n<p style=\"text-align: justify;\">El dise\u00f1o responsivo surge por esta necesidad de poder adaptar de la mejor manera la interfaz al dispositivo en el que se esta visualizando, como respuesta a esta necesidad se desarrollo el dise\u00f1o plano o Flat.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1058\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/1290_small.jpg\" alt=\"\" width=\"600\" height=\"426\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/1290_small.jpg 600w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/1290_small-300x213.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p style=\"text-align: justify;\">El dise\u00f1o Flat tiene su origen principalmente en tres corrientes art\u00edsticas. El minimalismo, esta corriente art\u00edstica, deja de lado los ornamentos, llevando los objetos a su m\u00e1s simple expresi\u00f3n; en Suiza, las casas tipogr\u00e1ficas empiezan a desarrollar fuentes San Serif, dando m\u00e1s importancia a la jerarqu\u00eda tipogr\u00e1fica, lo que permiti\u00f3 mejorar el dise\u00f1o editorial; y en Alemania, la escuela Bauhaus, quienes fueron de los principales precursores de la simplicidad, que pod\u00eda ir desde un cartel, hasta objetos cotidianos como una silla o una mesa.<\/p>\n<p style=\"text-align: justify;\">Con estos tres precedentes y el desarrollo del dise\u00f1o responsivo, se forman las bases para el dise\u00f1o Flat, uno de los principales aspectos t\u00e9cnicos que permiti\u00f3 su desarrollo fue el surgimiento de HTML5 y CSS3, ya que ofrecen un sin fin de posibilidades en cuanto a programaci\u00f3n, maquetaci\u00f3n y efectos aplicados al dise\u00f1o web.<\/p>\n<p style=\"text-align: justify;\">Las principales caracter\u00edsticas de est\u00e1 tendencia de dise\u00f1o, es el uso de colores s\u00f3lidos, formas geom\u00e9tricas, uso de fuentes San Serif, la experiencia de usuario ( UX = User Experience) es el principal motor de esta tendencia. Focalizado ala simplicidad, se adapta f\u00e1cilmente a los dispositivos m\u00f3viles, llevando la expresi\u00f3n \u201cMenos es m\u00e1s\u2026\u201d a su m\u00e1xima expresi\u00f3n.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1059\" src=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/114081-OOIOWU-19_small.jpg\" alt=\"\" width=\"600\" height=\"308\" srcset=\"http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/114081-OOIOWU-19_small.jpg 600w, http:\/\/www.crec.mx\/ispring\/wp-content\/uploads\/2017\/05\/114081-OOIOWU-19_small-300x154.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p style=\"text-align: justify;\">Uno de los principales precursores de esta tendencia fue Microsoft, el cual empez\u00f3 con su tienda de medios digitales llamada \u201cZune\u201d y posteriormente se introdujo en Windows 8.<\/p>\n<p style=\"text-align: justify;\">Sin duda va a ser un estilo que seguiremos viendo constantemente durante varios a\u00f1os m\u00e1s, quiz\u00e1 con algunas variantes como el -LongShadow-, del cual hablaremos en un siguiente art\u00edculo.<\/p>\n<p>\u00bfTe gust\u00f3 este art\u00edculo? Comp\u00e1rtelo con tus amigos<br \/>\n<iframe loading=\"lazy\" style=\"border: none; overflow: hidden;\" src=\"https:\/\/www.facebook.com\/plugins\/share_button.php?href=http%3A%2F%2Fwww.crec.mx%2Fispring%2F2017%2F05%2F10%2Fflat-la-tendencia-del-diseno-web%2F&amp;layout=button_count&amp;size=small&amp;mobile_iframe=true&amp;width=91&amp;height=20&amp;appId\" width=\"91\" height=\"20\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Al principio de los tiempos -\u2026de la era del internet-, no se pod\u00eda hablar de dise\u00f1o web porque las posibilidades que exist\u00edan eran muy limitadas, tanto por los recursos y la infraestructura que exist\u00eda; en especial por la conexi\u00f3n a internet, que era muy lenta. El dise\u00f1o de sitios web se ha ido desarrollando y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1063,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,10,7],"tags":[],"class_list":["post-1047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-desarrollo-organizacional","category-e-learning"],"_links":{"self":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/1047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/comments?post=1047"}],"version-history":[{"count":5,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/1047\/revisions"}],"predecessor-version":[{"id":1065,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/posts\/1047\/revisions\/1065"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/media\/1063"}],"wp:attachment":[{"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/media?parent=1047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/categories?post=1047"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.crec.mx\/ispring\/wp-json\/wp\/v2\/tags?post=1047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}