Il metodo
Memorizzazione dei dati
- Presenta l'immagine taggable all'utente.
- Cattura i clic del mouse sull'immagine e memorizza le coordinate relative all'immagine in cui l'utente fa clic.
- Una volta cliccato, puoi presentare all'utente un modulo di tipo pop-up / modale in cui possono selezionare uno dei prodotti da un elenco di ricerca e inserire qualsiasi altra informazione che desideri salvare con il tag.
- Quando salvano il tag, memorizzano le coordinate x / y e le informazioni pertinenti nel tuo database.
Recupero dei dati
- La prossima volta che l'immagine viene caricata, carica tutti i tag con essa.
- Per ogni tag, visualizza un
<div> sopra l'immagine con le coordinate che hai salvato.
- Visualizza un suggerimento o una notifica quando l'utente fa clic su un tag. Questo potrebbe includere un link al suddetto prodotto.
La tecnologia
Il numero di diverse configurazioni di tecnologia con cui potresti creare questo progetto è enorme. Prima di stabilirti su una singola tecnologia, dovresti fare qualche ricerca su tutti loro.
Il front-end
HTML e CSS
Puoi facilmente rendere l'intero programma in HTML e CSS. Potresti trovare utile utilizzare una libreria di template JavaScript come Handlebars o Underscore .js e / o un framework del preprocessore CSS come LESS o SASS .
JavaScript
Ci sono molti differenti framework / librerie JavaScript ( jQuery , Backbone e Underscore.js , Ember.js , YUI , ecc.). Quale da usare è una domanda abbastanza grande di per sé e dipende dalle altre cose che stai cercando di ottenere con il progetto. jQuery è una delle librerie più utilizzate e dovrebbe essere in grado di realizzare la maggior parte delle cose che stai cercando di fare. Dovresti ricercarli tutti in modo che tu capisca cosa stai iniziando.
Per memorizzare i dati, effettuerai una chiamata AJAX per passare le informazioni a un programma sul server.
Se vuoi inviare automaticamente tag ad altre persone che visualizzano la stessa immagine, puoi guardare usando qualcosa come Cometa . Dovrebbero esserci plugin o supporto Comet di base per la maggior parte o tutte quelle librerie.
HTML 5
HTML5 potrebbe facilmente gestirlo, dal momento che si tratta di una versione più recente di tecnologie meno recenti che erano già in grado di fare questa impresa (incluso JavaScript). È un po 'eccessivo usare l'intero sistema in HTML5 rigoroso a questo punto, e probabilmente eliminerai i vecchi browser dall'essere in grado di utilizzare il sito, ma è comunque un'opzione. Dovresti assolutamente cercare HTML5 prima di progettare il progetto in modo da poterlo rifattorizzare facilmente se decidi di farlo in futuro.
Il back-end
database
Avrai bisogno di un database di qualche tipo per memorizzare la tua lista. Se non ne hai già uno, consulta PostgreSQL o MySQL . C'è anche il database Oracle e Microsoft SQL Server per valutare se lo stai facendo professionalmente per un cliente che può permettersi licenze extra e costi di hosting.
Codice lato server
È necessario un componente lato server dell'applicazione per estrarre i dati dal server e inviarli al client front-end. Per questo hai diverse opzioni, tra cui ASP.NET, Ruby, Python, Java, JavaScript lato server, PHP e altro.
Altre domande?
Per una guida più specifica con qualsiasi parte di questa applicazione, dovresti probabilmente pubblicare le tue domande su Stack Overflow .