Gioco del browser ASSA ABLOY

Gioco per browser

Il browser game ASSA ABLOY è stato creato nell'ambito della Coppa del Mondo di Calcio. Il nostro team è orgoglioso di aver realizzato questo progetto e potete giocarci voi stessi! Non preoccupatevi, in questa versione non vengono raccolti dati e non viene inviata alcuna newsletter.

In questo gioco, il portiere sei tu! Trascinate i chiudiporta su una delle tre porte per far partire un tiro e vedere se avete „tenuto“ la palla!

Realizzazione

Il gioco è stato realizzato senza l'uso di Flash, ma esclusivamente con le possibilità offerte da HTML5, CSS3 e JavaScript. Dopo una bozza del progetto e del gioco, sono stati selezionati i suoni adatti a supportare il gameplay. Le animazioni sono volutamente mantenute semplici e gli unici effetti che il gioco si concede sono gli „Yeah“ e gli „Oooh“ per i rispettivi colpi o le palle trattenute. La mancanza di effetti è stata fatta a favore di un movimento della palla veramente casuale e fisicamente almeno comprensibile.

Caratteristiche

Oltre alla realizzazione del gioco vero e proprio, è stato integrato un sistema di newsletter con il quale i partecipanti possono partecipare all'estrazione di premi. Il sistema di newsletter memorizza le palline possedute (che, per inciso, non hanno alcuna influenza sull'estrazione dei premi) e poi invia i dati via e-mail al server del cliente. Il sistema di newsletter appare alla fine del gioco e può essere visualizzato e testato nella nostra demo incorporata qui, ma non invia alcuna e-mail.

Grazie mille per la piacevole e professionale collaborazione. Non solo noi, ma anche il cliente è molto soddisfatto del risultato. Non solo siamo stati supportati nella realizzazione, ma avete anche dato ottimi suggerimenti con le vostre conoscenze specialistiche. Un'altra stella per la grande disponibilità e la rapida attuazione delle modifiche.

Sarah Danielle Hein

Le persone per la comunicazione

Soluzione jQuery Mobile Slidecast

da Apalion_press

Questo progetto è un'applicazione web (WebApp) che consente di mettere a disposizione di un gran numero di interessati, contemporaneamente, presentazioni con grafica, audio, video e persino elementi HTML. Segue quindi il principio di un'applicazione slidecast distribuibile.

Definizione di WebApp

Il termine deriva dall'inglese e si riferisce a un'app (applicazione), cioè ad applicazioni per dispositivi mobili che di solito possono essere scaricate direttamente da Internet tramite un browser integrato nel sistema operativo e utilizzate senza installazione.

In linea di massima, si tratta di siti web ottimizzati per i display degli smartphone che cercano di replicare il „look and feel“ delle applicazioni native.

Sviluppo di applicazioni web

Applicazione mobile jQuery aperta su tablet Samsung

Applicazione mobile jQuery aperta su smartphone Samsung

Perché WebApp e jQuery Mobile?

Molti utenti sono diventati molto cauti a causa della potenziale presenza di malware negli app store. Le WepApp supportano l'utente in modo tale che non è necessaria alcuna installazione e l'applicazione non ha accesso al software e all'hardware dello smartphone. In linea di principio, questi tipi di applicazioni sono anche più sicuri contro la pirateria. Poiché l'applicazione si trova sul server e genera contenuti in modo dinamico, non può essere semplicemente copiata ed eventualmente utilizzata per attività fraudolente. Con le applicazioni native, i dati personali potrebbero essere inviati in background all'insaputa dell'utente. Un altro vantaggio è che l'applicazione può essere richiamata da tutti i dispositivi con accesso a Internet e, ad esempio, è possibile accedere ai dati memorizzati. Per fare un esempio, i giochi possono essere avviati su uno smartphone e poi semplicemente giocati su un computer senza dover scambiare dati complicati tra questi dispositivi. Vengono utilizzate tecnologie note e collaudate, che garantiscono un elevato livello di sicurezza futura.

jQuery Mobile è un framework web ottimizzato per il touch per smartphone e tablet. Offre numerose opzioni di supporto per il riconoscimento di tocchi, gesti e altro. Sono supportati numerosi browser e se ne possono aggiungere altri se si hanno sufficienti capacità di programmazione.

