Fermer

juin 5, 2019

Défi de code d'interface utilisateur n ° 1 – Battements de cœur –


Avez-vous déjà constaté que les écrans d'interface utilisateur que nous voyons dans les films à succès, la télévision et les jeux sont tellement plus amusants que les interfaces que nous pourrions créer au travail? Voici votre chance de coder quelque chose d'amusant et peut-être même de gagner une carte-cadeau Amazon de 100 $.

 Code Défi n ° 1
À partir d’aujourd’hui, nous avons 4 défis de codage d’interface utilisateur bimensuels rapides pour tester vos compétences et votre capacité à résoudre les problèmes. Vous avez la chance de montrer vos compétences tout en apprenant peut-être un tour ou deux des autres. Il n’existe pas de solution "correcte" pour relever ces défis.

En fin de semaine (mercredi prochain), nous publierons un article sur les meilleures solutions proposées et choisirons notre favori pour le prix. Ce gagnant recevra:

  • La gloire de remporter le prix de notre solution préférée
  • Une carte-cadeau Amazon de 100 $

Nous allons également offrir 2 abonnements Premium et des t-shirts SitePoint très recherchés aux coureurs. Le premier défi a été lancé

Défi n ° 1: créer une animation d'interface utilisateur de fréquence cardiaque ECG / EKG *

 Bio-moniteur dans Luke Cage

Dans le sens des aiguilles d'une montre à partir de: Luke Cage ( ] S01E10 ), Cabane dans les bois ( 2012 ), Oblivion ( 2013 ), et Casino Royale ( 2006 ).

Nous ' Nous avons tous vu ce film, la télévision et les jeux en commun: le moniteur de fréquence cardiaque / électrocardiographe en temps réel. Parfois, c’est un complot dans un drame médical contemporain (par exemple, Grey’s Anatomy, ER, etc.). Le plus souvent, nous le voyons comme une technologie de pointe pour les super-espions d'élite (par exemple, James Bond ou Mission Impossible) ou pour la surveillance biologique dans un futur lointain de marines spatiales de science-fiction (par exemple, Aliens ou Oblivion). Les équipes de conception passent des milliers d’heures à concevoir ces FUI (interfaces utilisateur futures / fantastiques / fictives) pour paraître aussi authentique et crédible que possible. Maintenant c'est à vous.

La tâche

Votre tâche – si vous choisissez de l'accepter – consiste à créer un panneau d'affichage animé ECG / ECG. Vous pouvez utiliser les technologies de votre choix – à condition de pouvoir présenter votre solution sous la forme d'un CodePen .

  • HTML / CSS
  • Canvas
  • SVG
  • WebGL
  • D3
  • Toute autre technologie Web

En règle générale, ces écrans d’UI sont illustrés par un ' mode sombre 'et dominé par au moins une (mais souvent plus) courbes en boucle de gauche à droite traçant une fréquence cardiaque. N'hésitez pas à étendre l'interface utilisateur pour y inclure d'autres éléments intéressants, mais la ligne / s de graphe qui bat est l'élément principal qui nous intéresse.

Dans le CodePen ci-dessous, j'ai ajouté un fichier GIF animé temporaire à un fichier. Guide visuel approximatif, mais inspirez-vous des films, émissions de télévision ou jeux que vous aimez.

Décrochez ce codepen pour commencer

Voir le stylo
Une machine qui fonctionne au ping
de SitePoint ( @SitePoint )
le CodePen .

Points importants à noter…

  1. Les humains sont PAS des machines parfaites – idéalement, il y en a variation organique ou aléatoire de la / des ligne (s) ECG / EKG
  2. Habituellement, la ligne commence bien, mais s’efface au noir avant d’être écrasée.
  3. Pas d’animation, de vidéo ou d’After Effects GIF – nous Nous recherchons une solution de code.
  4. Les solutions devraient être une branche du CodePen ci-dessus (afin que nous puissions garder une trace des solutions). N'hésitez pas à ajouter / modifier / supprimer tout ce que vous voulez de la fourche.

Comment entrer?

Facile. Il suffit de poster un lien vers votre fourche CodePen.io dans les commentaires ci-dessous avec une brève explication de ce que vous avez fait et pourquoi. Si vous avez plus d’une idée, vous pouvez entrer plus d’une fois. Pour plus de simplicité, n'entrez pas plus d'une variante sur la même idée.

Comment choisirez-vous le gagnant?

Nous choisirons le gagnant en fonction de trois critères:

  1. Élégance et efficacité du code: Moins de fichiers, c'est mieux. Moins de personnages c'est mieux. La simplicité et la lisibilité du code sont très appréciées.
  2. Apparence: Plus votre interface utilisateur est "authentique", plus elle est belle
  3. Intuition / inventivité: Ceci est une pure X- facteur de choses que nous n'avons pas pensé. Scriptability, audio, 3D, peu importe…

Il n'y a pas de formule mathématique pure pour choisir le gagnant, donc cela revient à ce sur quoi Kishen, Joel et moi sommes d'accord.

Quand le jugerez-vous?

ouvert aux inscriptions le le mercredi 5 juin à 9h00 (heure locale) et ferme une semaine plus tard ( le mercredi 12 juin à 9h00 (heure locale de PST) ).

Bonne chance.

(* ECG / EKG: Électrocardiographie )




Source link