Digg es una de las redes de noticias sociales más populares hasta la fecha. Ellos ganan una audiencia masiva en los millones de miembros. Recientemente, la compañía ha tallado una nueva dirección con el lanzamiento de Digg v4. Todo el sistema ha sido reemplazado por nuevas estadísticas y seguidores / siguientes redes.
Uno de los cambios más notables es la estética de la página. Con el lanzamiento de Digg v4, cuenta con un diseño completamente nuevo con una apariencia y sensación únicas. En este tutorial repasaré cómo puedes crear tu propio formulario de entrada de estilo Digg v4 usando algunas propiedades básicas de CSS3.
También usaremos jQuery para manipular cada una de las divisiones clave para un efecto de animación ingenioso. No utilizaremos ninguna llamada de Ajax sofisticada aquí, aunque jQuery sí admite dicha funcionalidad. El formulario principal que usaremos se basa en la página de envío actual de Digg.
Demo en vivo - Descargar
Trabajando con CSS3 y jQuery
Como puede no estar implícito, no hay nada especial requerido para trabajar con CSS3. No necesitamos incluir archivos ni bibliotecas externas, ya que la mayoría de los navegadores modernos admitirán un motor de renderización más nuevo. jQuery tiene que ser incluido en nuestro archivo. Por suerte para nosotros, Google Code alberga todas las versiones de scripts populares en línea.
Usando los documentos de las API de Google podemos comenzar a trabajar con jQuery 1.4.1. He incluido la versión minificada para ahorrar ancho de banda a largo plazo (siempre es una buena idea para entornos de producción). Aparte de esto también necesitaremos nuestros archivos principales. Para que esto incluya un index.html simple, global.css para estilos y script.js para nuestra funcionalidad jQuery.
Estructuras desnudas
Primero podemos comenzar con nuestro código HTML. Debería ser bastante sencillo, pero no duele dividir las cosas en secciones.
Esta es la parte principal del encabezado de nuestro documento HTML. Contiene toda la información meta junto con un doctype de transición XHTML. Las únicas inclusiones de archivos con las que estamos trabajando son CSS y código JavaScript externo. Ambos archivos se almacenan localmente, mientras que nuestro mapa jQuery se incluye a través de http://ajax.googleapis.com/.
A continuación tenemos un código básico para el diseño de nuestro cuerpo principal. Esto incluirá el encabezado de Digg y la parte del logotipo de la página. Esto también incluye nuestra pequeña forma con unos pocos botones de entrada y cajas div.
Digg it CancelA continuación, debería ser sencillo cubrir algunas de las consultas CSS comunes. Hay algunas propiedades e ID que deben entenderse bien cuando se edita un script de estilo similar. También hemos usado algunas propiedades CSS3 nuevas para los navegadores modernos.
CSS de próxima generación
Nuestro archivo comienza simple con restablecer los márgenes y los estilos de encabezado / cuerpo. Realmente no hay mucho en cuanto a fuentes, áreas de bloques u otros elementos comunes. Dado que el propósito de nuestro código es basado en tutoriales, no me molesté en crear una lista extensa de propiedades CSS.
Observe cómo hay una pequeña clase llamada "sprite". Esto utiliza un archivo master.png que contiene todos los iconos y gráficos para el diseño de Digg. Esta es una técnica de spriting utilizada para ahorrar ancho de banda y llamadas de servidor para gráficos de fondo.
Más abajo en la página tenemos algunos bloques más nuevos relacionados con las consultas de CSS3. Muchos de los campos y botones de entrada del formulario incluyen efectos generados en el navegador a través de CSS. Como ejemplo, todos los campos de texto de entrada tienen un conjunto de -webkit-box-shadow con una inserción inserta.
Esto produce un efecto 3-D a diferencia de muchos vistos antes. Los nuevos estándares web generan una tonalidad hermosa y con estas propiedades CSS podemos diseñar interfaces sorprendentes.
Un poco más abajo tenemos un bloque de código dirigido a unas pocas clases. campo de detalle de la sumisión y editando ahora Contienen algunas propiedades interesantes que deberían ser examinadas un poco más. Inicialmente, todo el contenido dentro de una clase de edición actual no tiene visualización. Esto se cambia usando jQuery para manipular cómo deberíamos nuestros formularios.
Los formularios de envío se establecen de forma predeterminada para que parezcan etiquetas. Una vez que haga clic para editarlos, cambiaremos la clase de división principal a edición actual y eliminaremos pantalla: ninguna; cláusula.Desde aquí podemos alternar entre los dos estados con facilidad.
Estos estilos CSS pueden funcionar con casi cualquier cosa. Notarás algunos errores en el sistema de inmediato. Como un breve ejemplo, cualquier botón o enlace dentro de la div no mostrará un puntero del mouse al pasar el cursor. En su lugar, obtendrás la barra de texto que se usa para resaltar bloques de texto; esto se puede cambiar a través de la propiedad del cursor de CSS.
Construyendo nuestro Script
El JavaScript requerido es bastante sencillo para trabajar. Afortunadamente, jQuery ayuda eliminando muchas líneas de código necesarias para apuntar y manipular objetos DOM.
Comenzamos con nuestra comprobación de eventos estándar lista para que nuestro documento finalice la carga. Esta es una forma más precisa de dirigir el desarrollo de secuencias de comandos, ya que todo lo que realmente necesitamos es un Modelo de Objeto de Documento completamente cargado para comenzar. Muchos activos más pequeños a lo largo de la página continuarán cargándose, pero en lugar de esperar nuestro script es ejecutable al instante.
Dentro de nuestros parámetros de función listos pasamos un nuevo función() Diseñado para manejar oyentes de eventos. Estos comprobarán que ocurra un evento determinado y, cuando lo haga, ejecutará el conjunto de códigos dentro de una nueva función.
Esto tendrá más sentido con un ejemplo, así que comencemos con el primer campo de entrada.
La primera línea está revisando nuestro documento para cualquier elemento (s) con la clase? Edit-input? y vincular un controlador de eventos a él (o ellos). El evento que estamos buscando es un evento de clic que significa que cada vez que el usuario hace clic en este elemento, llamamos a otra función. En nuestro código HTML .edit-input Es una clase aplicada a nuestros enlaces de edición.
Una vez que la función comienza, estamos extrayendo el nombre de la clase de nuestro elemento principal que contiene. También estamos capturando la ID actual de nuestro enlace de edición, ya que podemos determinar si estamos editando el título o la descripción de la historia. Más abajo tenemos un código para intercambiar las dos clases que hacen que nuestro campo de texto sea editable.
Luego, se necesitan algunas líneas de código para enfocar automáticamente el campo de texto y guardar los resultados. Podríamos haber utilizado una llamada Ajax para guardar los datos en una base de datos con cada clic, sin embargo, los detalles para hacerlo van más allá del alcance de este tutorial. También necesitaríamos soporte desde un lenguaje de fondo como PHP o Ruby.
Hay un evento de vinculación similar vinculado a nuestras dos divisiones de campo de formulario. Esto comprobará el área de texto que contiene nuestra descripción de la historia y funciona de una manera similar a la anterior. Tenga en cuenta que puede encadenar múltiples escuchas de eventos de esta manera para crear scripts de formularios dinámicos en minutos.
Conclusión
Este tutorial ha brindado una sólida visión general de las nuevas técnicas CSS3 y la funcionalidad jQuery clásica. Nuestro producto final es muy similar al formulario de envío de Digg sin extraer imágenes de una URL que requiere técnicas Ajax.
Todos los estilos y diseños de CSS se han creado de manera muy similar a Digg v4. Mejor aún, muchos de los bloques de código se han simplificado para copiar y manipular en su propia página.
Como se indicó anteriormente, actualicé el código de demostración en vivo y ofrecí un archivo .zip para descargar. Puedes ver mi código de demostración de Digg aquí en DesignShack y también descargar el archivo para tus propios trabajos. Si tiene alguna pregunta o comentario, siéntase libre de ofrecer sus ideas en el área de discusión a continuación.