Perché implementare qualcosa di nuovo? Esistono già molti modi per distribuire le presentazioni.

Naturalmente esistono già diverse opzioni, come la semplice distribuzione di documenti di presentazione via e-mail, la generazione di PDF o l'utilizzo di piattaforme come www.slideshare.net da utilizzare. I vantaggi di questo nuovo approccio sono i seguenti:

Grafica e audio separati, nessun video!

Spesso, durante le conferenze, le presentazioni vengono registrate e rese disponibili sul web sotto forma di video. Questo comporta naturalmente un grande volume di dati. Inoltre, per guardare il video sono quasi sempre necessari plug-in aggiuntivi come Adobe Flash Player. Gli smartphone di solito non supportano questi plug-in e, se lo fanno, la batteria si scarica in pochissimo tempo. A volte non è possibile accedere alla rete WLAN quando si è in viaggio. I video finiti hanno solitamente dimensioni di diverse centinaia di megabyte. Questo naturalmente mette a dura prova la rete mobile e può comportare tempi di caricamento molto lunghi.

Non è necessario caricare i file audio!

A meno che non si disponga di una tariffa internet flat, il volume dei dati mobili costa molto, quindi si vuole poter scegliere quali contenuti caricare. Anche il ritorno alla visualizzazione puramente testuale può ridurre significativamente il volume trasferito.

Nessuna installazione, nessun software aggiuntivo

Può essere riprodotto direttamente in quasi tutti i browser

Presentazione facilmente definibile come markup HTML in un file

Per creare le presentazioni non è necessario alcun programma aggiuntivo. È stato previsto un editor online che supporta anche il linguaggio HTML. Per gli utenti più esperti non dovrebbe essere un problema creare presentazioni.

Comunicazione attraverso i commenti

Implementando una funzione di commento, è possibile allegare commenti a singole diapositive, all'intera presentazione o anche a dichiarazioni (punti nel tempo). In questo modo gli utenti possono discutere e porre domande su affermazioni specifiche.

Sfruttare la potenza del web

Poiché si tratta di un'applicazione web e il codice è stato strutturato di conseguenza, è possibile utilizzare quasi tutte le funzionalità del web (video, social media - pulsante „mi piace“, ...).

Senza barriere (screen reader)

L'accessibilità può essere ottenuta anche con uno screen reader e le persone con problemi di udito o di vista, ad esempio, possono utilizzare questa forma di presentazione.

È possibile acquistare o concedere in licenza questa soluzione?

Ma naturalmente è possibile! Siamo anche in grado di rispondere in modo flessibile ai vostri desideri e di modificare o ampliare l'applicazione in base alle vostre specifiche. Contattateci semplicemente Contattateci.

Designer di magliette Shopware

da Apalion_press

Sviluppo di shopware

Shopware T-Shirt Designer, aperto su un Microsoft Surface

