{"id":4757,"date":"2014-09-16T10:28:19","date_gmt":"2014-09-16T10:28:19","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=4757"},"modified":"2014-09-16T10:28:19","modified_gmt":"2014-09-16T10:28:19","slug":"diseno-responsive-para-usuarios-de-a-pie","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2014\/09\/diseno-responsive-para-usuarios-de-a-pie\/","title":{"rendered":"Dise\u00f1o responsive para usuarios de a pie"},"content":{"rendered":"

\"ecommerce<\/a><\/p>\n

En este post vamos a bajar del cielo de las webs corporativas y bajaremos al suelo, al usuario de a pie, y como deber\u00eda de enfocarse en dise\u00f1o responsive para las webs de los aut\u00f3nomos, aficionados, tiendas a peque\u00f1a escala<\/strong> . . . en resumen, webs a peque\u00f1a escala gestionadas normalmente por 1 o 2 personas.<\/p>\n

Tengamos en cuenta que el presupuesto disponible es precario, y la contrataci\u00f3n de una agencia para el proceso de traslado es inviable. Bien, si contamos con unos conocimientos t\u00e9cnicos medios, la alternativa es hacerlo el proceso nosotros mismos.
\nSuena bien, \u00bfverdad?<\/p>\n

\u00a1Responsivizate !<\/h2>\n

Para ello existe una propuesta de editor web responsive: Zeendo<\/a><\/p>\n

Se trata de una plataforma basada en\u00a0cloud computing, de forma que todo el trabajo est\u00e1 siempre online y se puede continuar el proceso de edici\u00f3n de la nueva web sin perder ning\u00fan cambio, sin tener que descargar ning\u00fan tipo de software, y as\u00ed, desde cualquier lugar, a cualquier hora. Pero sin duda, lo m\u00e1s importante es que est\u00e1 concebido\u00a0para cualquier usuario sin conocimientos de programaci\u00f3n<\/strong>.<\/p>\n

Ya podemos empezar a respirar m\u00e1s tranquilos.<\/p>\n

\u00bfComo funcionan los editores web?<\/h2>\n

La base la adaptaci\u00f3n se hace a partir de\u00a0plantillas personalizables creadas en HTML5 y CSS3 que re-colocan los elementos de la web, dependiendo del espacio disponible seg\u00fan la resoluci\u00f3n de pantalla<\/strong>. De esta forma discriminan elementos, texto, pesta\u00f1as del men\u00fa, reducen las im\u00e1genes de manera que la navegaci\u00f3n sea fluida, intuitiva y as\u00ed se pueda ver de forma optima en todos los dispositivos<\/strong>, sean fijos o m\u00f3viles.<\/p>\n

La tecnolog\u00eda HTML5<\/strong> y CSS3<\/strong> son los que nos permitir\u00e1n lograr un dise\u00f1o que se adapte al medio. Dentro de las caracter\u00edsticas de CSS3, encontraremos las claves para lograr que nuestros desarrolles se adapten, creando reglas, que responder\u00e1n seg\u00fan las caracter\u00edsticas y disposici\u00f3n del dispositivo\u201d\u00a0comenta.<\/p>\n

Por ejemplo, es posible crear reglas seg\u00fan el alto o ancho de la pantalla, pero tambi\u00e9n tendremos la posibilidad de especificar opciones seg\u00fan el dispositivo est\u00e9 en modo Landscap (horizontal) e o Portrait (vertical) como en el caso de los smartphones o tablets.<\/p>\n

En lugar de construir una website para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en d\u00eda, para smart TV), se crea una sola website<\/strong> utilizando CSS3 media y un layout con im\u00e1genes flexibles. De esta forma,\u00a0la website detecta desde qu\u00e9 clase de dispositivo est\u00e1 accediendo el usuario\u00a0y muestra la versi\u00f3n m\u00e1s optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos im\u00e1genes, m\u00e1s ligeras, redistribuci\u00f3n de las columnas en el dise\u00f1o, menos texto, etc.).<\/p>\n

