Jeu par navigateur ASSA ABLOY

Jeu par navigateur

Le jeu par navigateur ASSA ABLOY a été créé dans le cadre de la Coupe du monde de football . Notre équipe est fière d'avoir réalisé ce projet et vous pouvez y jouer vous-même ici ! Ne vous inquiétez pas, aucune donnée n'est collectée dans cette version et aucune newsletter n'est envoyée.

Dans ce jeu, vous êtes le gardien de but ! Faites glisser le ferme-porte sur l'une des trois portes pour déclencher un tir et voir si vous avez „gardé“ le ballon !

Mise en œuvre

Le jeu a été réalisé sans utiliser Flash, mais uniquement avec les possibilités offertes par HTML5, CSS3 et JavaScript. Après une ébauche du design du jeu et du jeu, des sons appropriés ont été choisis pour soutenir le déroulement du jeu. Les animations sont volontairement simples et les seuls effets que le jeu s'offre sont les „ouais“ et les „oooh“ lors des tirs ou des balles arrêtées. L'absence d'effets a été privilégiée au profit d'un mouvement de balle vraiment aléatoire et pour le moins compréhensible d'un point de vue physique.

Caractéristiques

Outre la mise en œuvre du jeu proprement dit, un système de newsletter a été intégré pour permettre aux participants de prendre part à un tirage au sort. Le système de newsletter mémorise les balles détenues (qui n'ont d'ailleurs aucune influence sur le tirage au sort) et envoie ensuite les données par e-mail au serveur du client. Le système de newsletter apparaît à la fin du jeu et peut également être consulté et testé dans notre démo intégrée ici, mais il n'envoie pas de mails.

Nous vous remercions vivement pour votre collaboration agréable et professionnelle. Nous ne sommes pas les seuls à être très satisfaits du résultat, le client l'est aussi. Nous avons non seulement été soutenus lors de la mise en œuvre, mais nous avons également reçu de superbes suggestions grâce à votre expertise. Une autre étoile est attribuée pour la grande disponibilité et la mise en œuvre rapide des modifications.

Sarah Danielle Hein

LesPourCommunication

Slidecast jQuery Mobile Solution

par Apalion_press

Ce projet est une application web (WebApp) qui permet de mettre simultanément à la disposition d'un grand nombre de personnes intéressées des présentations combinant graphiques, audio, vidéo et même des éléments HTML. Elle suit ainsi le principe d'une application de diffusion de diapositives distribuable.

Définition des WebApps

Le terme est composé de l'anglais et désigne une app(lication), c'est-à-dire des applications pour terminaux mobiles qui peuvent être téléchargées directement depuis Internet via un navigateur intégré au système d'exploitation et utilisées sans installation.

Il s'agit donc en principe de pages web optimisées pour les écrans de smartphones, qui tentent de reproduire le „look&feel“ des applications natives.

Développement de WebApps

Application jQuery Mobile ouverte sur tablette Samsung

Application jQuery Mobile ouverte sur smartphone Samsung

Pourquoi les WebApps et jQuery Mobile ?

De nombreux utilisateurs sont devenus très prudents en raison de la présence potentielle de logiciels malveillants dans les App Stores. Les WepApps assistent l'utilisateur de telle sorte qu'aucune installation n'est nécessaire et que l'application n'a pas non plus accès au logiciel et au matériel du smartphone. En principe, ce type d'application est également plus sûr contre les pirates. Comme l'application se trouve sur le serveur et génère des contenus de manière dynamique, elle ne peut pas être facilement copiée et éventuellement utilisée pour des actions frauduleuses. Avec les applications natives, les données personnelles pourraient être transmises en arrière-plan à l'insu de l'utilisateur. Un autre avantage est que l'application peut être consultée à partir de tous les appareils disposant d'un accès à Internet et qu'il est possible d'accéder par exemple aux données enregistrées. Pour donner un exemple, les jeux pourraient être commencés sur le smartphone et se poursuivre simplement sur l'ordinateur, sans échange compliqué de données entre ces appareils. On a recours à des technologies connues et éprouvées, ce qui garantit une grande sécurité pour l'avenir.