Per il software del negozio „Shopware 4“ (https://www.shopware.de/), è stato sviluppato un designer di poster che consente di caricare qualsiasi motivo o di utilizzare una galleria esistente.

Per un motivo selezionato sono disponibili ulteriori funzioni, come „Seleziona sezione“, „Bianco/nero“ o „Ruota“. È stata inoltre concepita - ma non implementata - la funzione „Aggiungi testo“, con la quale il cliente può determinare il carattere, il colore e la posizione del testo.

Il vantaggio di questa soluzione era che non si trattava di una tecnologia plug-in, ma tutto era implementato utilizzando le tecnologie web. Oltre all'HTML5, sono stati integrati anche meccanismi di fallback e Flash è stato utilizzato solo in casi di emergenza.

La soluzione è stata integrata nel software esistente, il che ha richiesto un intervento approfondito. Questo intervento è stato reso possibile con l'aiuto di database o script aggiuntivi. Le nuove opzioni sono quindi disponibili per un potenziale acquirente nella vista dettagliata di un prodotto.

Sviluppo di moduli e interfacce personalizzate

da Apalion_press

Interfacce di sviluppo

Immagine simbolo di sviluppo dell'interfaccia con puzzle su Macbook

In qualità di subappaltatore di una società di software di successo, abbiamo realizzato un importante progetto della durata di diversi mesi. Si trattava della creazione personalizzata di un'interfaccia per un sistema proprietario di gestione della merce per Joomla/Virtuemart. Gli ostacoli tecnici da superare erano numerosi: Come verranno recuperati i dati? Come devono essere visualizzati i dati? Qui di seguito forniamo una breve panoramica del progetto e del nostro approccio.

Definizione del problema

Il problema era il seguente: Il cliente fornisce un sistema proprietario di gestione della merce che ha un database di enormi dimensioni in background. Il sistema viene continuamente mantenuto e modificato. I record di dati memorizzati vengono utilizzati, ad esempio, per generare cataloghi o fornire informazioni ai clienti. Il sistema dispone di diverse interfacce, tra cui query standardizzate tramite MySQL. Questo è stato il nostro punto di partenza: il cliente voleva che il catalogo fosse caricato dinamicamente in un catalogo basato sul web senza ulteriori interventi esterni, che fosse ricercabile e che generasse un URL e un codice QR sempre validi per ogni articolo e che fosse possibile restringere il campo di ricerca utilizzando numerose proprietà di filtri e barre di ricerca. La soluzione doveva essere progettata in modo modulare per l'uso in Joomla e successivamente per Typo3 e anche come integrazione completa in un sistema di negozi.

Approccio

In primo luogo, abbiamo chiesto al cliente di illustrare il problema in dettaglio e abbiamo definito insieme a lui le tappe fondamentali. Queste tappe sono state utilizzate per creare una stima dei costi, che è stata poi incorporata in tutti i sistemi coinvolti. Sulla base di questa familiarizzazione è stato poi creato un prototipo che aveva lo scopo di dimostrare e garantire la funzionalità di base del sistema. Il prototipo è stato pronto per l'uso dopo un solo giorno lavorativo.

Dopo l'ideazione e l'elaborazione dell'interfaccia, è seguita la ricerca di soluzioni funzionali per il sistema di gestione dei contenuti. „Joomla“, su cui abbiamo potuto basare la nostra soluzione. Abbiamo trovato rapidamente „VirtueMart“ una piattaforma popolare e promettente, la cui tecnologia abbiamo potuto utilizzare ed espandere gradualmente.

Abbiamo dovuto creare due connessioni dirette e scrivere un traduttore: Da un lato, la struttura proprietaria del sistema di gestione merci del cliente viene letta, tradotta e standardizzata dal nostro sistema e riproposta dall'altro lato o letta in VirtueMart. Questo modulo, con le sue migliaia di righe di codice distribuite in un'architettura ben strutturata in PHP, è assolutamente unico.

Oltre a questo traduttore, sono state necessarie diverse modifiche alla visualizzazione. In questo caso, abbiamo approssimato il più possibile le funzionalità desiderate con moduli già disponibili, al fine di ridurre al minimo i costi per il cliente. Questi moduli sono stati ulteriormente personalizzati da noi, ad esempio gli URL del front-end sono stati resi „parlanti“ - ed è ora possibile rivolgersi sia ai prodotti che a qualsiasi livello di struttura dei prodotti, cosa che non era possibile senza ulteriori interventi. In particolare, grazie alla nostra personalizzazione è ora possibile assegnare un numero qualsiasi di categorie e livelli di struttura, poiché il database viene suddiviso dinamicamente nei suoi componenti. L'implementazione è stata completamente svincolata da Virtuemart e dal design, cioè in parole povere: si può prendere qualsiasi Joomla con Virtuemart e „lasciare andare“ la nostra estensione e Virtuemart viene quindi alimentato e modificato con i dati del WWS. Questo rende la soluzione altamente portatile! È già stata pianificata e preparata anche un'implementazione in Typo3.

Caratteristiche speciali e Funzioni speciali

Quando le immagini dei prodotti sono disponibili nel database, il cliente voleva che le immagini fossero importate automaticamente e assegnate nel front-end. Vengono generate dimensioni diverse per le miniature e per la visualizzazione finale.

Per ogni prodotto è disponibile una funzione che consente di generare un PDF, di „porre una domanda“, di inviare un messaggio di posta elettronica o di condividerlo, ecc. Inoltre, il cliente e l'utente possono ora filtrare i prodotti in modo dinamico e regolare con precisione le proprietà visualizzate per il filtraggio. Il cliente può anche impostare separatamente nel backend per ogni articolo quali proprietà desidera visualizzare, quali informazioni contiene un articolo e quali funzioni sono disponibili per l'utente nella panoramica dell'articolo. Tutto ciò può essere determinato in modo flessibile già a livello di database nel sistema di gestione della merce! Anche i titoli e gli identificativi possono essere modificati dinamicamente sul lato database senza influire sulla generazione del codice QR: Una volta impostati, i link rimangono validi.

È inoltre possibile specificare se si desidera ordinare/filtrare con caselle di controllo, pulsanti di opzione, dropdown, ecc. Il filtraggio funziona in tempo reale, senza ricaricare la pagina. Il filtro si adatta dinamicamente. A tale scopo, è stata completamente adattata e riscritta un'estensione che funziona sia con Ajax che senza Ajax.

L'intera soluzione è predisposta come negozio e, se lo si desidera, è possibile assegnare anche dei prezzi. Inoltre, la connessione al database è stata progettata in modo così dinamico che il cliente può ricaricare il database in qualsiasi momento o anche solo in parte tramite una funzione nel backend, oppure può farlo anche tramite un comando esterno („Cronjob“) possono essere attivati. A questo scopo è stata creata un'ulteriore interfaccia con il mondo esterno ed è stata ampliata l'area backend di Virtuemart.

Google Maps® API

da Apalion_press

Nell'ambito di questo ordine, è stato sviluppato uno script basato sull'API di Google Maps per visualizzare i confini delle aree dei codici postali. A tale scopo sono state combinate l'API di Google Maps, l'API di Google Geolocation e l'API di Google Fusion Tables. Il seguente set di dati, disponibile nel pubblico dominio, è stato utilizzato come set di dati di base per i confini dell'area Set di dati utilizzato. È stato comunque necessario adattarlo e convertirlo.

API di geolocalizzazione di Google

Sezione di ricerca dei codici postali di Google Maps

Aree di codice postale di Google Maps® API su un Macbook

Inoltre, tutti i confini dell'area sono indicati da un marcatore (il codice postale). Questo marcatore può essere selezionato e apre un pop-up che può essere personalizzato con qualsiasi testo. L'immagine di esempio mostra la visualizzazione del codice postale e di un ulteriore testo con un link, che contiene anche il codice postale e può essere utilizzato per altri scopi.

Lo script reagisce ai parametri GET del browser, che determinano il colore e la selezione dei codici postali. Un esempio di chiamata con un solo codice postale si presenta come segue con le impostazioni predefinite: script.php?cerniera=46509&mColore=ff0000. I nomi dei parametri possono essere modificati a seconda delle esigenze.

Poiché l'obiettivo del progetto era quello di poter contrassegnare i codici postali circostanti a un codice postale principale con due colori diversi, sono stati introdotti parametri aggiuntivi: script.php?cerniera=46509&mColore=ff0000&rZip=46459,47665&rColore=0000ff&fZip=46487&fColore=00ff00.

Come si può vedere nell'esempio, è possibile inserire anche più codici postali, in questo caso separati da virgole. Anche il separatore può essere modificato a piacere. Lo script accetta quindi 3 diversi tipi di codici postali, ciascuno con un colore, e li visualizza a colori su una mappa di Google Maps.

Il vantaggio dell'implementazione è che lo script può essere integrato in siti web esistenti. Sia come mappa in movimento dinamico che come sezione di immagini. Un possibile scenario applicativo potrebbe essere quello di un negozio che consegna vari prodotti solo in determinate regioni. Lo script potrebbe essere integrato nella descrizione dettagliata dei prodotti e visualizzare le regioni in cui il prodotto può essere consegnato in due colori, per „immediatamente disponibile“ o „attualmente esaurito“. Lo script può anche essere esteso per includere altri colori e tipi di codice postale, in modo da rendere possibile una varietà di altri scenari applicativi.

Gioco del browser ASSA ABLOY

Gioco per browser