El secreto de crear footer fijos

El pie de página o footer, es una pequeña zona que ocupa la parte inferior de la web, y aunque su tamaño es modesto, resulta de suma importancia en términos de diseño y de ofrecer información adicional.

Las posibilidades de usarlo son muy variadas; y si no se le presta la debida atención, se corre el riesgo de perder el interés de la web.

La zona del pie de página, o footer, es decir, lo que concluye la web, es muchas veces utilizado para poner alguna nota legal, citar el desarrollador o a la empresa que realizó el diseño; inclusive, suele ser empleado para incluir un menú inferior a una línea con los niveles más importantes del sitio.

El footer es una zona que podría ser mucho más aprovechada y explotada, para lograr mayor permanencia del visitante en el sitio web y así, conseguir una conversión o contacto de último momento, de usuarios que no habrían llegado a la página de contacto.

Errores que no se deben cometer en la creación del footer

A la hora de crear un pie de página es importante no dejar de incluir:

• El nombre con un enlace al e-mail.

• El logotipo o imagen de la marca, usando HTML.

• Insertar enlaces a webs de colaboradores; ya que el pie de página es un lugar en el que se puede añadir enlaces patrocinados, ya que es un área privilegiada de la página web.

• Añadir secciones extra del menú, para mejorar la navegación.

• Enlaces a redes sociales, tanto de texto como banners, es decir imágenes con enlace.

Cómo hacer un footer fijo

En caso de crear una aplicación web sencilla, lo ideal es lo siguiente:

Header

Procurar que sea sencillo, una aplicación web requiere un header que no propicie distracciones; algo sencillo con el logo de la marca.

Columnas

-Columna de la izquierda: Incluir menú principal de manera vertical.

-Columna central: Se destina para el contenido o para mostrar la información medular.

-Columna de izquierda: Es un menú adicional, secundario. Se incluyen herramientas y opciones.

Footer o pie de página

-En el caso de que se requiera incluir dos: En el footer secundario se puede incluir controles, como: recordatorios, calendario, y accesos rápidos. Este footer secundario puede ser colocado al final de las columnas.

-Y el footer principal: Usualmente es el fijo. y se emplea de manera parecida a la Barra de Tareas. En este, se colocan las conversaciones del chat, mail, sesion, relog, entre otros.

sobre-el-autor-_Venezuela-Hosting

CSS: menú fijo en 3 sencillos pasos

En el área informática, un menú contiene una serie de opciones que el usuario puede elegir para realizar determinadas tareas; estos están contenidos en una barra de menú, la cual se puede decir que es una propiedad que tienen las ventanas para poseer menús, dado que la barra en sí misma no es una ventana, como lo puede ser un botón de comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino un objeto contenedor de otros menús.

Estos se organizan siguiendo el principio de los árboles, esto quiere decir que un menú puede tener menús hijos y menús padres; al inicio, cuando se crea una barra de menú, el identificador del objeto nuevo es un identificador de menús válido, además de que la barra de menú queda como la raíz, el nodo principal, o en otras palabras, un menú sin padres.

De ahí se empieza a crear menús hijos como lo puede ser uno que se llame Archivo, otro Edición y otro Ver, que tendrán como padre al manipulador (handler) del menú raíz; estos menús, a su vez, pueden tener menús hijos, así, archivo, descendiendo de MenuBar puede engendrar Abrir, Guardar, Guardar como, Codificación, entre otros; y siguiendo estas mismas reglas, Codificación, descendiente de Archivo puede engendrar un submenú con los comandos ASCII, Unicode, UTF-8, entre otros.

 

Tipos de menú

Entre los menús más usuales, destacan:

-Normales: Los que tienen el predominio más alto en las aplicaciones.

-Casillas de verificación: Activan un indicador y su estado cambia a «marcado/desmarcado».

-Botones de radio o Radio buttons: Es  un grupos de botones en donde sólo se puede tener activo uno de ellos y su indicador acostumbra a ser una viñeta.

-Submenús: Son aquellos menús que tienen menús hijos, es decir que no se puede hacer clic en él, en vez de eso hay que seleccionar uno de sus hijos; usualmente traen consigo una flecha en la lateral derecha indicando la naturaleza del mismo.

-Separadores: Son los menús sin nombre ni valor, pero con handler, se muestran como líneas grises opacas entre la lista de comandos.

HTML, CSS Y JQUERY para hacerlo