jQuery Mobile est un cadre web tactile optimisé pour les smartphones et les tablettes. Il offre de nombreuses possibilités d'assistance pour la reconnaissance du toucher, des gestes et autres. De nombreux navigateurs sont pris en charge, mais il est possible d'en ajouter d'autres si l'on dispose de connaissances suffisantes en programmation.

Pourquoi une nouvelle mise en œuvre ? Il existe déjà de nombreuses possibilités de distribuer des présentations.

Bien sûr, il existe déjà différentes possibilités, comme par exemple distribuer facilement des documents de présentation par e-mail, générer des PDF ou utiliser des plateformes telles que www.slideshare.net d'utiliser le système. Les avantages de cette nouvelle approche sont notamment les suivants :

Graphiques et audio séparés, pas de vidéo !

Lors des conférences, il arrive souvent que les présentations soient enregistrées et mises à disposition sur le web sous forme de vidéo. Cela représente bien entendu un volume de données important. De plus, pour visionner la vidéo, il faut presque toujours des plug-ins supplémentaires, comme par exemple Adobe Flash Player. La plupart du temps, les smartphones ne prennent pas en charge ces plug-ins, et si c'est le cas, la batterie se vide en peu de temps. En outre, il n'y a parfois pas d'accès WLAN en route. Les vidéos finies pèsent généralement plusieurs centaines de mégaoctets. Cela sollicite bien sûr énormément le réseau mobile et peut entraîner des temps de chargement très longs.

Les fichiers audio n'ont pas besoin d'être chargés !

Si l'on ne dispose pas d'un forfait Internet, le volume de données mobiles coûte cher, de sorte que l'on aimerait avoir le choix des contenus à charger. Le retour à un affichage purement textuel permet ici aussi de réduire considérablement le volume transmis.

Pas d'installation, pas de logiciel supplémentaire

Lecture directe dans presque tous les navigateurs

Présentation facile à définir comme balisage HTML dans un fichier

Aucun programme supplémentaire n'est nécessaire pour créer les présentations. Il était prévu ici d'utiliser un éditeur en ligne qui assiste également les profanes en HTML. Les personnes plus expérimentées dans ce domaine ne devraient pas avoir de problème à créer des présentations.

Communication par commentaires

L'implémentation d'une fonction de commentaire permet d'attacher des commentaires à des diapositives individuelles, à l'ensemble de la présentation ou à des déclarations (moments). Cela permet aux utilisateurs de mener des discussions et de poser des questions sur des déclarations concrètes.

La puissance du web à portée de main

