Nuevos patrones para apps geniales

Sumérgete en una fantástica colección de nuevos patrones para apps asombrosas, que incluyen patrones del portapapeles, de archivos y de apps.

Sin importar lo que crees, ya sea una app de edición de video de nueva generación, un juego de palabras adictivo o una futura app de redes sociales en línea, siempre necesitarás algunos componentes básicos:

  • La app de edición de video probablemente permitirá que el usuario guarde el video editado.
  • Es posible que el juego permita que el usuario comparta el progreso del juego con amigos.
  • Es muy probable que una app de red social en línea permita que el usuario pegue imágenes en una publicación.

No existe una forma universal de aplicar estos patrones

Estos fueron solo algunos ejemplos de tales patrones, y hay muchos más. Pero todos tienen algo en común: no hay una manera universal de materializarlas.

Progreso del uso compartido

Por ejemplo, no todos los navegadores implementan la API de Web Share, por lo que en algunos casos deberás recurrir a un enfoque diferente, como los intents web de Twitter, o copiar en el portapapeles, que es el enfoque que se elige en Wordle cuando no se implementa la API de Web Share. Apenas conseguimos este:

Wordle 471 6/6

⬛⬛⬛⬛🟨
🟩⬛⬛⬛🟨
🟩🟩🟩⬛⬛
🟩🟩🟩⬛⬛
🟩🟩🟩🟩⬛
🟩🟩🟩🟩🟩

Cómo guardar archivos

Cuando se trata de guardar, el enfoque principal es usar la API de Acceso al sistema de archivos, lo que genera un FileSystemFileHandle, que te permite implementar un verdadero flujo de guardado, edición y guardado. La mejor opción es recurrir a una <a download> clásica, que también le permite al usuario guardar datos, pero tiene la desventaja de crear archivos nuevos en cada descarga, de modo que terminan con my-video.mp4, my-video (1).mp4, my-video (2).mp4, etcétera.

Pegando imágenes

Para concluir los ejemplos introductorios, no todos los navegadores admiten la acción de pegar imágenes en una app web, por lo que puedes volver a usar la API de arrastrar y soltar o mostrar un selector de archivos, que no es tan elegante como la API de Async Clipboard, pero al menos funciona.

Los nuevos patrones

Ahora que terminamos con esto, las nuevas secciones de patrones son las siguientes:

Patrones en el portapapeles

Patrones de portapapeles para todo lo relacionado con el portapapeles del sistema, como copiar y pegar todo tipo de elementos.

Patrones de Files

Patrones de archivos para todo lo relacionado con los archivos y directorios, ya sea guardar, abrir, arrastrar y soltar, recibir o compartir.

Patrones de aplicaciones web

Patrones de aplicaciones web para todo lo relacionado con las funciones avanzadas de una app, como proporcionar accesos directos a aplicaciones, sincronizar datos periódicamente en segundo plano, mostrar insignias de las apps y mucho más.

Comentarios

Espero que estos patrones te ayuden a crear apps increíbles. Espero tus comentarios. Para proporcionar comentarios, tuitea a @ChromiumDev o informa un problema. En ambos casos, etiqueta @tomayac para asegurarte de verlo.

Agradecimientos

Agradezco a Joe Medley por su ayuda para revisar y editar los patrones. Gracias a Pete LePage, Ewa Gasperowicz, Rachel Andrew, Ken Pascal y Matthias Rohmer por todo su apoyo técnico y organizacional, además de su ánimo y motivación para conseguirlo. El proyecto de patrones completo no hubiera sido posible sin la ayuda de los autores de los patrones individuales, es decir, Harry Theodoulou, Tony Conway, Palances Liao, Cecilia Cong, François Beaufort y Joe Medley.