Hay ocasiones en que se necesita que el menú de un sitio web permanezca en la parte superior del navegador cuando se hace scroll hacia abajo. Para lograr esto, se puede crear un menú y mediante jQuery lograr que al ocultarse de la vista, se coloque en la parte superior de la pantalla, por encima de cualquier elemento.

La librería jQuery entre tantas de sus funciones, cuenta con un calculador de la posición absoluta de un elemento, aún si este no tuviera el estilo position en absolute; para obtenerla, se utiliza la función offset, y se lo compara con scrollTop, se puede saber si parte del menú ha salido de la vista del usuario. El código se debe poner en el elemento script antes mencionado.

En cuanto a CSS, los estilos menú-contenedor y menú deben ser del mismo alto, así cuando se “independice” menú de su menú padre, no quedará un vacío, de ser así se correría todo hacia arriba causando otro desplazamiento, devolviendo el objeto a su estado estático, también llamado llamado “ciclado”.

Pasos para crear un menú fijo

Los menús fijos son una tendencia en el diseño web hoy en día, porque lucen bien, y son muy útiles para los visitantes. De esta manera se puede crear un ligero, funcional y práctico menú fijo para un sitio web:

1. Para comenzar, se debe hacer la estructura básica del header y del menú; asimismo, es importante recordar que tendrá algo arriba de él, usualmente un logotipo.

2. En el header, se coloca un contenedor para el logotipo y el menú con una clase llamada .contenedor, esta clase se usa para centrar los elementos del menú.

3. Es importante que se tenga contenido para que aparezca un scroll y se pueda bajar en la página para ver el menú en acción. Para CSS no se hace nada especial; un simple y ordinario menú. En Jquery es sencillo, es preciso conocer la distancia entre el menú y la parte más alta de la página, así que se guarda en una variable llamada altura este dato, y luego se extrae con el objeto offset.

 

sobre-el-autor-_Venezuela-Hosting

Consejos para hacer mejores formularios web

Los formularios online son fundamentales en toda landing page, ya que ellos reciben toda la información personal de los clientes potenciales o futuros compradores; y depende de cómo estén diseñados, se puede esperar un mayor o menor número de conversiones.

Usualmente, gran cantidad de visitantes de los sitios web, están apurados o simplemente no desean invertir mucho tiempo en llenar un formulario web, razón por la cual, estos deben centrarse y ser cortos. Sin embargo, y en aquellos casos en que se desee agregar formularios largos, porque pudiera aumentar la probabilidad de recibir derivaciones de mayor calidad; hay que insistir en su diseño.

Está comprobado que los formularios web deben ser muy visibles, sin llegar a ser intrusivos; deben ser llamativos y, pero sin exagerar; y deben ser precisos, claros y minimalistas, pero no simples ni aburridos. Estos, son una parte crucial en todo sitio web, ya que es la manera en la que el visitante interactúa con el propio sitio.

7 consejos para hacer mejores formularios web

1. Formularios cortos: Partiendo de la frase “menos es más”, hay que recordar que al común de los usuarios no les gusta rellenarlos. Hay que saber qué preguntar, sin caer en excesos: es útil usar las opciones por defecto; medirse en los campos obligatorios, preferir las comunicaciones directas por correo electrónico; incluir las redes sociales.

2. Utilizar validación AJAX: Para evitar tener que corregir y reenviar porque el nombre de usuario ya ha sido elegido. El plugin jQuery Forms, valida los campos mediante Ajax de manera sencilla.

3. Que sea responsive: No es secreto para nadie que los dispositivos móviles y las tablets han superado, en cuanto a usuarios navegando por Internet, a los usuarios de computador de escritorio. Y esto convierte en imperativo que el formulario web sea totalmente responsive; es decir que pueda verse en toda clase de dispositivos.

4. Ofrecer a los usuarios varias vías de contacto: Correo electrónico, redes sociales, número telefónico, que no falte un canal directo de comunicación con los usuarios.

5. Colocar títulos al lado de los campos: Ya que al colocarlos arriba del campo en una sola línea, causa la sensación de que el formulario es más largo.

6. Diseñar un formulario inusual: Mediante un formulario único y distinto al resto, se puede generar un cambio agradable para los usuarios.

7. Usar Certificados SSL: Es muy importante y, a veces pasa desapercibido por muchos diseñadores y desarrolladores. Hay que recordar que la data que contienen los formularios, es data sensible, y si el sitio no cuenta con certificado de seguridad, causará una muy mala experiencia al usuario, y generará duda de llenar los campos.

sobre-el-autor-_Venezuela-Hosting