{"id":122,"date":"2015-03-22T02:31:31","date_gmt":"2015-03-22T02:31:31","guid":{"rendered":"https:\/\/possibleapp.com\/blog\/?p=122"},"modified":"2015-03-22T03:00:47","modified_gmt":"2015-03-22T03:00:47","slug":"no-te-quedes-atras-actualiza-la-imagen-de-tu-web","status":"publish","type":"post","link":"https:\/\/possibleapp.com\/blog\/2015\/03\/no-te-quedes-atras-actualiza-la-imagen-de-tu-web\/","title":{"rendered":"No te quedes atr\u00e1s, actualiza la imagen de tu web."},"content":{"rendered":"<p style=\"text-align: justify;\">Introducci\u00f3n al dise\u00f1o web 3.0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Por Ernesto Mendoza<\/p>\n<p style=\"text-align: justify;\">El dise\u00f1o web es una t\u00e9cnica utilizada para estructurar los componentes gr\u00e1ficos de un sitio web, la cual engloba varios elementos tales como: formas, tama\u00f1os, colores, tipos de letra, entre otros. Despu\u00e9s de la funcionalidad que se le d\u00e9 a una p\u00e1gina o aplicaci\u00f3n web esta actividad es sumamente importante ya que hace referencia a la visualizaci\u00f3n que tendr\u00e1 el usuario siempre que utilice su interfaz.<\/p>\n<p style=\"text-align: justify;\">Con la evoluci\u00f3n de la web 3.0, no s\u00f3lo es necesario que los nuevos sitios tengan un estilo atractivo, sino que su dise\u00f1o tenga la calidad suficiente para aumentar la accesibilidad de la web, su promoci\u00f3n en los buscadores, una buena interactividad con el usuario y facilitar su usabilidad hasta lograr que el sitio sea lo m\u00e1s intuitivo posible.<\/p>\n<p style=\"text-align: justify;\"><strong>De lo convencional a lo extraordinario<\/strong><\/p>\n<p style=\"text-align: justify;\"><strong>(Las nuevas tendencias del desarrollo web)<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/3-tendencias.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-124\" src=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/3-tendencias-300x140.jpg\" alt=\"3 tendencias\" width=\"448\" height=\"209\" srcset=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/3-tendencias-300x140.jpg 300w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/3-tendencias-500x233.jpg 500w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/3-tendencias.jpg 750w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">La web ser\u00eda un desastre sin CSS, de hecho, volviendo a los 90, antes de que los navegadores soportaran este lenguaje, la red era una mara\u00f1a de etiquetas &lt;font&gt; y &lt;size&gt; y el uso de tablas para organizar un sitio web era realmente descomunal, adem\u00e1s de que esto hacia la p\u00e1gina menos productiva. Por suerte pasamos esa \u00e9poca y quiz\u00e1 la manera m\u00e1s sencilla de mejorar un sitio, es darle una nueva capa de estilo con un poco de CSS.<\/p>\n<p style=\"text-align: justify;\">En la actualidad hay un sinf\u00edn de modelos y dise\u00f1os para los sitios que podemos encontrar en la web, desde los estilos cl\u00e1sicos que muchos conocemos y que contienen informaci\u00f3n dentro de un gran div centrado en la p\u00e1gina con un borde que act\u00faa como contenedor de otros elementos como men\u00fas, bloques de texto, formularios, im\u00e1genes y videos, y que est\u00e1n dise\u00f1ados aun a base de links para enlazar las diferentes p\u00e1ginas que conforman el sitio, hasta las muy estilizadas y novedosas p\u00e1ginas web tipo Landing Page en las que podemos encontrar toda la informaci\u00f3n necesaria en una sola p\u00e1gina bien organizada y que se maneja principalmente a base de scroll.<\/p>\n<p style=\"text-align: justify;\">Con este nuevo enfoque que se le ha dado al dise\u00f1o de las p\u00e1ginas web, hoy en d\u00eda es muy com\u00fan encontrarnos con sitios con grandes im\u00e1genes en su presentaci\u00f3n contenidas en un slider, el uso considerable del espacio en blanco que hace que los elementos que incorporemos sean m\u00e1s atractivos para el usuario, la utilizaci\u00f3n de colores contrastantes han sido utilizados en diferentes iconos planos y botones para delimitar eficazmente las distintas secciones de la web y se ha dejado atr\u00e1s el uso de textos con fuentes peque\u00f1as para integrar bloques de informaci\u00f3n con grandes tipograf\u00edas, estas y muchas nuevas tendencias sin duda alguna realzan el dise\u00f1o de los sitios web modernos.<\/p>\n<p style=\"text-align: justify;\">No obstante, es importante se\u00f1alar que el dise\u00f1o que agreguemos a un sitio web debe ser acorde al de la imagen empresarial de la compa\u00f1\u00eda o del usuario que lo solicite. Ya que por ejemplo, no es una buena pr\u00e1ctica sobrecargar de colores una p\u00e1gina cuando la empresa hace referencia a una organizaci\u00f3n ejecutiva y viceversa.<\/p>\n<p style=\"text-align: justify;\"><strong>La carrocer\u00eda y pintura dentro del desarrollo web moderno (Tecnolog\u00edas de dise\u00f1o que predominan actualmente)<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/2-html5-css-javascript.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-125\" src=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/2-html5-css-javascript-300x176.png\" alt=\"2 html5-css-javascript\" width=\"408\" height=\"239\" srcset=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/2-html5-css-javascript-300x176.png 300w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/2-html5-css-javascript.png 1024w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/2-html5-css-javascript-500x293.png 500w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Muchos conocen las hojas de estilo en cascada o CSS, pero no todos saben usarlas como corresponde a la web 3.0. Las CSS son un m\u00e9todo que surgi\u00f3 para definir el estilo visual de los elementos XML, HTML o derivado.<\/p>\n<p style=\"text-align: justify;\">Es as\u00ed que desde los comienzos de la web 2.0 se habla del dise\u00f1o sin tablas, o table-less, una metodolog\u00eda que permite dise\u00f1ar toda una p\u00e1gina web por medio de columnas, \u00a0DIV\u00b4s y CSS, que indican la disposici\u00f3n de los elementos en la p\u00e1gina.<\/p>\n<p style=\"text-align: justify;\">La aplicaci\u00f3n de estas hojas de estilo nos permiten sacar provecho a nuestras capacidades como dise\u00f1adores web, ya que con ellas tenemos un mayor control sobre la forma en la que los navegadores muestran la informaci\u00f3n de nuestras p\u00e1ginas, lo que favorece mantener la sem\u00e1ntica del HTML, y con la introducci\u00f3n de CSS3 la capacidad de representaci\u00f3n de los elementos que conforman los sitios web ha aumentado significativamente para gestionar una gran gama de impresionantes efectos visuales.<\/p>\n<p style=\"text-align: justify;\">Como buenos dise\u00f1adores no podemos dejar de lado participaci\u00f3n del Frontend haciendo uso de JavaScript, el cual es un lenguaje muy poderoso que nos ayudara a darle vida a todos esos dise\u00f1os que realicemos, para mostrar al usuario una interactividad de alta calidad y hacer de su experiencia en nuestro sitio algo muy satisfactorio.<\/p>\n<p style=\"text-align: justify;\"><strong>No reinventes la rueda (Alternativas para un dise\u00f1o r\u00e1pido y elegante)<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-126\" src=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign-300x180.jpg\" alt=\"Word cloud - web design\" width=\"440\" height=\"264\" srcset=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign-300x180.jpg 300w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign-1024x616.jpg 1024w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign-500x301.jpg 500w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/4-webdesign.jpg 1778w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Podemos darle a nuestros sitios un dise\u00f1o a medida tal y como deseemos haciendo uso de todas las herramientas que nos proporciona CSS3, para crear degradados, transparencias, sombras, bordes estilizados, mensajes emergentes e incluso transformaciones en 3D.<\/p>\n<p style=\"text-align: justify;\">Sin embargo, hoy en d\u00eda existen en la web una cantidad considerable de Frameworks que nos har\u00e1n la vida a\u00fan m\u00e1s f\u00e1cil, ya que estos marcos de trabajo nos proporcionan estilos ya predise\u00f1ados y muy atractivos para todos los elementos que deseemos incorporar a nuestros sitios, tales como: formularios (botones, selects, checkbox, radio buttons, etc.), \u00a0listas, tablas, paneles para informaci\u00f3n, controles, calendarios, men\u00fas y una organizaci\u00f3n a base de columnas para estructurar nuestras p\u00e1ginas \u00a0de una forma muy est\u00e9tica. A continuaci\u00f3n listamos algunos de ellos, sin embargo en la web podemos encontramos muchos m\u00e1s.<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong><span style=\"color: #ff0000;\">BOOTSTRAP 3<\/span>:<\/strong> Es el framework m\u00e1s popular para el desarrollo responsivo, que incorpora HTML, CSS y JS. Podemos encontrarlo en su sitio web: <a href=\"http:\/\/getbootstrap.com\/\">http:\/\/getbootstrap.com\/<\/a><\/li>\n<li><span style=\"color: #ff0000;\"><strong>MATERIALIZE:<\/strong><\/span> Un framework web front-end moderno y responsivo basado en Material Design. Sin lugar a dudas una recomendaci\u00f3n que nosotros les hacemos. <a href=\"http:\/\/materializecss.com\/\">http:\/\/materializecss.com\/<\/a><\/li>\n<li style=\"text-align: justify;\"><span style=\"color: #ff0000;\"><strong>PURE:<\/strong><\/span> Un conjunto de peque\u00f1os m\u00f3dulos CSS que se pueden utilizar en cada proyecto web. Este es un framework creado por Yahoo y lo puedes encontrar en su web: <a href=\"http:\/\/purecss.io\/\">http:\/\/purecss.io\/<\/a>\u00a0\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/foundation.zurb.com\/\"><strong>FOUNDATION 5<\/strong><\/a><strong>:<\/strong> Una de las mejores alternativas a Bootstrap, el cual destaca en esta nueva versi\u00f3n la prioridad que se ha dado al aumento de la velocidad en la carga de sus elementos. <a href=\"http:\/\/foundation.zurb.com\/\">http:\/\/foundation.zurb.com\/<\/a>\u00a0\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>IVORY:<\/strong> Simple, flexible y potente, un framework muy sencillo que te ayudara a realzar dise\u00f1os convencionales con un toque actualizado. <a href=\"http:\/\/weice.in\/ivory\/index.html\">http:\/\/weice.in\/ivory\/index.html<\/a>\u00a0La ventaja y punto en com\u00fan que tienen todas estas herramientas, es que todas son open source, y para agregar el dise\u00f1o a nuestros sitios solo basta con descargarlos, integrarlos en nuestro proyecto, y lo mejor de todo, es que como ya tienen sus estilos predefinidos, solo es necesario llamar las clases de los diferentes elementos que deseemos agregar para poder visualizar sus dise\u00f1os en cada componente de nuestro sitio.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><strong>\u00bfY que hay con el dise\u00f1o para m\u00f3viles? (Dise\u00f1o Responsivo)<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-127\" src=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive-300x188.png\" alt=\"5 responsive\" width=\"461\" height=\"289\" srcset=\"https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive-300x188.png 300w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive-1024x640.png 1024w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive-500x313.png 500w, https:\/\/possibleapp.com\/blog\/wp-content\/uploads\/2015\/03\/5-responsive.png 1440w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Debido a la\u00a0propagaci\u00f3n de smartphones y tablets\u00a0en el mercado actual, existe m\u00e1s diversidad que nunca de formatos de pantalla.\u00a0Este panorama obliga a\u00a0adaptar los formatos web a estos nuevos dispositivos\u00a0y la estructura de cada uno de ellos.<\/p>\n<p style=\"text-align: justify;\">\u00a0A partir de todo esto, el t\u00e9rmino\u00a0<em>\u201cresponsive web design\u201d<\/em>\u00a0se escucha frecuentemente, pero \u00bfqu\u00e9 es exactamente? El\u00a0responsive design\u00a0corresponde a una tendencia de creaci\u00f3n de p\u00e1ginas web que pueden ser visualizadas perfectamente en todo tipo de dispositivos, desde ordenadores de escritorio hasta smartphones o tablets. Con este tipo de dise\u00f1o no necesitas tener una versi\u00f3n para cada dispositivo, una sola web se adapta a todos ellos.<\/p>\n<p style=\"text-align: justify;\">En lugar de construir una sitio web para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en d\u00eda, para smart TV), se crea una sola website utilizando CSS3 media queries. De esta forma,\u00a0el sitio web detecta desde qu\u00e9 clase de dispositivo est\u00e1 accediendo el usuario\u00a0y muestra la versi\u00f3n m\u00e1s <a id=\"_GPLITA_0\" style=\"border: none !important; display: inline-block !important; text-indent: 0px !important; float: none !important; font-weight: bold !important; height: auto !important; margin: 0px !important; min-height: 0px !important; min-width: 0px !important; padding: 0px !important; text-transform: uppercase !important; text-decoration: underline !important; vertical-align: baseline !important; width: auto !important; background: transparent !important;\" title=\"Click to Continue &gt; by Browsers App\" href=\"#\">optimizada<img decoding=\"async\" style=\"border: none !important; display: inline-block !important; text-indent: 0px !important; float: none !important; font-weight: bold !important; height: 10px !important; margin: 0px 0px 0px 3px !important; min-height: 0px !important; min-width: 0px !important; padding: 0px !important; text-transform: uppercase !important; text-decoration: underline !important; vertical-align: super !important; width: 10px !important; background: transparent !important;\" src=\"https:\/\/cdncache-a.akamaihd.net\/items\/it\/img\/arrow-10x10.png\" alt=\"\" \/><\/a><img decoding=\"async\" style=\"border: none !important; display: inline-block !important; text-indent: 0px !important; float: none !important; font-weight: bold !important; height: 10px !important; margin: 0px 0px 0px 3px !important; min-height: 0px !important; min-width: 0px !important; padding: 0px !important; text-transform: uppercase !important; text-decoration: underline !important; vertical-align: super !important; width: 10px !important; background: transparent !important;\" src=\"https:\/\/cdncache-a.akamaihd.net\/items\/it\/img\/arrow-10x10.png\" alt=\"\" \/> para ese medio, reorganizando los elementos de la web.<\/p>\n<p style=\"text-align: justify;\">Con la llegada del\u00a0dise\u00f1o responsive, las versiones web para m\u00f3viles est\u00e1n comenzando a desaparecer. Se espera que para este 2015 este tipo de webs deber\u00edan conformar una minor\u00eda notable y quien no tenga una web adaptable estar\u00e1 fuera.<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #ff0000;\"><strong>Y ahora qu\u00e9 sabes esto, \u00bfest\u00e1s listo para evolucionar el dise\u00f1o tu web?<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n al dise\u00f1o web 3.0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Por Ernesto Mendoza El dise\u00f1o web es una t\u00e9cnica utilizada para estructurar los componentes gr\u00e1ficos de un sitio web, la cual engloba [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[3],"tags":[9,6,7,8,10,13,12,5,11],"class_list":["post-122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-curiosidades","tag-css","tag-css3","tag-html","tag-js","tag-layout","tag-project","tag-server","tag-web-design","tag-website"],"_links":{"self":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":4,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions\/131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/media\/123"}],"wp:attachment":[{"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/possibleapp.com\/blog\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}