Le fait qu'il s'agisse d'une application web et que le code ait été structuré en conséquence permet d'utiliser presque toutes les propriétés du web (vidéos, médias sociaux - bouton „j'aime“, ...).

Accessible aux personnes handicapées (lecteur d'écran)

Grâce à un lecteur d'écran, il est également possible d'obtenir une accessibilité et, par exemple, les personnes malentendantes ou malvoyantes peuvent utiliser cette forme de présentation.

Est-il possible d'acheter cette solution ou d'en obtenir une licence ?

Mais vous pouvez certainement le faire ! Nous sommes également en mesure de répondre de manière flexible à vos souhaits et de modifier ou d'étendre l'application selon vos indications. Pour cela, il vous suffit de prendre contact avec nous. Contact.

Concepteur de t-shirts Shopware

par Apalion_press

Développement Shopware

Shopware T-Shirt Designer, ouvert sur une Microsoft Surface

Pour le logiciel de boutique „Shopware 4“ (https://www.shopware.de/), un créateur d'affiches a été développé, qui permet de télécharger les motifs de son choix ou d'utiliser une galerie existante.

D'autres fonctions sont disponibles pour un motif sélectionné, par exemple „choisir un cadrage“, „noir/blanc“ ou „faire pivoter“. Une fonction „Ajouter du texte“ a également été conçue - mais pas mise en œuvre - pour permettre à un client de définir la police, la couleur et la position du texte.

L'avantage de cette solution était qu'il ne s'agissait pas d'une technologie de plug-in, mais que tout était mis en œuvre avec des technologies web. En plus du HTML5, des mécanismes de repli ont été intégrés et on n'a eu recours à Flash qu'en cas d'urgence.

La solution a été intégrée dans le logiciel existant, ce qui a nécessité une intervention en profondeur. Cette intervention a été rendue possible à l'aide de bases de données ou de scripts supplémentaires. Ainsi, un acheteur potentiel dispose des nouvelles options dans la vue détaillée d'un produit.

Développement de modules et d'interfaces personnalisés

par Apalion_press

Développement d'interfaces

Développement de l'interface Image symbole avec puzzle sur Macbook

Nous avons réalisé un grand projet de plusieurs mois en sous-traitance pour une entreprise de logiciels prospère. Il s'agissait de créer une interface personnalisée d'un système de gestion des marchandises propriétaire pour Joomla/Virtuemart. De nombreux obstacles techniques ont dû être surmontés : Comment les données sont-elles récupérées ? Comment les données doivent-elles être présentées au final ? Nous donnons ici un bref aperçu du projet et de notre approche.

Définition du problème

Le problème se présentait comme suit : Le client met à disposition un système de gestion des marchandises propriétaire qui dispose d'une énorme base de données en arrière-plan. Le système est continuellement mis à jour et modifié. Des catalogues sont par exemple générés à partir des données qui y sont stockées ou des informations sont fournies aux clients. Le système dispose de plusieurs interfaces, dont des requêtes standardisées via MySQL. C'était notre point de départ : le client souhaitait que le catalogue soit chargé dynamiquement dans un catalogue basé sur le web sans aucune intervention extérieure, qu'il soit consultable et qu'une URL toujours valable ainsi qu'un code QR soient générés pour chaque article et qu'ils puissent être limités par de nombreuses propriétés de filtrage et de recherche. La solution devait être conçue de manière modulaire pour une utilisation dans Joomla et, plus tard, dans Typo3, ainsi que pour une intégration complète dans un système de boutique.

Approche

Nous avons d'abord demandé au client de nous expliquer le problème en détail et nous avons fixé des étapes avec lui. À partir de ces étapes, nous avons d'abord établi un devis, puis nous l'avons intégré dans tous les systèmes impliqués. Ensuite, sur la base de cette familiarisation, nous avons créé un prototype qui devait démontrer et garantir la fonctionnalité de base du système. Ce prototype était déjà opérationnel après une journée de travail.

Après la conception et l'élaboration de l'interface, la recherche de solutions fonctionnelles pour le système de gestion de contenu a suivi. „Joomla“, Nous avons pu mettre en place notre solution sur cette base. Nous avons rapidement trouvé un accord avec „VirtueMart“ une plateforme populaire et prometteuse, dont nous avons pu utiliser la technologie et l'étendre progressivement.

Nous avons dû créer directement deux connexions et écrire un traducteur : D'un côté, la structure propriétaire du système de gestion des marchandises du client est lue, traduite et normalisée par notre système, et de l'autre, elle est réémise ou importée dans VirtueMart. Ce module, avec ses milliers de lignes de code réparties sur une architecture bien structurée en PHP, est à lui seul absolument unique.

En plus de ce traducteur, plusieurs adaptations de la présentation ont été nécessaires. Nous avons rapproché autant que possible les fonctionnalités souhaitées des modules déjà disponibles, afin de minimiser les coûts pour le client. Nous avons adapté ces modules de manière plus approfondie, par exemple les URL du front-end ont été conçues de manière „parlante“ - et il est désormais possible de s'adresser aussi bien aux produits qu'à n'importe quel niveau de structure de produit, ce qui n'était pas possible sans autre. Grâce à notre adaptation, il est notamment possible d'attribuer autant de catégories et de niveaux de structure que souhaité, car la base de données est décomposée de manière dynamique en ses éléments. L'implémentation a été conçue de manière totalement indépendante de Virtuemart et du design, ce qui signifie en clair que l'on peut prendre n'importe quel Joomla avec Virtuemart et „lâcher“ notre extension, Virtuemart étant ensuite alimenté et modifié avec les données du WWS. Cela rend la solution hautement portable ! De même, une mise en œuvre dans Typo3 a déjà été prévue et préparée en conséquence.

Particularités et Fonctions spéciales

Lorsque des images de produits sont disponibles dans la base de données, le client souhaitait que les images soient automatiquement importées et associées au frontend. Différentes tailles sont générées pour les vignettes et pour l'affichage final.

Pour chaque produit, le front-end propose une fonction pour générer un PDF, „Ask a question“, envoyer/partager, etc. En outre, le client et l'utilisateur peuvent désormais filtrer les produits de manière dynamique et définir précisément les propriétés à afficher pour le filtrage. De même, le client peut définir séparément pour chaque article les propriétés qu'il souhaite afficher, les informations contenues dans un article et les fonctions disponibles pour l'utilisateur dans l'aperçu des articles. Cela peut déjà être déterminé de manière flexible du côté de la base de données dans le système de gestion des marchandises ! Les titres et les identificateurs peuvent être modifiés de manière dynamique dans la base de données, sans que la génération du code QR en soit affectée : Une fois définis, les liens restent valables.

Il est également possible de déterminer si l'on souhaite trier/filtrer avec des cases à cocher, des boutons radio, des listes déroulantes, etc. Le filtrage fonctionne en temps réel sans rechargement de la page. Le filtrage s'adapte de manière dynamique. Pour cela, une extension a été entièrement adaptée et réécrite afin de pouvoir fonctionner avec ou sans Ajax.

L'ensemble de la solution est préparée comme une boutique et peut également être dotée de prix si cela est souhaité. En outre, la connexion à la base de données a été conçue de manière dynamique, de sorte que le client peut à tout moment ou partiellement relire la base de données via une fonction dans le backend, ou encore le faire via une commande extérieure („Cronjob“) peut être déclenchée. Pour ce faire, une autre interface a été créée vers l'extérieur et le domaine backend de Virtuemart a été étendu.

Google Maps® API

par Apalion_press

Dans le cadre de cette commande, un script a été développé, qui s'appuie sur l'API Google Maps pour afficher les limites des zones de codes postaux. Pour ce faire, l'API Google Maps, l'API Google Geolocation et l'API Google Fusion Tables ont été combinées. Le jeu de données de base suivant, disponible dans le domaine public, a été utilisé pour les limites territoriales. Ensemble de données a été utilisé. Celui-ci devait encore être adapté et converti.

API de géolocalisation de Google

Google Maps® Recherche par code postal Extrait

Google Maps® API Zones de code postal sur un Macbook

De plus, toutes les limites territoriales sont signalées par un marqueur (le code postal). Ce marqueur est également sélectionnable, ce qui ouvre une fenêtre pop-up qui peut être complétée par le texte de votre choix. Dans l'image d'exemple, on peut voir que le code postal est affiché, ainsi qu'un autre texte avec un lien qui contient également le code postal, de sorte que celui-ci pourrait être utilisé à d'autres fins.

Le script réagit aux paramètres GET du navigateur, qui déterminent la couleur et la sélection des codes postaux. Un exemple d'appel avec un seul code postal se présenterait comme suit avec les paramètres par défaut : ?script.php ?zip=46509&mColor=ff0000. Les noms des paramètres peuvent être modifiés à volonté.

Comme l'objectif du projet était de pouvoir marquer les codes postaux environnants d'un code postal principal avec deux couleurs différentes, d'autres paramètres sont également disponibles : script.php ?zip=46509&mColor=ff0000&rZip=46459,47665&rColor=0000ff&fZip=46487&fColor=00ff00.

Comme on peut le voir dans l'exemple, il est possible d'indiquer plusieurs codes postaux, séparés dans ce cas par une virgule. Le séparateur peut également être modifié à volonté. Le script accepte donc 3 types de codes postaux différents, chacun avec une couleur, et les affiche en couleur sur une carte Google Maps.

L'avantage de l'implémentation est que le script peut être intégré dans des pages web existantes. Soit comme une carte dynamiquement mobile, soit comme un extrait d'image. Un scénario d'utilisation possible pourrait être une boutique qui ne livre différents produits que dans certaines régions. Le script pourrait être intégré dans la description détaillée des produits et afficher les régions dans lesquelles le produit peut être livré en deux couleurs, pour „disponible immédiatement“ ou „actuellement épuisé“. Le script peut également être étendu à d'autres couleurs et types de codes postaux, ce qui permet d'envisager une multitude d'autres scénarios d'utilisation.

Jeu par navigateur ASSA ABLOY

Jeu par navigateur