\"twentyfourteen\"<\/a><\/p>\n

Sobra decir lo f\u00e1cil en que se convierte manejar una web optimizada para el m\u00f3vil, ya que solo usamos el scroll para subir y bajar, y a\u00f1adimos funcionalidades t\u00e1ctiles para agrandar y reducir las im\u00e1genes, de forma sencilla para el usuario, sin que con ello se nos descomponga la estructura de la web.<\/p>\n

\u00bfQu\u00e9 pasa si necesito algo m\u00e1s potente?<\/h2>\n

En caso de necesitar una web m\u00e1s compleja que la que nos puede proporcionar Zeendo, podemos hacer uso de la \u00faltima versi\u00f3n de PrestaShop<\/a> para crear un ecommerce responsive o WordPress<\/a> para crear cualquier tipo de web compleja y responsive (Ej. Web corporativa + blog + ecommerce sencillo). En k3bone<\/strong> tenemos planes con las \u00faltimas versiones de PrestaShop<\/a>, WordPress<\/a> y Joomla!<\/a> que soportan las plantillas responsive<\/a> m\u00e1s avanzadas e impactantes.<\/p>\n

\"Cheope<\/a><\/p>\n

Responsive para SEO<\/h2>\n

No s\u00f3lo se trata de obtener una soluci\u00f3n para todos los dispositivos, se trata de ganar puntos en el r\u00e1nking de los buscadores m\u00f3viles<\/strong> de manera que ganemos visibilidad y tr\u00e1fico en nuestro sitio web.<\/p>\n

Una web creada con dise\u00f1o responsive<\/strong> mejora el SEO<\/strong>, las b\u00fasquedas a trav\u00e9s de dispositivos m\u00f3viles son diferente a las que se realizan desde un ordenador de escritorio por lo que tener una versi\u00f3n m\u00f3vil de tu web es bueno, tener una con responsive design es a\u00fan mejor, sobre todo porque cuantos m\u00e1s dispositivos alcances a cubrir m\u00e1s tr\u00e1fico generar\u00e1 tu web.<\/p>\n

Tan simple como eso.<\/p><\/blockquote>\n

Adem\u00e1s, buscadores como Google<\/strong> ya est\u00e1n priorizando en el r\u00e1nking a las websites m\u00f3viles en b\u00fasquedas m\u00f3viles, como es l\u00f3gico.
\nAl tener una sola URL, el contenido se optimiza una sola vez<\/strong>, cada vez que sea necesario. \u00a0Con lo cual, se facilita en gran medida el trabajo de indexaci\u00f3n del algoritmo de Google<\/strong>, con lo que se consigue un mejor ranking. No se duplica contenido.<\/p>\n

El dise\u00f1o responsive<\/strong> se est\u00e1 generalizando a pasos agigantados y eso ha producido\u00a0varios desarrolladores creen frameworks (aplicaciones preconfiguradas) para que no se\u00a0tengan que crear las p\u00e1ginas adaptativas desde cero, nos facilitan la vida y hacen que\u00a0todo el proceso de creaci\u00f3n sea mucho m\u00e1s f\u00e1cil para los desarrolladores.<\/p>\n

1) El m\u00e1s generalizados es\u00a0Bootstrap<\/a>, un framework creado por el equipo de desarrollo de\u00a0Twitter y de c\u00f3digo abierto, muy usado por desarrolladores freelances.<\/p>\n

2) Foundation 3\u00a0es\u00a0otro framework muy popular el cual ellos mismo definen como \u201cel framework m\u00e1s\u00a0avanzado del mundo\u00bb….<\/p>\n

3) HTML5 Boilerplate, el framework que usan m\u00e1s\u00a0marcas conocidas como Google, Microsoft, Nike o el equipo de desarrolladores de Barack\u00a0Obama.<\/p>\n

\"Comenzando<\/a><\/p>\n

Paso a paso<\/h2>\n

Para realizar el cambio\u00a0a Responsive Design conviene ir poco a poco analizando cada paso dado:<\/p>\n