--- url: 'https://simonerescio.it/2014/07/windows-xp-bookmarks-%e2%98%85' title: Windows XP Bookmarks ★ author: name: Simone Rescio url: 'https://simonerescio.it/chi-sono/' date: '2014-07-23T00:22:19+02:00' modified: '2026-04-21T00:50:14+02:00' type: post summary: 'Un tributo vintage a Windows XP: webapp HTML5 che rivisita il desktop con icone, finestre e menu d''avvio, alimentata dai tuoi segnalibri Chrome. Sviluppata con Backbone.js e CSS table.' categories: - JavaScript tags: - AMD - BackBone - css table - requirejs - segnalibri - windowsxp - xmarks image: 'https://simonerescio.it/wp-content/uploads/2014/07/windowsxp-bookmarks.jpg' published: true --- # Windows XP Bookmarks ★ Ormai è giunto il termine per il supporto a Windows XP, l’[http://windows.microsoft.com/it-it/windows/end-support-help](https://web.archive.org/web/20140408/http://windows.microsoft.com/it-it/windows/end-support-help) Microsoft ha ufficialmente rilasciato l’ultimo update di sicurezza per la piattaforma dichiarandone la sua morte, ed ora che non c’è più…è diventato *vintage*! È stato il sistema più amato (non molto) e odiato (**parecchio**) a livello globale per 12 lunghi anni, un tributo alla sua memoria è un atto dovuto. Questa webapp rivisita l’interfaccia grafica principale di Windows XP come uno showcase HTML5  per segnalibri pubblicati con le estensioni di [http://www.xmarks.com/](https://web.archive.org/web/20180501/http://www.xmarks.com/). - [1. Le icone](#le-icone) - [2. Restrizioni sull’inclusione via iFrame](#restrizioni-sull8217inclusione-via-iframe) - [3. Utilizzo](#utilizzo) - [4. Update 18/08/2022](#update-18082022) ## Le icone Ogni icona può essere selezionata con il trascinamento del mouse e risponde al doppio click sul desktop, al doppio click viene creato un elemento `Program` che consiste di un elemento ‘window’ che mostra il link in un iFrame ed un elemento ‘program-bar’ sottostante per gestire più `Programs`. Le finestre possono essere spostate, ridimensionate, ingrandite, nascoste o chiuse come sul caro vecchio XP. Le immagini delle icone sono le corrispettive favicons dei siti, si ottengono concatenando il link root con il nome file `favicon.ico` per recuperare il file dalla cartella principale, essendo generalmente il punto predefinito per collocare questi file. Sfortunatamente non tutti i siti adottano questa convenzione e l’immagine potrebbe restituire un errore 404. In tal caso una classe specifica sarà apposta all’elemento icona per mostrare un immagine predefinita. ## Restrizioni sull’inclusione via iFrame Ogni bookmark viene preventivamente controllato con uno script PHP che legge l’header della risposta HTTP del sito per verificare se sono applicate restrizioni circa il caricamento dei contenuti via iFrame, se non vengono trovate informazioni l’icona viene renderizzata. Bisogna notare che un sito potrebbe limitare l’inclusione via iFrame ma non bloccando l’operazione, bensì mostrando contenuti alternativi nell’iFrame rispetto alla pagina normale, una strategia adottata da Flickr. I social network più popolari quali Facebook e Twitter, ed anche i siti di social coding, applicano restrizioni sull’inclusione via iFrame ma non è un’opzione escludere tali link. Per questo motivo li ho inclusi nello `startmenu` dove saranno aperti in una nuova finestra del browser diversamente dagli altri link che non vengono mostrati affatto se risulta impossibile mostrarli in una ‘finestra’. Il framework principale è BackBone con requirejs con il pattern AMD, mentre gli stili principalmente usati sono le CSS table (vedi anche [CSS table, struttura base per il layout di una tipica app mobile](https://simonerescio.it/2014/06/css-table-struttura-base-layout-tipica-app-mobile)) per ottenere un comportamento dei vari elementi simile a quello di un sistema operativo come per la barra dei programmi, le finestre e i loro componenti interni. L’unica manipolazione JS sulle dimensioni è operata dal plugin `jquery-ui resizable`  che modifica il contenitore esterno delle ‘finestre’ e poi tutti contenuti interni si adattano via CSS. ## Utilizzo L’applicazione si inizializza dal file principale fornendo degli argomenti alla funzione `Dekstop`, che sono i seguenti : ``` user : { name :'User Name', avatarUrl :'path/to/image.png', email :'user@email.com', website :'http://website.com' }, social : { github :'https://github.com/username/', codepen :'http://codepen.io/username/', twitter :'https://twitter.com/username/', linkedin :'https://www.linkedin.com/username' }, bookmarks : { desktop :'xmarksPublicFolderID', startmenu :'xmarksPublicFolderID', documents :'xmarksPublicFolderID' } ``` Suoni di avvio e spegnimento inclusi. Puoi vederlo in azione al seguente link [http://windowsxp.simonerescio.it](http://windowsxp.simonerescio.it/), oppure puoi ispezionare il codice sorgente su [GitHub](https://github.com/srescio/windowsxp-bookmarks). ## Update 18/08/2022 Col passare del tempo anche gli altri servizi vanno e vengono in base ai mutamenti di mercato e utenza, nel 2019 è arrivato il momento anche per Xmarks di abbandonare la scena, e poiché il sevizio è stato dismesso sia il widget JavaScript che le directory pubbliche che facevano da sorgete dati non sono più disponibili. Tuttavia, non tutto è perduto! Il progetto è stato aggiornato includendo uno script node per usare l’export dei bookmark di Chrome come sorgente statica di dati JSON, controlla il repository su GitHub. [](https://mastodon.social/share?text=http%3A%2F%2Fsresc.io%2F1S&title=Windows%20XP%20Bookmarks%20%E2%98%85)[](https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Fsresc.io%2F1S)[](https://simonerescio.it/2014/07/windows-xp-bookmarks-%e2%98%85)[](https://reddit.com/submit?url=http%3A%2F%2Fsresc.io%2F1S&title=Windows%20XP%20Bookmarks%20%E2%98%85)[](https://api.whatsapp.com/send?text=Windows%20XP%20Bookmarks%20%E2%98%85 http%3A%2F%2Fsresc.io%2F1S)[](https://bsky.app/intent/compose?text=Windows%20XP%20Bookmarks%20%E2%98%85%20http%3A%2F%2Fsresc.io%2F1S)[](https://telegram.me/share/url?url=http%3A%2F%2Fsresc.io%2F1S&text=Windows%20XP%20Bookmarks%20%E2%98%85)[](https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsresc.io%2F1S)