Apple es una marca muy popular en la nueva era tecnológica en la que vivimos. Tanto los diseñadores como los desarrolladores están de acuerdo en que los productos de Apple muestran un talento exquisito y pasión por sus habilidades. Con el tiempo, el diseño de la interfaz de usuario ha dado un giro hacia arriba y ahora es uno de los temas más candentes entre los diseñadores web.
A continuación, veré cómo construir un pequeño formulario de entrada de estilo Apple con una estructura y secuencias de comandos básicas. Todo el código incluido se basa en XHTML Transitional Doctype junto con las nuevas técnicas CSS2 / CSS3. También utilizaremos la biblioteca jQuery 1.4.1 para admitir nuestras funciones de etiqueta de visualización.
Pruébalo
Aquí hay un adelanto de lo que estaremos construyendo. Echa un vistazo a la página de demostración para verla en vivo y descarga el ejemplo para verlo más de cerca.
Demo en vivo - Descargar
Construyendo nuestro HTML y CSS
Antes de que podamos comenzar a desarrollar, es importante poner en orden la estructura del código del frontend. Por suerte, este proceso es muy simple y no debería tardar mucho en completarse. A continuación, he incluido una copia del código HTML de nuestro ejemplo? Index.html? documento. Todo esto debe ser un código estándar para mostrar un formulario de entrada muy básico, nada más que el conocimiento de cualquier desarrollador de HTML básico.
Aquí he configurado 2 elementos de entrada muy importantes debajo de las ID? ¿Unameblock? y? pwblock ?. Estos representan bloque de nombre de usuario y bloqueo de contraseña, respectivamente, y será muy importante más adelante en nuestro guión. Ahora que nuestro código se ve bien, sería prudente saltar a los estilos CSS.
Estas son las reglas reales de la estructura básica, ya que CSS es lo que da forma a todos los elementos HTML. No hay muchos cambios que vamos a incluir. Algunos restablecimientos básicos para variables globales junto con alineación y posicionamiento para campos de entrada. A continuación se muestran los clips del código fuente, explicados en intervalos de bits.
Aquí tenemos nuestro reinicio global con el asterisco (*) Selector que elimina todos los márgenes y el relleno estándar del navegador. También le damos algunos estilos al elemento del cuerpo para posicionar nuestra forma frontal y central. La división #c es nuestro div contenedor que se ha centrado por nuestra demo.
El primer bloque perceptible se usa para diseñar nuestros campos de entrada. Se dirige a todos los elementos de entrada con una clase de? U1? los cuales se ejecutan nuestros campos de nombre de usuario y contraseña. En lugar de colocar 10-20 declaraciones de estilo en una sola línea, es mucho más fácil para la edición mantener esto en el nivel de bloque.
Aquí tenemos los estilos para configurar cómo se verán nuestros campos de entrada. Relleno, tamaño de fuente, entre muchos bordes y propiedades de manipulación de texto también. Estamos utilizando muchas técnicas nuevas de CSS3 que deberían ser evidentes para todos los desarrolladores de CSS.
Nuevas entidades CSS3
Dos funciones nuevas de CSS3 que estamos usando son -webkit-gradiente y -moz-lineal-gradiente Que puede generar gradientes sobre la marcha. Esta es una característica sorprendente que no se ha discutido en muchos artículos de CSS3. Esto elimina la necesidad de imágenes para crear gradientes de fondo que cumplan con los estándares.
También tenemos -webkit-box-shadow y -moz-box-shadow. Esquemas de nombres similares ayudan a confundir los navegadores Webkit y los navegadores Gecko basados en Mozilla.
Más abajo tenemos 3 estilos más que atacan nuestro botón de envío junto con los estados para nuestros formularios de entrada. los :atención pseudo-targeting significa que CSS solo aplicará nuestros estilos cuando el usuario esté enfocado en cualquiera de los campos de entrada. Estos estilos mostrarán un brillo azul para el enfoque y un brillo rojo para los errores (muy útil al depurar inicios de sesión de usuarios y formularios de registro).
¡Hasta ahora todo se ve genial! De hecho, todo lo que debemos hacer es incluir algunos scripts / estilos en nuestra sección de encabezado para comenzar realmente con nuestros efectos dinámicos. Si toma el documento actual e incluye nuestra hoja de estilos, podemos obtener los efectos de desplazamiento de forma inmediata.
Trabajando con jQuery Effects
jQuery es una increíble biblioteca de JavaScript que ha demostrado ser útil una y otra vez. Su desarrollador web promedio está muy concentrado en la velocidad y la precisión de las secuencias de comandos. Esto es algo que jQuery toma e internaliza con sus ideas.
A continuación se muestra una pequeña sección que debe agregarse entre las cabeza Etiquetas de su documento. Explicaré algunos de estos a continuación y también entraré en algunos de los códigos detrás de escena.
Nuestro style.css es el archivo que incluye todas nuestras reglas de CSS enumeradas anteriormente. Otra inclusión es tip-yellowsimple.css que no se ha mencionado aún. Es un script escrito a través de jQuery como un complemento para los elementos emergentes de información sobre herramientas.Con esta hoja de estilo (descarga con fuente de demostración) podemos diseñar sugerencias de herramientas en cualquier acción.
Nuestros dos archivos JavaScript son realmente básicos y se explican por sí mismos. Estamos accediendo a jQuery 1.4.1 min para reducir las velocidades de procesamiento y descarga. También estamos leyendo la base de datos de códigos API de Google, que almacena todas las versiones anteriores y activas de los scripts populares. Este es un esfuerzo tremendo y ayuda a los proyectos de desarrollo a avanzar sin la necesidad de descargar constantemente la biblioteca jQuery manualmente.
El segundo archivo tenemos? Jquery.poshytip.js? contiene nuestro código de plug-in. Poshytip es una clase de jQuery escrita por Vasil Dinkov para admitir información sobre herramientas dinámica. El código es vasto e innecesario para aprender en detalle. Sin embargo, si eres un geek de jQuery, no dudes en consultar sus esfuerzos manuales para ver cómo se llaman estos métodos y qué variables puedes editar.
Llamada de acción básica
¡Todo lo que necesitamos ahora es nuestro infame llamado a la acción! Esta es nuestra función principal que se cargará en la carga de documentos y se preparará para iniciarse en cualquier señal que llamemos. En este caso, estamos buscando un evento que ocurre cuando un usuario se enfoca en uno de los campos de entrada.
Un último paso es agregar este código en la cabecera debajo de todo lo que incluye nuestro archivo. Este es un código JavaScript directo, por lo que debe ser encapsulado con un guión etiqueta. Para simplificar, he eliminado las etiquetas en el código a continuación para que podamos centrarnos solo en la funcionalidad js.
Así que lo que estamos haciendo es llamar a un genérico. función () {} Para comprobar algunos eventos. Estamos creando 2 nuevas instancias del poshytip () Método basado en nuestros formularios de entrada. Esto se puede ver cuando analizamos el DOM para los ID de elemento? ¿Unameblock? y? pwblock ?.
Cada una de las configuraciones individuales en su lugar amplía la funcionalidad de poshytip. Si desea ver la documentación de todos los métodos, hay una gran colección que Vasil ha puesto en línea. A saber mostrar en es nuestra variable más importante que le dice al motor de análisis que verifique cualquier actividad de enfoque en estos dos elementos.
AlignX y AlignY son importantes en lo que respecta a la colocación. Estos mantienen los valores donde se mostrará nuestra información sobre herramientas en la página. Esto puede ser inferior, central, superior, junto con ubicaciones desplazadas, como interno izquierdo y interno derecho. Intenta meterte con ellos si prefieres que la información sobre herramientas aparezca en el lateral o en la parte inferior en lugar de en la parte superior.
Lo que quizás no haya notado ahora es de dónde se carga nuestro texto. Poshytips lo hace simple aquí, también, donde el valor de nuestro título atributo se muestra en el texto de información sobre herramientas. ¡Esto hace que la selección de elementos específicos sea extremadamente simple y muy productiva!
Conclusión
Estos son algunos de los pasos más básicos para construir un campo de entrada al estilo de Apple. Hay muchos otros efectos únicos que se pueden aplicar utilizando jQuery que se encuentran fuera del alcance de este tutorial. Echa un vistazo a algunas demostraciones del sitio web de Apple para más inspiración. Además, si desea descargar el paquete de demostración completo, puede hacerlo aquí.