Share
Javascript puede agregar muchos efectos especiales que realmente pueden mejorar la experiencia del usuario. Aquí hay 10 técnicas simples e inteligentes de Javascript que agregan una dosis extra de facilidad de uso a cualquier página web..
Javascript se utiliza normalmente como un lenguaje estético en el desarrollo web. Esto significa que los desarrolladores web casi siempre deben usar Javascript para una sola cosa: Mejorar la experiencia del visitante.. Hay muchas formas inteligentes y útiles para mejorar un sitio desde la perspectiva de la interfaz de usuario. Un desarrollador puede encontrar casi cualquier fragmento de Javascript para lograr lo que quiere lograr..
Imagen de vista previa por miusam-ck.
Javascript es verdaderamente un lenguaje poderoso y fácil de aprender. Puede utilizarse para realizar funciones simples y estéticas, como alternar un elemento. Puede utilizarse para alimentar un cliente de correo electrónico dinámico e incluso enviar datos de forma instantánea. Javascript puede ser tan simple o avanzado como quieras que sea.
Un gran lugar para encontrar técnicas de Javascript que puedan mejorar la funcionalidad de su sitio es mediante la navegación de los marcos de Javascript y sus complementos y documentación. Aquí hay algunos marcos que tienen muchos recursos, complementos y comunidades detrás de ellos:
Los marcos son una bendición para cualquier desarrollador o diseñador que desee agregar rápidamente efectos de Javascript a sus diseños, sin tener que crear código en bruto. Muchas de las técnicas que utilizamos a continuación se ejecutarán en marcos de Javascript como JQuery o MooTools.
Es importante tener en cuenta que muchas de estas características no son grandes y desagradables, sino más bien pequeñas y sutiles. Muy a menudo los desarrolladores se dejan llevar cuando se trata de agregar Javascript. Estos son pequeños pero muy útil Técnicas que pueden ser utilizadas por casi cualquier desarrollador. También notará que la mayoría de estas características se relacionan con la ocultación inteligente y la visualización de información importante en formas no tradicionales..
La nube de sub tag de jQuery hover es un excelente ejemplo de una pieza simple de Javascript que realmente agrega un toque agradable y sutil a las nubes de etiquetas. A medida que el usuario se desplaza sobre una etiqueta específica y tiene subetiquetas asociadas, aparece un cuadro emergente que muestra las subetiquetas. Simple, pero efectivo.
Opacity Change es un pequeño tutorial sobre cómo usar Scriptaculous para realizar un cambio de opacidad en un elemento..
Los cambios de opacidad son excelentes por muchas razones diferentes: mostrar contenido desplazado, mostrar contenido en el que se ha hecho clic y muchas otras funciones útiles.
Poder recortar fotos después de subirlas es una característica que más aplicaciones web podrían usar. Es por eso que la carga y el recorte de imágenes de jQuery es una técnica de Javascript poco utilizada. Recortar imágenes es una función muy necesaria cuando se trata de cargar imágenes, y muchas aplicaciones web podrían beneficiarse al agregar esta útil característica..
Honestamente, creo que casi todas las cargas de imágenes podrían usar una función de recorte básica. Sin embargo, el recorte de imágenes no es la función de Javascript más fácil de agregar a un formulario. Es un proceso un tanto complicado, usando bibliotecas de imágenes y Javascript. El uso de este script creado en el marco de jQuery puede agregar mucho a la experiencia del usuario sin un montón de código adicional.
A medida que los piratas informáticos se vuelven cada vez más inteligentes y más numerosos, es cada vez más importante para los usuarios del sitio elegir contraseñas seguras y no adivinables que contienen una combinación de letras (mayúsculas y minúsculas), números y caracteres especiales. Sin embargo, esta tarea es más fácil decirlo que hacerlo.. Los usuarios normalmente no leen las instrucciones si pueden ayudarlo.
Mostrar visualmente la fortaleza de la contraseña en los formularios de registro es una excelente manera de alentar a los usuarios a hacer que las contraseñas sean más difíciles. Si bien esto se está volviendo lentamente más común, esta técnica simple no se usa en ninguna parte tan cerca como debería ser..
El> Password Strength Meter funciona con prototipo / scriptaculous y es un pequeño script práctico que muestra la fuerza de la contraseña con un medidor de color en tiempo real. Más sitios necesitan implementar este tipo de script de "seguridad" para ayudar a los usuarios a ver los peligros de ingresar contraseñas débiles.
Magic Zoom es un script muy útil para sitios de comercio electrónico, así como para otros sitios que tienen imágenes detalladas. En lugar de hacer que el usuario haga un clic adicional en una imagen mucho más grande y use ancho de banda, Magic Zoom le permite mirar esencialmente con una lupa cada imagen.
Magic Zoom es un script de pago, pero vale la pena por los $ 47 si tiene una tienda de comercio electrónico o cualquier otro sitio que tenga fotografías muy detalladas. Puede descargar la versión de prueba a continuación.
Cada formulario en Internet debe tener esta característica. Puede que solo sea el perfeccionista en mí, pero tener múltiples formularios de entrada que se ajustan automáticamente a la siguiente entrada parece que debería ser algo común. Es un alivio cuando se completan elementos como los números de seguridad social cuando la entrada pasa automáticamente a la siguiente entrada..
El script de jQuery Autotab se explica por sí mismo y hace lo que su nombre implica: agrega autotabs a las formas con jQuery.
A veces son las pequeñas cosas en desarrollo las que realmente pueden hacer una diferencia..
Aunque normalmente no nos gusta tocar nuestra propia bocina en NETTUTS, ¿cómo podemos hablar de Javascripts inteligentes y útiles sin que aparezca el impresionante tutorial de Connor Zwick sobre cómo crear un formulario de inicio de sesión útil??
El formulario de inicio de sesión de Javascript es una combinación elegante de jQuery y un hermoso diseño de Photoshop para lograr el efecto de poder mostrar un formulario de inicio de sesión sin que el cuadro ocupe la mayor parte de la página. Digg es otro gran ejemplo de un sitio que usa Javascript para mostrar y ocultar el formulario de inicio de sesión.
Las formas son algunas de las partes más difíciles del diseño web. Haga un formulario demasiado largo y podría ahuyentar a un posible usuario o cliente. Si el diseño de un formulario no es atractivo, también podría asustar a un usuario potencial. Cualquier forma en que podamos hacer que nuestros formularios web sean más atractivos a la vista producirá un mayor índice de conversión de registro.
El contexto que destaca el script de formularios web es un atributo excelente para agregar a un formulario de registro. Es sorprendente que más formas no ofrezcan esta funcionalidad. Poder ver rápidamente el progreso en un formulario puede mejorar notablemente la experiencia del usuario.
El script de Sliding Top Panel se parece mucho al increíble Formulario de inicio de sesión de Javascript. Ocultar / Mostrar información importante es la clave para diseños hermosos y utilizables. En cualquier momento en que podamos usar Javascript para ayudar a mantener la información innecesaria cuidadosamente almacenada, deberíamos esforzarnos por hacerlo.
Los botones de promoción del sitio y los enlaces pueden con rapidez desordenar el diseño de un sitio o blog. Parece que si desea promocionar sus publicaciones de blog y otro contenido en sitios como Digg y Delicious, debe agregar una larga lista de botones a su plantilla para no excluir los favoritos sociales de nadie o el sitio de noticias..
El historial social es útil porque ejecuta una prueba para ver dónde ha estado el usuario recientemente, y carga imágenes en esos sitios, y solo esos sitios. Esencialmente, solo le muestra al visitante los botones que querría ver.
¿Cómo sabe SocialHistory.js? Mediante el uso de una fuga de información lindo introducido por CSS. Los colores del navegador visitan los enlaces de forma diferente a los enlaces no visitados. Todo lo que tiene que hacer es cargar un montón de URL para los sitios de marcadores sociales más populares en un iframe y ver cuáles de esos enlaces son de color púrpura y cuáles son azules.
Glen Stansberry es un desarrollador web y bloguero que ha luchado más veces de lo que desea admitir con CSS. Puedes leer más consejos sobre desarrollo web en su blog Web Jackalope..
Accentsconagua