Nuevos patrones para apps geniales

Explora una fantástica colección de patrones nuevos para apps increíbles, incluidos patrones de portapapeles, de archivos y de apps.

Independientemente de 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 elementos básicos:

  • Es probable que la app de edición de video le permita al usuario guardar el video editado.
  • Es posible que tu juego permita al usuario compartir el progreso del juego con amigos.
  • Es muy probable que una app de redes sociales en línea le permita al usuario pegar imágenes en una publicación.

No hay una forma universal de realizar estos patrones.

Estos son solo algunos ejemplos de esos patrones, y hay muchos más. Pero todos estos métodos tienen algo en común: no hay una forma universal de realizarlos.

Cómo compartir el progreso

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. ¡Uf! Apenas pude entender esta:

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, de modo que obtengas un FileSystemFileHandle, que te permite implementar un verdadero flujo de guardar, editar y guardar. La mejor opción es recurrir a un <a download> clásico, que también permite que el usuario guarde datos, pero tiene el inconveniente de crear archivos nuevos en cada descarga, por lo que termina con my-video.mp4, my-video (1).mp4, my-video (2).mp4, etc.

Cómo pegar imágenes

Para concluir los ejemplos introductorios, no todos los navegadores admiten pegar imágenes en una app web, por lo que puedes recurrir al uso de 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 patrones nuevos

Una vez que hayas hecho esto, las nuevas secciones de patrones son las siguientes:

Patrones de portapapeles

Patrones de portapapeles para todo lo relacionado con el portapapeles del sistema, como la copia y el pegado de todo tipo de elementos.

Patrones de archivos

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

Patrones de apps web

Patrones de apps web para todo lo relacionado con las funciones avanzadas de las apps, como proporcionar combinaciones de teclas, sincronizar datos periódicamente en segundo plano, mostrar insignias de apps y mucho más.

Comentarios

Espero que estos patrones te ayuden a crear apps increíbles. Espero tus comentarios. Puedes enviar comentarios a través de un tweet a @ChromiumDev o registrar un problema. En ambos casos, etiqueta a @tomayac para asegurarte de que lo vea.

Agradecimientos

Gracias a Joe Medley por su ayuda con la revisión y edición de los patrones. Gracias a Pete LePage, Ewa Gasperowicz, Rachel Andrew, Ken Pascal y Matthias Rohmer por toda su asistencia técnica y organizativa, y por su apoyo para que este proyecto se llevara a cabo. El proyecto de patrones completo no habría sido posible sin la ayuda de los autores de los patrones individuales, a saber, Harry Theodoulou, Tony Conway, Palances Liao, Cecilia Cong, François Beaufort y Joe Medley.