Slide utilizzate durante l'intervento sulle Progressive Web App e le Trusted Web Activities applicate a Wordpress e Woocommerce.
Trovate informazioni più precise sull'argomento su https://2019.catania.wordcamp.org/session/progressive-web-app-e-twa/
e sugli articoli https://www.francescogiammanco.it/progressive-web-app-lighthouse/
e https://www.francescogiammanco.it/trasformare-un-sito-in-twa/
I did a talk at DevFest Nord Italia 2016 about Progressive Web Apps, Hybrid and Native Apps, i've analyzed the pros and cons of the various technologies and described how to get started with Ionic, React Native and how work a Progressive Web App.
I servizi offerti dalla piattaforma BING consentono di realizzare facilmente applicazioni per Windows 8.1 moderne ed evolute. Le funzionalità di Speech Recognition, ad esempio, consentono di fornire all'utente un diverso modo per interagire con la nostra applicazione mentre le funzionalità infrastrutturali di App Linking ci permettono di integrare la nostra applicazione all'interno dei risultati della Smart Search di Windows 8.1, consentendoci di essere più visibili e, quindi, di avere un maggior successo.
Slide della sessione "BING e Windows Store App" tenuta al DotNetCampus 2014 a Roma il 10/05/2014
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
I did a talk at DevFest Nord Italia 2016 about Progressive Web Apps, Hybrid and Native Apps, i've analyzed the pros and cons of the various technologies and described how to get started with Ionic, React Native and how work a Progressive Web App.
I servizi offerti dalla piattaforma BING consentono di realizzare facilmente applicazioni per Windows 8.1 moderne ed evolute. Le funzionalità di Speech Recognition, ad esempio, consentono di fornire all'utente un diverso modo per interagire con la nostra applicazione mentre le funzionalità infrastrutturali di App Linking ci permettono di integrare la nostra applicazione all'interno dei risultati della Smart Search di Windows 8.1, consentendoci di essere più visibili e, quindi, di avere un maggior successo.
Slide della sessione "BING e Windows Store App" tenuta al DotNetCampus 2014 a Roma il 10/05/2014
Visual Studio Online è già molto completo, ma offre interessanti possibilità di integrazione.
Vedremo come estendere Visual Studio Online (ma anche TFS) mediante le sue REST API ed i Service Hooks.
Utilizzando alcuni degli standard web più moderni, Microsoft ha realizzato Blazor: una soluzione che permette ai programmatori .NET di riutilizzare le proprie conoscenze per la realizzazione della user interface delle proprie applicazioni.
Già disponibile per l’uso in produzione con una versione server-side, verrà rilasciata a Maggio una versione client-side basata su WebAssembly, che permetterà lo sviluppo di una Single Page Application in C# eseguita interamente nel browser.
Ma la roadmap non si ferma qui, perchè sono già disponibili le prime versioni sperimentali per l’utilizzo di questa tecnologia anche su Desktop e Mobile!
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
Blazor è un framework per la creazione di Single Page Application (SPA) tramite l’utilizzo di C#.
Creato da Steve Sanderson e successivamente inserito in .NET Core come esperimento.
Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo parte integrante dell’ecosistema .NET
Offre tutti i vantaggi di un framework front-end scrivendo codice interamente in C#.
Internet Information Server (IIS), FastCGI,WinCache e URL Rewrite offrono un ambiente ideale per far girare applicazioni PHP e WordPress in particolare. In questa sessione vedremo come configurare al meglio sia in modo automatico, grazie al Web Platform Installer 2.0, che manuale WordPress al fine di farlo girare in modo performate ed affidabile su Windows con IIS.
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Selenium e testing web - di Alessio BenedettiGiuneco S.r.l
Selenium framework: Selenium è un framework open-source per l'automazione e il testing di applicazioni web che permette di controllare in remoto le istanze del browser ed emulare l'interazione di un utente.
Tech Webinar: Come ottimizzare il workflow nello sviluppo di Web AppCodemotion
Luciano Murruni illustra gli strumenti e i tool a disposizione per velocizzare e migliorare la scrittura e la qualità del codice della nostra applicazione.
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: http://twitter.com/CodemotionTR
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Antonio Gallo
Ionic è da anni uno dei framework basati su angular più famosi e più usati.
La versione 4 è una completa riscrittura della precedente versione usando tutta una serie di nuovi standard web con cui avremo a che fare sempre più spesso nei prossimi anni: Custom Element, Variabili CSS, Shadow DOM e non solo.
In questo talk, sia per esperti che principianti, vedremo come, grazie a Ionic, si può usare Angular per sviluppare un applicazione funzionante sia sul Web che sul Mobile.
Utilizzando alcuni degli standard web più moderni, Microsoft ha realizzato Blazor: una soluzione che permette ai programmatori .NET di riutilizzare le proprie conoscenze per la realizzazione della user interface delle proprie applicazioni.
Già disponibile per l’uso in produzione con una versione server-side, verrà rilasciata a Maggio una versione client-side basata su WebAssembly, che permetterà lo sviluppo di una Single Page Application in C# eseguita interamente nel browser.
Ma la roadmap non si ferma qui, perchè sono già disponibili le prime versioni sperimentali per l’utilizzo di questa tecnologia anche su Desktop e Mobile!
In questa sessione andremo in dettaglio sul come poter migliorare le nostre applicazioni ASP.NET dal punto delle vista delle performance: Come capire dove interventire? Cosa possiamo migliorare? A cosa dobbiamo prestare attenzione? E nel caso di un'applicazione esistente, dove possiamo intervenire per migliorarla ulteriormente?
Blazor è un framework per la creazione di Single Page Application (SPA) tramite l’utilizzo di C#.
Creato da Steve Sanderson e successivamente inserito in .NET Core come esperimento.
Visto l’enorme successo avuto sulla community è stato poi deciso di renderlo parte integrante dell’ecosistema .NET
Offre tutti i vantaggi di un framework front-end scrivendo codice interamente in C#.
Internet Information Server (IIS), FastCGI,WinCache e URL Rewrite offrono un ambiente ideale per far girare applicazioni PHP e WordPress in particolare. In questa sessione vedremo come configurare al meglio sia in modo automatico, grazie al Web Platform Installer 2.0, che manuale WordPress al fine di farlo girare in modo performate ed affidabile su Windows con IIS.
Angular js o React? Spunti e idee per la scelta di un frameworkGiovanni Buffa
Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.
Selenium e testing web - di Alessio BenedettiGiuneco S.r.l
Selenium framework: Selenium è un framework open-source per l'automazione e il testing di applicazioni web che permette di controllare in remoto le istanze del browser ed emulare l'interazione di un utente.
Tech Webinar: Come ottimizzare il workflow nello sviluppo di Web AppCodemotion
Luciano Murruni illustra gli strumenti e i tool a disposizione per velocizzare e migliorare la scrittura e la qualità del codice della nostra applicazione.
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: http://twitter.com/CodemotionTR
Le novità di Ionic 4- Il framework basato su Angular per sviluppare applicazi...Antonio Gallo
Ionic è da anni uno dei framework basati su angular più famosi e più usati.
La versione 4 è una completa riscrittura della precedente versione usando tutta una serie di nuovi standard web con cui avremo a che fare sempre più spesso nei prossimi anni: Custom Element, Variabili CSS, Shadow DOM e non solo.
In questo talk, sia per esperti che principianti, vedremo come, grazie a Ionic, si può usare Angular per sviluppare un applicazione funzionante sia sul Web che sul Mobile.
Impara React sfruttando le tecnologie più recenti (Eduard Capanu).pptxEduardCapanu
React evolve velocemente con strumenti come Vite.js, Remix, e Next.js, richiedendo aggiornamenti continui delle competenze per gestire nuovi progetti con successo.
Che tu abbia già esperienza con React o che sia alle prime armi, questo talk ti offrirà una nuova prospettiva sulle ultime tendenze di questo framework e ti mostrerà le best practice per la creazione e la configurazione di un progetto.
Esploreremo le ultime innovazioni di React e scopriremo come sfruttare efficacemente le nuove funzionalità per lanciare un nuovo progetto senza intoppi, dalla scelta del framework e della tecnologia, alla configurazione iniziale più adatta.
Vedremo tutti i passaggi chiave per realizzare un progetto React in modo efficiente e impareremo, tra le altre cose, che non sempre ‘create-react-app’ è l’opzione migliore per iniziare un nuovo progetto.
Event link: https://thecmmbay.com/eventi/impara-react-sfruttando-le-tecnologie-piu-recenti-r97r9y7l6
"Alla ricerca della formula magica". Presentazione usata per il ciclo di webinar su traduzione e adattamento di siti web per AITI Emilia Romagna, novembre-dicembre 2016.
Ormai tutti i browser mettono a disposizione strumenti per l'interfacciamento tramite plugin scritti sempre più spesso usando le classiche tecnologie web, quali Javascript e HTML.
In questa sessione verrà effettuata una prima presentazione della struttura di un plugin per Google Chrome e le funzionalità a cui è possibile accedere attraverso questo; verranno poi analizzate alcune funzioni specifiche fornite dalle API, infine vedremo la procedura di pubblicazione dell'applicazione
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalyPaolo Dadda
Spesso si tende a considerare il lavoro di piccoli team e sviluppatori individuali di minor qualità per questioni di competenze.
Un cloud, infatti, necessita spesso di VPS da configurare, far funzionare e mantenere, che seppur virtuali e dedicate, richiedono un minimo di competenza.
Come mantenere alta la qualità per piccoli team e singoli developer?
Come ridurre l’esigenza di “dover” saper far tutto?
Utilizzare servizi che eliminano, lato sviluppatore, gestione e sicurezza del server, può essere determinante, permettendo di specializzarsi di più sui propri “skill” senza trovarsi obbligati a coinvolgere terze figure o diventare factotum del web.
Target:
WSP-G3-002 - Web Project Manager,
WSP-G3-005 - Business Analyst,
WSP-G3-009 - Frontend Web developer,
WSP-G3-010 - Server Side Web Developer,
WSP-G3-014 - Digital Strategic Planner.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
Steps to develop apps for mobile that access internet realted contents.
It simply explores basic concepts of developmnet. Written in italian.
---
Espone i passi necessari a sviluppare un app mobile in grado di accedere a contenuti su web. Espone i concetti basilari del processo di sviluppo.
La sicurezza delle Web Application - SMAU Business Bari 2013Massimo Chirivì
Durante lo sviluppo di siti web o web application l’implementazione della sicurezza dovrebbe essere una della fasi più importanti che uno sviluppatore dovrebbe eseguire, spesso però le soluzioni proposte non sono proprio “sicure”.Il talk mira a illustrare le principali tematiche relative all’argomento con un introduzione al Penetration Testing su web application.
2. Francesco Giammanco
SEO su Yandex e tools Yandex
Consulente SEO e Marketing
internazionale
Formazione Marketing Turismo
Project Manager Web Agency modulare e
“Palermo Ladies Open”.
3. Cos’è una PWA?
• Applicazione web che si
comporta come una pagina web
• Offre funzionalità extra (sito
offline visibile, push notifications)
• Facile: si attiva con un clic
• Sicura: richiede il protocollo
HTTPS
• Installabile su Desktop
4. Vantaggi
• Le funzioni base non
richiedono un Developer
• Si adatta al contenuto del
sito.
• Permette di realizzare
strategie marketing low cost.
• Offre servizi in app senza
spese.
5. Svantaggi
• Non tutti i browser li
accettano.
• Aggiornamenti lenti (vedi
Apple).
• Usa più batteria.
• Facile ma poco conosciuta.
6. Il SEO e le PWA
(fattori indiretti di ranking)
• Aumento dell’accessibilità (traffic
migliora il ranking), meno passaggi per
accedere al sito.
• Migliore esperienza (le push notifications
e le altre funzioni possono migliorare
l’esperienza dell’utente).
• Aspetto grafico più accattivante nei
browser.
7. Il SEO e le PWA
(fattori di ranking)
• Sito funziona in modalità offline
(uptime del server per gli utenti
pari al 100%)
• Migliore performance e velocità
• Caching del browser
8. Lighthouse
(tool integrato di Chrome)
Utilizza Lighthouse per
monitorare lo stato della tua
Progressive Web App
Premi “Ctrl + Shift + I” mentre
sei su una finestra di Chrome,
alla casella “Audits”
9. To Do List
Tutti gli strumenti per montare una PWA
• Creare il Service Worker (file javascript)
• Creare Manifest.json
• Script da inserire nelle pagine del sito.
10. Service-Worker.js
(lo potete trovare anche come sw.js)
• E’ il file che gestisce la cache del browser
• Devi inserire uno script in ogni pagina dove
vuoi che sia attivo.
• Inserisci il file nella root del sito.
11. Service-Worker.js
• Inserisci il codice nello spazio
designato dal tuo tema grafico (prima
della fine di <head>)
• Hai un tema che non lo permette?
Inserisci lo script in <head> o nel
footer delle pagine.
• NON aggiungerlo in function.php
Visita http://bit.ly/2XsEB4Q per copiare il codice
12. Service-Worker.js
• Inserisci lo script in un file che
chiamerai service-worker.js
• Inserisci il file nella root del sito.
Premi “ Ctrl + Shift + I ” su Chrome,
poi vai su Application > Service
worker per vedere se è installato
correttamente.
Visita http://bit.ly/2XsEB4Q per copiare il codice
13. Service-Worker.js
La prima sezione di codice:
• Installa il service worker,
• crea una o più cache dedicate,
• Inserisci i file che vuoi far gestire
dalla cache.
Visita http://bit.ly/2XsEB4Q per copiare il codice
14. Service-Worker.js
Seconda sezione di codice:
Cloniamo le richieste, perché una
verrà utilizzata dalla cache, una dal
browser.
Se il browser ha una versione in cache
della pagina la presenterà al posto di
caricarne una nuova.
Visita http://bit.ly/2XsEB4Q per copiare il codice
15. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito e in tutte le sub
directory.
• Se vuoi che influenzi l’intero sito inseriscilo nella root.
• Il file deve essere personalizzato.
• Inserisci uno script su una sezione del sito che influenzi tutte le
pagine.
16. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito
e in tutte le sottodirectory.
• Se vuoi che influenzi l’intero sito inseriscilo
nella root.
• Il file deve essere personalizzato.
Visita http://bit.ly/2XsEB4Q per copiare il codice
17. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito e in tutte le sottodirectory.
• Se vuoi che influenzi l’intero sito inseriscilo nella root.
• Il file deve essere personalizzato.
Visita http://bit.ly/2XsEB4Q per copiare il codice
18. Manifest.json
• Controlla sul pannello Application di Chrome
che il file sia installato correttamente.
• Se tutto è andato correttamente, spunterà un
popup (differente su ogni browser) che
avviserà della possibilità di installare la
progressive web app del sito.
19. Manifest.json
Successivamente, una volta installata la
app sullo smartphone (o sul desktop),
sarà possible aprire le pagine del sito
dall’app,
anche durante una normale navigazione
su Google.
20. Cos’è una TWA?
• le Trusted Web Activities (TWA)
permette di pubblicare i siti sugli sugli
store (Windows, Android, iOS).
• Utilizzare una sezione di un sito
come app.
• Avere un servizio integrato (app)
integrato nel database di un e-
commerce.
21. Come si realizza una TWA
Ci sono vari metodi:
• Realizzarla a partire dale
conoscenze delle PWA
https://developers.google.com
/web/updates/2019/02/using-
twa (CORRETTO)
• Utilizzare un repository
Google e completare
l’operazione da se (CORRETTO
MA PIGRO)
• Utilizzare servizi terzi per
ricevere un APK pronta
(VELOCE MA SVANTAGGIOSO)
22. Utilizzeremo il metodo
“pigro”
• il metodo “corretto” ha
senso se dovete crescere come
developer.
• Il metodo veloce lascia il
“segno” del metodo utilizzato
(URL della App).
• Inseriremo la TWA anche su
iOS Store? No, richiederebbe
un passaggio ulteriore.
23. Iniziamo!
• Avere i permessi per creare file e cartelle nello
spazio in cui è installato il tuo sito WordPress
• Devi avere i requisiti su Lighthouse per generare
la chiamata “Add to Homescreen”
• Devi poter pubblicare app su Google Play
https://play.google.com/apps/publish/
• Scaricare Android Studio
• Scaricare da GitHub il file ZIP presente in
https://github.com/GoogleChromeLabs/svgomg-
twa
24. Crea la tua App
• Vai su https://play.google.com/apps/publish/
• Clicca su CREA APPLICAZIONE
• Inserisci le informazioni che servono per terminare la
prima parte della creazione dell’app
• Vai su Firma dell’app e copia Fingerprint SHA-256 del certificato
• Vai a generare il Digital Statement Asset tramite
https://developers.google.com/digital-asset-
links/tools/generator
25. Digital Statement Asset
• Apri https://developers.google.com/digital-asset-links/tools/generator
• Copia da Google Play Fingerprint SHA-256
Inserisci:
• 1) l’URL del sito,
• 2) il nome dellApp di Google Play
• 3) Fingerprint SHA-256 del certificato
• Genera il codice che va dentro la cartella (da creare) /.well-known/assetlinks.json
26. Crea la tua App
• Apri Android Studio e vai su File > New > Import Project
e caricare il progetto scaricato da GitHub.
• Modifica il file AndroidManifest.XML inserendo i dati
che combacino con la scheda dell’app e l’URL del sito da
inserire
• Vai su New > Image Asset per caricare le icone e le
immagini di presentazione dell’app
• Firma la app (genera una key) tramite il pannello Build >
Generate Signed Bundle / Apk
27. Crea la tua App
• Carica la tua app su Release dell’app
dentro il tuo progetto su Google Play
• Fornisci tutte le informazioni richieste
dai singoli pannelli.
• Non realizzare Beta o altro, dovresti
generare varianti della key su Android
Studio.
28. Link utili
This TWA stuff rocks!
https://medium.com/@svenbudak/this-twa-stuff-
rocks-finally-i-got-my-pwa-on-google-play-store-
b92fe8dae31f
Realizzare una PWA da zero per WordPress
https://www.francescogiammanco.it/progressive-web-
app-lighthouse/
Realizzare una TWA da zero
https://www.francescogiammanco.it/trasformare-un-
sito-in-twa/
TWA di GoogleChromeLabs
https://github.com/GoogleChromeLabs/svgomg-twa
Web App Manifest Generator
https://app-manifest.firebaseapp.com/