Diez soluciones útiles de codificación CSS/JS para desarrolladores web

 

 

 

  • SmashingConf Friburgo 2024
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. 1. Imágenes de contenido en línea
      1. ¿Cómo se hace?
    2. 2. Trucos tipográficos
      1. ¿Cómo se hace?
    3. 3. Superposiciones informativas en línea
    4. 4. Destacado del producto
    5. 5. Menús deslizantes
      1. ¿Cómo se hace?
    6. 6. Autores "marcados"
      1. ¿Cómo se hace?
    7. 7. Diseños de página de archivo
      1. ¿Cómo se hace?
    8. 8. Rollovers redondeados transparentes
      1. ¿Cómo se hace?
    9. 9. Combinando Flash y CSS
      1. ¿Cómo se hace?
    10. 10. Gráficos de etiquetas populares
      1. ¿Cómo se hace?
    11. ¿Qué soluciones de codificación deberíamos cubrir a continuación?
    12. Artículos Relacionados

    A menudo, las soluciones de diseño creativas y verdaderamente notables siguen siendo desconocidas porque nosotros, los diseñadores, simplemente las pasamos por alto. Al estar ocupados con nuestros propios proyectos, a veces intentamos captar la intuición detrás del (probablemente) código complejo y desordenado de otros diseñadores para comprender cómo logran implementar ideas de diseño particulares. De hecho, con sólo observar el código de otros desarrolladores podemos aprender mucho de ellos; podemos encontrar ideas interesantes y mejorar la calidad de nuestro trabajo.

     

    Durante los últimos meses hemos prestado más atención a técnicas de diseño interesantes y soluciones de codificación y hemos tratado de comprender cómo funciona cada una de estas soluciones y cómo pueden beneficiar a otros diseñadores y desarrolladores. Estos diseños suelen ser difíciles de encontrar, por lo que sería fantástico si pudieras sugerir algunas soluciones que valga la pena explorar en detalle. ¡Sin duda las cubriremos en nuestras próximas publicaciones!

    Entonces, echemos un vistazo más de cerca a 10 técnicas útiles de CSS y Javascript y soluciones de codificación que pueden resultar útiles para su próximo proyecto. Debe tener al menos un conocimiento básico de CSS y JavaScript antes de leer el artículo completo.

    1. Imágenes de contenido en línea

    Al ver una publicación de blog o un artículo en línea, normalmente tendemos a encontrar que la mayoría de las imágenes que se “incluyen” en el contenido real de la historia a menudo se presentan de manera aburrida o insulsa.

    Sin embargo, en realidad es bastante fácil crear imágenes de contenido atractivas que mantengan un fuerte sentido de diseño y marca, pero que aún así logren fluir naturalmente con el contenido de su sitio. UXBooth proporciona un ejemplo limpio y elegante de esta técnica (desplácese hacia abajo hasta que vea un lomo plateado). En la captura de pantalla a continuación, observe cómo la imagen de Silverback se ubica naturalmente en línea y fluye con el contenido de la página.

    Imágenes de contenido en línea de UxBooth en acción

    ¿Cómo se hace?

    A primera vista, el lomo plateado parece una imagen de fondo que se ha colocado en el centro de la columna de contenido con CSS o JavaScript (o una combinación de ambos); sin embargo, esta es una solución CSS pura. Un div que envuelve la imagen del lomo plateado (una simple imagen .png) flota hacia la derecha. Inmediatamente después, en el HTML viene un párrafo y una lista ordenada. El div "silverback" tiene un margen izquierdo de 47 píxeles que evita que la etiqueta p y el contenido de la etiqueta ol se superpongan a la imagen, proporcionando así un buen espacio visual y un flujo general de la página.

     

    HTML

    h3Contest Details/h3div" img src="imagery.png" alt="Imagery" //divp...the introductory paragraph.../pol li...various bullet points went here.../li/ol

    CSS

    .imagery { /* The image is floated to the right */ width: 205px; float: right; /* The image is positioned precisely, by pushing it 20px from the right border */ margin-right: -20px;/* The image is pushed away from the text (to the right) with a left margin of 47px */ margin-left: 47px;}

    2. Trucos tipográficos

    CommandShift3, autoproclamado sitio web popular o no, utiliza un interesante truco tipográfico para mostrar los resultados de la votación de cada sitio web en el que haya enviado un voto. Obviamente, este efecto se logra utilizando únicamente CSS.

    Bonitos efectos tipográficos para mostrar porcentajes de votos.

    ¿Cómo se hace?

    Cada línea de resultado contiene una captura de pantalla "porcentaje ganador" -div + así como una captura de pantalla "porcentaje perdedor" -div + (la imagen a continuación debe dejar claro lo que se quiere decir aquí). A cada uno de los bloques de porcentajes se le asigna un ancho que es ligeramente menor que el ancho que necesita para mostrar el texto completo. Además, el atributo CSS overflow:hidden se aplica para ocultar el contenido que no es necesario.

    Este es todo el código necesario para el div "porcentaje ganador". El div "porcentaje perdedor" obtiene el mismo código con la adición de un margen negativo para que parezca deslizarse detrás de la miniatura del sitio perdedor.

    HTML

    div div div div46span%/span/div /div div --the image goes here-- /div /div div div --the image goes here-- /div div div54span%/span/div /div /div div --You voted for text goes here-- /div/div

    CSS

    .result .pct { float:left; height:80px; margin:0; overflow:hidden; padding:0; white-space:nowrap; width:95px; }.result .screen-left .pct div { margin:28px 0 0 10px; float: left; }.result .loser .pct div { color:#84C3FF; } .result .pct div span { display:inline; font-size:55px; }.result .screen-right .pct div { margin:28px 0 0 -8px; float: left; }.result-first .pct div { color:#FFFFFF; }

    3. Superposiciones informativas en línea

    Esta versión de myfamily.com de 31tres.com tiene un uso interesante de íconos repartidos por todo el cuerpo del texto. Si pasa el cursor sobre el ícono del calendario, se muestra una superposición informativa (muy similar a una información sobre herramientas); esta última muestra un gráfico de cómo se vería su calendario potencial cuando se registre en myfamily.com. Observe el efecto de transparencia y la flecha en el lado izquierdo del bloque que aparece.

    ### ¿Cómo se hace?

    Cuando un usuario pasa el mouse sobre el ícono del calendario, se usa JavaScript para mostrar un div oculto que contiene una imagen .png transparente . Cuando el mouse se aleja del ícono del calendario, el div se oculta nuevamente. Este ejemplo en particular no utiliza un marco de JavaScript como jQuery o Prototype, sino que utiliza dos funciones personalizadas para ocultar y mostrar el div en consecuencia.

     

    Tenga en cuenta que este código no sigue buenas prácticas de codificación ya que no separa la funcionalidad de JavaScript del estilo del sitio. Nunca debes incluir eventos de Javascript como atributos en línea y este ejemplo es más bien un prototipo rápido. Es mejor encapsular el código JavaScript en un único archivo .js e incrustarlo en su página web usando la etiqueta script. Lea más en nuestro artículo jQuery: ejemplos y mejores prácticas .

    HTML

    div onmouseover="showLayer('image')" onmouseout="hideLayer('image')"/divdiv img src="img/event_hover.png" alt="image"/div

    JavaScript

    function showLayer(layerName, shadowLayerName){ if (document.getElementById) // Netscape 6 and IE 5+ { var targetElement = document.getElementById(layerName); targetElement.style.visibility = 'visible'; }}function hideLayer(layerName){ if (document.getElementById) { var targetElement = document.getElementById(layerName); targetElement.style.visibility = 'hidden'; }}

    4. Destacado del producto

    Basecamp , un producto de 37signals, elige resaltar su plan de producto más popular para llamar la atención sobre él y, con suerte, crear más conversiones de visitantes en clientes. El plan de producto destacado también tiene la ventaja adicional de información sobre herramientas de Javascript para ofrecer más detalles sobre las características destacadas del producto. Tenga en cuenta que cada enlace tiene su propia información sobre herramientas que aparece en el lado derecho cuando se coloca el cursor sobre un enlace de texto.

    Planes de productos destacados para Basecamp

    ### ¿Cómo se hace?

    El equipo de 37signals elige utilizar Prototype.js y CSS para lograr el efecto de información sobre herramientas , mientras confía en CSS puro para resaltar el plan de producto destacado. Cada uno de los planes reside en su propio div, con una clase "corta"; el plan resaltado reemplaza la clase corta por una clase "alta".

    A los divs a la izquierda y a la derecha del plan resaltado se les agregan clases CSS adicionales para proporcionar sombras en sus lados izquierdo y derecho para dar la apariencia de que el plan destacado se eleva fuera de la página. El Javascript, escrito usando prototipo.js , escucha cada una de las características del producto sobre las que se pasa el cursor. Cuando se pasa el cursor sobre una función, toda la información sobre herramientas se oculta y luego se muestra la información sobre herramientas adecuada.

    Información sobre herramientas del plan de producto en acción

    HTML (para el plan resaltado)

    div h1a href="https://signup.projectpath.com/signup/Plus"Plus/a/h1 h2$49/month/h2 h3Most popular plan/h3 ul li a href="#" hover_container="users_bubble"strong35/strong projects/a span divdivdivdiv div/div h2What are active projects?/h2 p..Content for the tool tip.../p /div/div/div/div /span /li ...code repeats for all product bullet points... /ul a href="https://signup.projectpath.com/signup/Plus"img src="https://www.smashingmagazine.com/images/btn_signupchart_large.png" alt="Sign Up" / /div

    CSS

     

    body.signup4 div.tall { background-color:#FFFFFF; border:3px solid #3671A1; float:left; font-family:helvetica,arial,sans-serif; height:310px; padding:8px 10px 10px; text-align:center; width:220px;}body.signup4 div.tall h1, body.signup4 div.tall h1 a { color:#000000; font-size:42px; line-height:1em; margin:0; padding:0; text-decoration:none;}body.signup4 div.tall h2 { color:#000000; font-size:24px; font-weight:normal; margin:0 0 2px; padding:0;}body.signup4 div.tall h3 { border-bottom:1px solid #CCCCCC; color:#4582B5; font-size:16px; font-weight:bold; margin:0; padding:0 0 4px text-transform:uppercase;} body.signup4 a.hover_target { border-bottom:1px dotted #888888; color:#64503F; margin-left:6px; text-decoration:none;}body.signup4 div.tall li strong, body.signup4 div.short li strong { color:#C33700;}

    JavaScript Todo sobre animales

    37Signals creó una clase personalizada HoverObserver (consulte el fragmento .js) que utiliza la funcionalidad de prototipo.js. Tenga en cuenta que existen otras formas de lograr este mismo efecto.

    5. Menús deslizantes

    La sección de portafolio en Clear Focus Designs contiene un bonito menú en el lado derecho de la página que lo sigue a medida que se desplaza hacia abajo. Este menú deslizante con JQuery y CSS es una forma eficaz de mostrar una larga lista de información y seguir presentando una opción de navegación constante a los visitantes del sitio web.

    Este menú detecta cuando la página se desplaza y la sigue.

    ¿Cómo se hace?

    Esta página utiliza un complemento jQuery llamado scrollFollow que permite que un div específico siga la página mientras el usuario se desplaza por ella. En el ejemplo de Clear Focus Designs, este complemento le indica al menú de la derecha que siga la página.

    HTML

    ul lia href="#copperStone"CopperStone Partnersbr / spanDevelopment/span/a /li lia href="#vmg"Visionary Marketing Groupbr / spanDevelopment/span/a /li ...code repeats for all menu items... /ui

    JavaScript

    $( document ).ready( function (){ $( '#ourWork' ).scrollFollow( { speed: 1000, easing: 'linear' } );});

    6. Autores "marcados"

    Colocar avatares junto a la publicación de un individuo en un hilo de comentarios es una práctica bastante común. UxBooth (nuevamente) ha llevado la marcación de comentarios un paso más allá al permitir que la miniatura de un usuario flote fuera de sus comentarios en el artículo. Esto permite al usuario escanear rápidamente la página y saber quién publicó una respuesta en esa página. UxBooth aborda este método de manera un poco diferente, ya que el artículo está escrito por varios autores diferentes. El uso de este método de "marcado" ayuda al usuario a identificar qué autor contribuyó en qué parte del artículo.

    Uso de 'Banderas' de comentarios de UxBooth para mostrar qué autor escribió el comentario

    ¿Cómo se hace?

    En UxBooth, cada autor tiene su propio div con una clase que lleva el nombre del autor. Por ejemplo, el autor Andrew tiene un div de autor con una clase "autor andrew". La clase "autor" configura el estilo básico que es común entre todos los comentarios de los autores. El div se coloca en el documento utilizando la posición relativa dentro del flujo del documento.

     

    Dentro del div hay una imagen con una clase de "avatar". La clase "avatar" se coloca absolutamente dentro del elemento padre relativamente posicionado (usando la técnica clásica de creación de CSS absoluto y relativo ). A la imagen se le asigna un valor superior de 0, con un valor izquierdo de -54px. Básicamente, esta técnica extrae la imagen de la columna de contenido y la coloca sobre el color/imagen de fondo del contenedor.

    HTML

    divp...The user's comment went here.../ppimg src="https://www.smashingmagazine.com/images/matt.gif" alt="Matthew Kammerer"/p/div

    CSS

    div#ux-booth div#content div.matt.review-quote { border-color:#FF9F26;}div#ux-booth div#content div.review-quote { border-left:6px solid #D8C9A1; margin:0 -21px 0 -24px; padding:0.5em 21px 1.5em 20px; position:relative;} div#ux-booth div#content div.matt.review-quote img.avatar { border-color:#CC7200;}div#ux-booth div#content div.andrew.review-quote img.avatar{ -moz-border-radius-bottomleft:9px; -moz-border-radius-topleft:9px; background:#888888 none repeat scroll 0 0; border:4px solid #4B6500; left:-54px; position:absolute; top:0;}

    7. Diseños de página de archivo

    Warpspire utiliza un enfoque diferente cuando se trata del diseño de su página de archivo. En lugar de una lista larga, han optado por utilizar un enfoque de columnas debajo de cada mes en el archivo.

    ¿Cómo se hace?

    Cada entrada en el archivo contiene una etiqueta h3- y una p- dentro de un elemento listado li. Cada número par liflota hacia la izquierda, cada número impar liflota hacia la derecha. Y eso es todo, tan simple como eso.

    HTML

    div h2February 09/h2/divul li h3...title of archived article.../h3 p...summary and read more link for article.../p /li li h3...title of archived article.../h3 p...summary and read more link for article.../p /li/ul

    CSS

    ul.archives li.odd { clear:both; float:left; padding-right:20px;}ul.archives li { float:right; font-size:11px; list-style-type:none; margin:0 0 20px; padding:0; width:270px;}

    8. Rollovers redondeados transparentes

    Este es un ejemplo de otro diseño de archivo, esta vez de Particletree, que utiliza png transparentes como fondos de desplazamiento del título del artículo.

    Rollovers transparentes en ParticleTree

    ¿Cómo se hace?

    El título de cada artículo se coloca dentro de un h3elemento que tiene un ancla ( a) en su interior. La aetiqueta tiene una imagen de fondo .png transparente que cambia background-positional pasar el mouse, así como un color de fondo.

    La imagen .png se coloca en el lado derecho y se encuentra encima de la imagen del árbol. El color de fondo llena el espacio entre los dos, creando la ilusión de una dimensión 3D (el bloque de contenido parece estar frente a la imagen del "árbol"). Cada enlace también utiliza esquinas redondeadas basadas en CSS (usando -moz-border-radius).

     

    HTML

    div h3 The Importance of Design inBusiness citebBy Chris Campbell/b · Comments (strong15/strong) · August 14th/cite /h3/div ...code repeats...

    CSS

    #features .red a:hover { background-position: 498px -30px;}#features .red a:hover{ background-image:url(/images/fadetree.png); background-repeat:no-repeat;}#features[id] h3 a { height:auto; min-height:66px;}#features h3 a { -moz-border-radius-bottomright:30px; -moz-border-radius-topleft:30px; font-size:210%; height:66px; padding:11px 15px 3px 105px;}.red a:hover, a.red:hover { background:#5E2510 none repeat scroll 0 0; color:#FFFFFF;}.red a, .red cite strong { color:#843418;}h3 a { display:block; text-decoration:none;}

    9. Combinando Flash y CSS

    HunterBoot.com ha construido maravillosamente imágenes en blanco y negro en el panel de su página de inicio. Estas imágenes son parte de una película Flash que contiene no sólo las imágenes, sino también agradables efectos de desplazamiento para las listas de enlaces en la parte inferior del diseño. Vea la captura de pantalla a continuación para comprender mejor lo que está sucediendo estructuralmente. Cuando pasa el mouse sobre uno de los enlaces en las cuatro columnas debajo del panel de imagen principal, obtiene un bonito desplazamiento animado en el fondo de esa columna.

    ¿Cómo se hace?

    A primera vista parece que se trata de algún tipo de complemento jQuery o algo similar. Sin embargo, esta es una solución puramente basada en CSS que utiliza elementos Flash para efectos de desplazamiento. Esta técnica comienza con algunas marcas. Hay un div principal que contiene la película Flash (dentro de un div que lo contiene), luego cuatro divs distintos, uno para cada una de las secciones.

    Estos cuatro divs tienen un encabezado y luego una lista desordenada que contiene los enlaces individuales. El div que contiene principal está colocado en relación con su padre. Estas cuatro URL están ubicadas absolutamente dentro del div contenedor principal relativo; esto coloca las URL en la parte superior de la película Flash. Cuando mueve el mouse sobre las cuatro columnas implícitas, esto activa una animación de rollover en la película Flash, porque el mouse en realidad está sobre la película Flash. Dado que los enlaces se encuentran encima del Flash, aún puedes hacer clic en ellos sin efectos secundarios incómodos.

    HTML

    !-- the flash container -- div ...the flash movie is inserted here via SWFObject... ...it's important to note that the .swf's wmode is set to transparent... /div !-- the product category links -- div ul lia href="/product/link/goes/here" Link Text/a/li ...repeat li's for each link /ul /div div ul lia href="/product/link/goes/here" Link Text/a/li ...repeat li's for each link /ul /div div ul lia href="/product/link/goes/here" Link Text/a/li ...repeat li's for each link /ul /div div ul lia href="/product/link/goes/here" Link Text/a/li ...repeat li's for each link /ul /div

    CSS

    .featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; }#featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; }---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul---.homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; }.homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; }.homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; }.homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; }

    10. Gráficos de etiquetas populares

    Ogilvy elige mostrar sus etiquetas populares con un fondo similar a un gráfico (desplácese hasta el final para ver las "5 etiquetas principales").

     

    ¿Cómo se hace?

    La lista de etiquetas es una lista simple y desordenada; cada elemento de la lista tiene un estilo en línea con un ancho codificado (no es realmente una buena solución de codificación). Parece que esto proviene de un cálculo del lado del servidor y se genera en línea en el elemento. Oglivy usa PHP, pero esto se puede hacer en prácticamente cualquier lenguaje del lado del servidor, o incluso se puede hacer con JavaScript si es necesario. Cada uno de los li tiene su propio color de fondo y, debido a que todos tienen diferentes anchos, esto da la apariencia de un gráfico.

    HTML

    ol li a href=""work/a /li li a href=""philosophy/a /li li a href=""agency/a /li li a href=""culture/a /li li a href=""maslow/a /li/ol

    CSS

    #top5 li a.tag { padding: 1px 5px; margin-bottom: 2px; color: #fff; text-transform: uppercase; font-weight: normal;}#top5 li a.tag:hover { background: #000; }.tag_1 { background: #c12; }.tag_2 { background: #990000; }.tag_3 { background: #ee6666; }.tag_4 { background: #ee2222; }.tag_5 { background: #cc6666; }

    ¿Qué soluciones de codificación deberíamos cubrir a continuación?

    ¡No dude en sugerir técnicas interesantes, inusuales, creativas y avanzadas en los comentarios de esta publicación! ¡Haremos todo lo posible para verlos más de cerca y explicarlos en detalle en una de nuestras próximas publicaciones!

    Artículos Relacionados

    Quizás te interesen los siguientes posts relacionados:

    • 5 soluciones de codificación útiles para diseñadores y desarrolladores
    • 7 principios de código CSS limpio y optimizado
    • 8 formas sencillas de mejorar la tipografía en sus diseños CSS
    • Diseño fijo, fluido o elástico: ¿cuál es el adecuado para usted?

    Explora más en

    • Codificación
    • CSS
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. 5 soluciones de codificación útiles para diseñadores y desarrolladores
    2. Encuentre la solución JavaScript adecuada con una prueba de 7 pasos
    3. Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

    Diez soluciones útiles de codificación CSS/JS para desarrolladores web

    Diez soluciones útiles de codificación CSS/JS para desarrolladores web

    SmashingConf Friburgo 2024 Listas de verificación de diseño de interfaz inteligente Índice 1. Imágenes

    programar

    es

    https://aprendeprogramando.es/static/images/programar-diez-soluciones-utiles-de-codificacion-cssjs-para-desarrolladores-web-762-0.jpg

    2024-05-20

     

    Diez soluciones útiles de codificación CSS/JS para desarrolladores web
    Diez soluciones útiles de codificación CSS/JS para desarrolladores web

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20