Developing for Permfances: quali sono le cose che veramente contano nella realizzazione di un sito internet. Come poter velocizzare il caricamento di un sito internet.
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
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.
In questa presentazione è stata utilizzata per l'omonimo webinar (che puoi trovare la registrazione su YouTube) che ti permette di scoprire in cosa è potente il preprocessore SASS e in che modi potrà velocizzare il tuo lavoro da sviluppatore.
Ti consigliamo di venire a vedere il nostro webinar dato che è spiegato tutto passo passo e perché no consultare l'intero corso all'interno delle pagine del nostro portale: http://skillsandmore.org/course/conosci-sass-migliora-i-tuoi-css/
Daniele Scasciafratte ci mostra le caratteristiche dei vari tool di Firefox e di come possono semplificare la vita ad uno sviluppatore, anche in ambito web.
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: @CodemotionTR
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
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.
In questa presentazione è stata utilizzata per l'omonimo webinar (che puoi trovare la registrazione su YouTube) che ti permette di scoprire in cosa è potente il preprocessore SASS e in che modi potrà velocizzare il tuo lavoro da sviluppatore.
Ti consigliamo di venire a vedere il nostro webinar dato che è spiegato tutto passo passo e perché no consultare l'intero corso all'interno delle pagine del nostro portale: http://skillsandmore.org/course/conosci-sass-migliora-i-tuoi-css/
Daniele Scasciafratte ci mostra le caratteristiche dei vari tool di Firefox e di come possono semplificare la vita ad uno sviluppatore, anche in ambito web.
Iscriviti qui per partecipare ad altri Tech Webinar gratuiti: http://goo.gl/iW81VD
Scrivici a: training@codemotion.it
Tw: @CodemotionTR
Chrome Developer Tools is a powerful tool for debugging and profiling websites. It allows developers to inspect page elements, edit CSS styles, debug JavaScript, log console messages, profile performance, and more. Some key features include the Elements panel for inspecting DOM elements, the Styles panel for editing CSS, the Console for debugging JavaScript, the Network panel for profiling network requests, and support for debugging mobile apps on actual devices. Overall, Chrome Developer Tools is a very useful tool that can help developers build and optimize high quality websites.
Presentation for TUGNR (TYPO3 Usergroup Niederrhein | Euregio). Little Overview/Introduction to the Google Chrome developer tools.
One more Resource: http://jtaby.com/2012/04/23/modern-web-development-part-1.html
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
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Stefano Marchisio
Accelerate le #webperformance aiuta ad aumentare le opportunità di #guadagno e portare il vostro business su qualsiasi dispositivo, ovunque in tutto il mondo. Minimizzare la #latenza portando i contenuti più vicino agli utenti non solo nelle principali aree metropolitane, ma anche nelle regioni interne. Ottimizzare i percorsi e #minimizzare i #roundtrip per la distribuzione più rapida di contenuti web.
3 secondi di attesa basterebbero all’80% dei visitatori per decidere di abbandonare un sito web lento.
Questo è particolarmente importante in un contesto mobile dove le connessioni possono non essere particolarmente veloci.
The HTTP protocol was created in 1990 and led to the establishment of the World Wide Web by English physicist Tim Berners-Lee. It led to what is now the world's most used language, HTML (Hyper Text Markup Language). HTML5 is being developed as the next major revision of HTML: what is it about? What will it change?
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Giovanni Sacheli
In questo intervento avanzato ti mostro la mia SEO checklist completa. Partiamo dall'organizzazione dell'audit, per poi passare in rassegna oltre 90 elementi tecnici e contenutistici da studiare e valutare.
OCA, da Oggi Contribuisco Anch'io!
Ovvero come contribuire all'OCA sfruttando al meglio github. Scopriremo come orientarsi tra i vari repository e come è strutturato un progetto; come muoversi tra guidelines e convenzioni; analizzeremo i principali strumenti messi a disposizione da github (issues e PRs).
Vedremo gli aspetti social che agevolano la collaborazione con la community e, non ultimo, lo scopo che anima tutto questo.
Ovvero come contribuire all'OCA sfruttando al meglio github. Scopriremo come orientarsi tra i vari repository e come è strutturato un progetto; come muoversi tra guidelines e convenzioni; analizzeremo i principali strumenti messi a disposizione da github (issues e PRs).
Vedremo gli aspetti social che agevolano la collaborazione con la community e, non ultimo, lo scopo che anima tutto questo
- Alex Comba -
Chrome Developer Tools is a powerful tool for debugging and profiling websites. It allows developers to inspect page elements, edit CSS styles, debug JavaScript, log console messages, profile performance, and more. Some key features include the Elements panel for inspecting DOM elements, the Styles panel for editing CSS, the Console for debugging JavaScript, the Network panel for profiling network requests, and support for debugging mobile apps on actual devices. Overall, Chrome Developer Tools is a very useful tool that can help developers build and optimize high quality websites.
Presentation for TUGNR (TYPO3 Usergroup Niederrhein | Euregio). Little Overview/Introduction to the Google Chrome developer tools.
One more Resource: http://jtaby.com/2012/04/23/modern-web-development-part-1.html
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
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Stefano Marchisio
Accelerate le #webperformance aiuta ad aumentare le opportunità di #guadagno e portare il vostro business su qualsiasi dispositivo, ovunque in tutto il mondo. Minimizzare la #latenza portando i contenuti più vicino agli utenti non solo nelle principali aree metropolitane, ma anche nelle regioni interne. Ottimizzare i percorsi e #minimizzare i #roundtrip per la distribuzione più rapida di contenuti web.
3 secondi di attesa basterebbero all’80% dei visitatori per decidere di abbandonare un sito web lento.
Questo è particolarmente importante in un contesto mobile dove le connessioni possono non essere particolarmente veloci.
The HTTP protocol was created in 1990 and led to the establishment of the World Wide Web by English physicist Tim Berners-Lee. It led to what is now the world's most used language, HTML (Hyper Text Markup Language). HTML5 is being developed as the next major revision of HTML: what is it about? What will it change?
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Giovanni Sacheli
In questo intervento avanzato ti mostro la mia SEO checklist completa. Partiamo dall'organizzazione dell'audit, per poi passare in rassegna oltre 90 elementi tecnici e contenutistici da studiare e valutare.
OCA, da Oggi Contribuisco Anch'io!
Ovvero come contribuire all'OCA sfruttando al meglio github. Scopriremo come orientarsi tra i vari repository e come è strutturato un progetto; come muoversi tra guidelines e convenzioni; analizzeremo i principali strumenti messi a disposizione da github (issues e PRs).
Vedremo gli aspetti social che agevolano la collaborazione con la community e, non ultimo, lo scopo che anima tutto questo.
Ovvero come contribuire all'OCA sfruttando al meglio github. Scopriremo come orientarsi tra i vari repository e come è strutturato un progetto; come muoversi tra guidelines e convenzioni; analizzeremo i principali strumenti messi a disposizione da github (issues e PRs).
Vedremo gli aspetti social che agevolano la collaborazione con la community e, non ultimo, lo scopo che anima tutto questo
- Alex Comba -
Slide e riferimenti al codice del Meetup del 28/02/2019 del Vue JS Milano dove parlo di creazione di componenti, passaggio di parametri, computed properties
Grazie a Team Foundation Build è possibile adottare pratiche di integrazione continua nel proprio progetto. In questa presentazione viene introdotta la struttura di tfs build assieme alle tecniche base per effettuare una customizzazione della build.
Sviluppo e deployment cross-platform: Dal mobile alla Tv Codemotion
Presentazione tenuta da Andrea Trento in occasione del Codemotion del 5 marzo a Roma - http://www.codemotion.it/
Progettare e sviluppare contenuti cross-platform in grado di essere deployate su differenti piattaforme (desktop, mobile, TV, ecc.) implica l’utilizzo di svariate tecnologi e/o la creazione di differenti versioni a compensazione della frammentazione del mercato. Analizzeremo come progettare e fare cross' coding 'sfruttando al meglio le potenzialità della Flash Plartform tecnology e di AS3. Un sessione pratica che condurrà noi e i contenuti su piattaforma Android, iOS, TabletOS, desktop,TV.
Similar to Developing for Performances - Laboratorio di Web Design 2014/15 (20)
Angular 4 - convertire o migrare un'applicazione AngularjsGiovanni Buffa
Seminario renuto all'IRES di Udine sulla migrazione, attraverso UpgradeModule, o la riscrittura di un'applicazione AngularJs in una applicazione Angular 2/4
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSGiovanni Buffa
Gli argomenti trattati durante il Workshop gratuito sull'ideazione e creazione di Web Applications con AngularJS:
- Metodologie innovative di ideazione e creazione di Web Applications;
- Sfide e problemi del lavoro in team;
- Introduzione ad AngularJS e alle sue componenti principali;
- Dimostrazione pratica di una WebApp
Introduction to SEO, based on the official document provided by Google: https://static.googleusercontent.com/media/www.google.com/it//intl/it/webmasters/docs/search-engine-optimization-starter-guide-it.pdf
Drupal is an open-source content management framework that allows users to create and manage websites and applications. It provides building blocks like modules that can be combined to create sites for purposes like news sites, online stores, social networks, blogs, and wikis. Content in Drupal is organized into nodes that are then structured and presented through various systems like menus, taxonomy, and views. This separation of content and presentation is similar to the separation of HTML and CSS. Drupal provides flexibility in customizing sites through its large library of contributed modules and ability to configure user permissions and themes.
11. 1. Richiediamo un pagina;
2. Una volta ricevuto l’HTML, il browser fa il
parsing del documento proceduralmente,
ponendo attenzione ai file esterni, e
convertendo l’HTML nella classica struttura ad
albero (DOM);
3. Quando il DOM è completo, JavaScript può
manipolare gli elementi, e gli stili CSS
vengono applicati all’intera pagina.
12. CSS e JS bloccano la
pagina dalla visualizzazione
13. Ogni volta che il browser trova un CSS mette
in pausa la renderizzazione del DOM per far
caricare gli stili.
Tuttavia, questo è un comportamento
positivo (previene il FOUC1).
1 Flash Of Unstyled Content
14. Ogni volta che viene trovato un JS, il
browser non mostra all’utente la pagina fino
a che tutti i metodi dello script non vengono
eseguiti.
document.write
24. Ottimizza il caricamento delle immagini.
<picture>
Ricorda che <picture> non è ancora standard e che devi utilizzare un Polyfill per poterlo usare.
Valuta bene progetto per progetto!
57. • Hosting condiviso;
• Uso di <picture>;
• HTML non compresso;
• Caricamento non ottimizzato dei CSS (no compressione, no
aggregazione);
• Caricamento non ottimizzato dei JS (no compressione, no
aggregazione);
• Immagini originali ottimizzate (con ritaglio non ottimizzato);
• Chaching base del server e del CMS disabilitato;
58. Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.709s 1.174s 1.792s 2002 160
Repeat View 1.555s 0.630s 1.291s 1302 160
Summary
59. Time Requests Bytes In
First View 2.709s 26 561 KB
Repeat View 1.555s 2 9 KB
Document complete
60. Time Requests Bytes In
First View 2.928s 27 563 KB
Repeat View 1.555s 2 9 KB
Fully loaded
69. • Hosting condiviso;
• Uso di <picture>;
• HTML compresso;
• Caricamento ottimizzato dei CSS (compressione,
aggregazione, asincrono);
• Caricamento ottimizzato dei JS (compressione,
aggregazione);
• Immagini originali ottimizzate (con ritaglio non ottimizzato);
• Chaching base del server e del CMS abilitato;
70. Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.036s 0.544s 1.186s 1847 150
Repeat View 0.767s 0.167s 0.695s 702 150
Summary
71. Time Requests Bytes In
First View 2.036s 17 556 KB
Repeat View 0.767s 2 9 KB
Document complete
72. Time Requests Bytes In
First View 2.165s 18 557 KB
Repeat View 0.767s 2 9 KB
Fully loaded
82. Non ottimizzato
Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.709s 1.174s 1.792s 2002 160
Summary
Ottimizzato
Load Time First Byte Start Render Speed Index
DOM
Elements
First View 2.036s 0.544s 1.186s 1847 150