Tecnologías para desarrollos en internet Jesús Esteban Sánchez Alcántara Lectura Responsive Navigations Patterns http://bradfrost.com/blog/web/responsive-nav-patterns/ Cuando vemos una página web estamos acostumbrados a usar la pantalla de nuestra monitor de la PC o de la laptop, sin embargo a la hora de ver esa pantalla en un dispositivo móvil como una tableta o un celular, esta tiene menor cantidad de pulgadas por lo que algunas páginas no se adaptan a la pantalla de nuestro dispositivo, por lo que uno para ver algunas cosas como el menú el usuario o uno mismo debe de hacerlo grande en el dispositivo y eso resulta incomodo, ya que hace que la navegación web sea diferente como es el caso de la página de la facultad. Con el diseño responsivo, lo que nosotros estamos haciendo es adaptar nuestra página a los distintos tamaños de pantalla, en especial al de los dispositivos móviles para que el usuario tenga la comodidad de ir navegando por nuestra página y esta una navegación móvil agradable. Algunos de las técnicas más populares para diseños responsivos son: Top Nav or ”Do Nothing” Approach Es una de las propuestas a solucionar este problema de navegación que resulta fácil de implementar, por lo que es común ver que muchas páginas web tengan este tipo de diseño responsivo. Algunas cosas a favor que tiene es que es fácil de implementar ya que no tiene dependencias de Javascript, no rompe con ”maniobras CSS requeridas” y que el orden de nuestro código no se ve afectado ya que no hay necesidad de cambiar las listas de navegación a través de la fuente. Algunas cosas en contra que tiene es que no es escalable, esto quiere decir que si yo quiero agregar después más cosas a mi menú de navegación o una nueva sección al sitio, como le hago. Otra cosa también que tiene en contra es que esto resulta incomodo para las personas que tienen los dedos muy anchos o gordos, porque para picarle a un botón del menú tendrían el problema de que por lo mismo de sus dedos le piquen a más de un botón, llevándolos a otro lado del sitio que no querían. Otro problema que hay es que no se va a ver igual en todos los dispositivos, ya que por ejemplo el texto podría lucir bien en un iPhone, pero estos mismos dispositivos tienen diferentes formas de fuentes de renderizado. The Footer Anchor Esta solución mantiene la lista de navegación en el pie de página del sitio, mientras que el encabezado contiene un simple enlace apuntado al punto del pie de página . Algunas cosas a favor que tiene es que es fácil de implementar,no tiene dependencias de Javascript, para lo de CSS es muy poco lo que hay que hacer y tiene un solo botón en la ”cabecera” de la página. 1 Unas cosas en contra que tiene es que no se ve muy elegante y el ”ancla” de salto que tiene puede resultar incómodo. The Select Menu Esta solución lo que hace es evitar problemas que el enfoque de navegación superior presenta ya que transforma los enlaces de navegación en una lista de enlaces en forma de menú de selección para las pantallas pequeñas de los celulares. Algunas cosas a favor que tiene es que libera un montón de espacio, mantiene las interacciones con el usuario en la cabecera, y con este diseño cada navegador puede encargarse de seleccionar los menús a su manera. Algunas cosas que tiene en contra que tiene es la falta de control de estilo, tiene dependencias Javascript, es un tanto confuso para los usuarios ya que suelen usarse para llenar un formulario. The Toggle Es similar al enfoque de anclaje de pie de página, pero en vez de saltar hacia abajo en la parte inferior de la página, el menú derecho se desliza abierto en la cabecera. Algunas cosas a favor que tiene es que mantiene al usuario en un lugar, es elegante y fácil de escalar. Algunas cosas que tiene en contra que tiene es que tiene dependencias Javascript así como el rendimiento de una animación que tengamos no va a ser bueno. The Left nav Flayout Aquí el NAV se accede por un icono de menú, lo que revela una bandeja que se desliza por la izquierda y se mueve el contenido principal a la derecha. Facebook popularizo este tipo de navegación de la izquierda para dispositivos móviles. Algunas cosas a favor que tiene es que este enfoque nos proporciona una gran cantidad de espacio para expandirse, tiene buen aspecto y los dispositivos móviles que traen la aplicación nativa de Facebook tienen este tipo de convenciones. Algunas cosas que tiene en contra que no escala bien ya que es bastante útil para dispositivos móviles pero no tanto en pantallas grandes; por otra parte es un poco avanzado ya que tiene una gran cantidad de partes móviles y también es muy confuso ya que si no se esta acostumbrado. The Footer Only Aquí se desprende el contenido en primer lugar, sin embargo, requiere que los usuarios móviles se desplacen hasta el final de la parte inferior con el fin de navegar por el sitio. Algunas cosas a favor que tiene es que se libera espacio en la cabecera y de ello se desprende el contenido en primer lugar. Algunas cosas que tiene en contra es que no es tan fácil de descubrir el menú aparte de que es difícil acceder a algo en el sitio que puede estar hasta abajo de la página, resultando tedioso. The ”Hide and Cry” Este enfoque trata de que uno como desarrollador tenga que pensar en los usuarios que tienen dispositivos móviles y por lo tanto hacer páginas que no solo enfoquen en que se vean bien en pantallas de gran tamaño. Algunas cosas a favor que tiene es que libera un buen de espacio quitando el nav para pantallas pequeñas. 2 Algunas cosas que tiene en contra es que elimina el contenido o funcionalidad para los usuarios de dispositivos móviles, aparte de que añade a la página peso adicional,es decir, hay elementos que no son necesarios que esten y siguen sin que desaparezcan, y otra cosa es que hace difícil mantener dos navegaciones separadas en las pantallas de los dispositivos móviles. 3
