Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioCodemotion
Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche HTML5, CSS3 e Javascript, gli UX design patterns e le ottimizzazioni necessarie a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, autore del libro HTML5 Solutions ed Essential CSS3 tecniques (Apress) condividerà le esperienze reali, fatte durante la gestione dei progetti di Comtaste degli ultimi due anni.
Il racconto a posteriori (questa presentazione fa seguito a quella tenuta poco più di un anno fa, sempre in occasione della UGIALT.net Conference) di quello che è stato effettivamente lo sviluppo e l'adozione di questo linguaggio, che ormai molti indicano come la vera piattaforma di sviluppo del futuro, il rischio che si intravede di una nuova buzzword stile "web 2.0", alcune esperienze dirette e le lezioni che ne ho potuto trarre.
Continous Delivery e codice di Alta Qualità in PHP. Usare Git , Jenkins e diversi tool per realizzare codice di qualità e per effettuare il deploy in maniera automatica.
Presentazione effettuata al 5 incontro del Palermo PHP User Group al teatro Gregotti
Molto spesso in tutta la gestione della vita del software si pensa al database come una cosa mistica, scritto nella pietra, con sue regole e tempi. Questo talk vuole portare un pò di chiarezza su come le nuove tecnologie ma soprattutto le nuove metodologie come il DevOps, permettono di gestire il database come se fosse una componente viva dell'applicazione, versionabile e manutendibile. Con l'aiuto di due prodotti opensource come Liquibase e Flyway a confronto per avere le idee chiare da subito, su come utilizzarlo in casa.
"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.
MongoDB User Group Padova - Overviews iniziale su MongoDBStefano Dindo
MongoDB è un database non relazionale, orientato ai documenti. Classificato come un database di tipo NoSQL, MongoDB si allontana dalla struttura tradizionale basata su tabelle dei database relazionali in favore di documenti in stile JSON con schema dinamico (MongoDB chiama il formato BSON), rendendo l'integrazione di dati di alcuni tipi di applicazioni più facile e veloce.
Lo scopo del MongoDB User Group Padova è quello di condividere esperienze sulla tecnologia MongoDB.
Questa presentazione, usata durante il primo evento dello User Group, è stata usata per introdurre i partecipanti sulle procedure di installazione ed i concetti di base su MongoDB.
In queste slide, presentate durante il Google Developer Group Dev Fest Mediterranean 2014 vi è una introduzione alla "Continuous integration" una pratica di sviluppo software dove i membri di un team integrano il loro lavoro frequentemente.Sono inoltre presentati alcuni tool integrabili in una "build" per misurare la qualità del codice PHP così da rispettare diverse metriche ed avere codice di qualità.
[Luca Cracco] - DevOps: strumenti di automazione per Drupal8Wellnet srl
Spesso durante lo sviluppo e la manutenzione di un progetto siamo costretti a svolgere attività ripetitive o noiose (dall’esecuzione di un task alla replicazione e aggiornamento del sistema). Per risolvere alcuni di questi problemi proveremo ad usare Zaratan, un comodo strumento basato su Docker per installare tutte le componenti necessarie al funzionamento di Drupal, e Robo, un task runner scritto in PHP in grado di eseguire sia comandi Drush che azioni sul filesystem, sul database, ecc...
[drupalday2017] - DevOps: strumenti di automazione per Drupal8DrupalDay
Spesso durante lo sviluppo e la manutenzione di un progetto siamo costretti a svolgere attività ripetitive o noiose (dall’esecuzione di un task alla replicazione e aggiornamento del sistema). Per risolvere alcuni di questi problemi proveremo ad usare Zaratan, un comodo strumento basato su Docker per installare tutte le componenti necessarie al funzionamento di Drupal, e Robo, un task runner scritto in PHP in grado di eseguire sia comandi Drush che azioni sul filesystem, sul database, ecc...
di Luca Cracco
Dopo una piccola introduzione al linguaggio Groovy, dove verranno illustrate brevemente alcune peculiarità, si passerà ad esaminare le caratteristiche che lo rendono adatto per la generazione di DSL.
Verrà quindi presentato come caso pratico la costruzione di una DSL e sarà mostrato come è possibile embeddarla in un progetto Java.
Gestire l’infrastruttura come se fosse codice, ha degli indubbi vantaggi, soprattutto in un team agile che ha più esperienze Dev piuttosto che Ops.
In questa sessione vi racconteremo la nostra esperienza, problemi, vantaggi e cosa abbiamo imparato.
Lo unified tooling è l’area di interesse DevOps che fonde pratiche di software development a quelle di system administration, con lo scopo di semplificare il processo di deployment di ambienti complessi. In questo talk vengono esposte le esperienze di un team di dev che è riuscito a gestire e replicare ambienti complessi, ricorrendo a strumenti e pratiche delle metodologie agili. Saranno evidenziati i vantaggi ottenuti e le problematiche riscontrate.
HTML5 Italy: Back end ecosystems for your applications - Cesare Rocchi + Clau...marcocasario
Talk tenuto da BaasBox durante il meeting di HTML5 Italy.
Scegliere su quale servizio di back end appoggiarsi per realizzare le nostre App non è così semplice come può sembrare a prima vista. Ce ne sono tanti, con differenti approcci, costi e vantaggi. Vedremo i pregi e i difetti dei maggiori player di mercato del segmento BaaS (Backend as a Service) per capire quale servizio e' il piu' adatto alle nostre esigenze di sviluppatori. Concluderemo con una demo live su come si costruisce un app con il software BaasBox
HTML5 cross-platform and device development: web app per tutti gli schermimarcocasario
Non esiste il mobile web, il tablet web o il desktop web. E' sempre lo stesso web solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario. Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche, gli UX design patterns e i linguaggi necessari a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, CTO di Comtaste, autore del libro HTML5 Solutions e docente del corso Rich Web Apps con HTML5 presenterà un talk interamente dedicato a questo argomento, condividendo le esperienze reali, fatte durante la gestione dei progetti degli ultimi due anni.
Enterprise Spring and Flex applicationsmarcocasario
SpringSource ha recentemente annunciato Spring BlazeDS Integration, un nuovo progetto open source per permettere una facile integrazione tra il framework Spring e Adobe BlazeDS, una tecnologia open source basata su server Java remoting e Web messaging.
Il plugin di SpringSource fornisce un approccio più semplice ed intuitivo agli sviluppatori Spring e Java per creare Enterprise Rich Internet Applications utilizzando il framework Adobe Flex, una pietra miliare della Flash Platform.
In questa sessione ai partecipanti verrà fornita una panoramica del framework Flex e di BlazeDS, illustrando i vantaggi e le modalità di integrazione al framework Spring attraverso il plugin Spring BlazeDS.
Local Persistent data with ActionScript 3 and AIRmarcocasario
This is the presentation I had at the FITC 2009 Conference in Amsterdam:
One of the main benefits for web developers who use the Adobe AIR runtime rather than Flash Player through a browser is that the security sandbox restrictions placed on the browser-based Flash Player do not exist within AIR applications.
You have now complete access to the operating system's file system and your applications have the ability to read, write, move, and delete files as well as creating and querying SQLite local databases.
In this session you'll learn how to leverage the file system's access features of the AIR APIs and how to apply advanced techniques to store data locally.
Developing Adobe AIR desktop applicationsmarcocasario
This is the presentation I held at the FromAToWeb 2007 Event. It's about developing desktop applications using Adobe AIR. Adobe AIR is a cross-operating system runtime that allows web application developers to use their existing web development skills (HTML, Javascript, Adobe Flash, Adobe Flex, Ajax) to build and deploy rich Internet applications to the desktop.
2. Chi sono
Salvatore Romeo
Founder + Front-End Engineer presso
3. Domande
?
Interrompete in qualsiasi momento
Inviate un tweet con l’hashtag #odioicss
4. Di cosa parleremo
Quanto tempo si perde con i CSS
LESS: la soluzione
Diventare esperto in 15 minuti Impariamo il linguaggio LESS
Esempio pratico
Ambiente di sviluppo
Compilare LESS in CSS L’ambiente di lavoro
Ambiente di debug
Alternative a LESS: SASS
5. Warning: odierete i CSS
La cosa che uno sviluppatore odia di più:
Copia/Incolla
Trova/Sostituisci
Se imparate LESS non vorrete più tornare indietro.
6. Warning: odierete i CSS
Effetto collaterale
Odierete i CSS a tal punto che se ve ne passano uno lo
riscriverete in LESS.
8. Esperti di LESS in 15
minuti
CSS = LESS
stessa sintassi, stessa semantica
9. Esperti di LESS in 15
minuti
CSS = LESS
stessa sintassi, stessa semantica
LESS = CSS + estensioni
10. Esperti di LESS in 15
minuti
CSS = LESS
stessa sintassi, stessa semantica
LESS = CSS + estensioni
Le estensioni LESS:
• Variabili
• Mixin
• Regole annidate (Nested Rules)
• Operazioni
• Funzioni
• Import
11. LESS: un CSS pre-
processor
LESS è un CSS pre-processor
LESS CSS
(minified)
12. LESS: un CSS pre-
processor
LESS è un CSS pre-processor
LESS CSS
(minified)
Introdurremo LESS partendo da ciò che è noioso (RDP) con
13. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
25. RDP#1: Trova&Sostituisci
Variabili
• Per specificare i parametri in un unico punto del file
• Per cambiare il valore di un parametro agendo su una
sola riga di codice
• Si definiscono facendo precedere il simbolo @ al nome
• Funzionano con:
o i colori: @var1: #FF0000; @c2: rgb(100, 100, 70); ...
o le dimensioni: @size1: 200px; @size2: 1em; ...
o le stringhe: @string1: ‘‘LESS è fantastico’’;
26. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
33. RDP#2: Copia&Incolla
Mixin
• Per definire un gruppo di proprietà e riutilizzarle in
seguito
• I mixin parametrici sono funzioni per specializzare un
mixin
• Si definiscono come una classe
• Per i parametri la sintassi è:
.class (@param1: value, @param2: value) {...}
dove i parametri funzionano come variabili.
• Esempi:
.rounded-corners (@radius: 5px){ … }
34. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
41. RDP#3: disordine
Regole annidate (nested rules)
• Permettono di definire regole di ereditarietà tra gli
elementi
• C’è una corrispondenza diretta tra l’annidamento nel file
HTML e l’annidamento nel file LESS
• La sintassi:
.element1{
.element2{
}
&:active{ ... }
}
42. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
45. RDP#4: matematica
Operazioni
• Permettono di definire valori tramite operatori matematici
• Si possono applicare sui valori
o di dimensione (100px * 3, @size + 10px, ...)
o di colore (#842210 + @color1, #333 + #555, #111 * 3)
• Si possono usare le parentesi:
(@size * 0.5) + 10px
• Possibili usi:
o Definizione di parametri all’inizio
o Temi
46. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
49. RDP#5: color picker
Funzioni
• Permettono di modificare in maniera intuitiva colori
Creazione di colori:
hsla(@hue, @saturation, @lightness, @alpha) hsl
hsva(@hue, @saturation, @value, @alpha) hsv
Filtri su un canale:
hue(@color) saturation(@color) lightness(@color)
red(@color) green(@color) blue(@color)
alpha(@color)
Operazioni sui colori:
saturate desaturate lighten darken
fadein fadeout fade
mix greyscale
multiply screen overlay softlight hardlight difference average
50. RDP#5: color picker
Funzioni
• Permettono di modificare in maniera intuitiva valori
ceil(@number)
floor(@number)
round(@number)
percentage(@number)
unit(@dimension, [@unit: ""])
color(@string)
51. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
52. RDP#6: tutto nello stesso
file
@import url (“style.css");
L’import nei file CSS ha un problema:
Occorre un’ulteriore richiesta al server
53. RDP#6: tutto nello stesso
file
@import url (“style.css");
L’import nei file CSS ha un problema:
Occorre un’ulteriore richiesta al server
Import in LESS:
• Non sono necessarie ulteriori richieste
• Sintassi: @import "lib.less";
• Per importare un file senza includerlo, si usa l’istruzione
@import-once "lib.less";
54. Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
BONUS
57. Tutto qui
Variabili
Mixin
Regole annidate
Operazioni
Funzioni
Import
Ulteriori approfondimenti sono disponibili sul sito web
ufficiale:
http://lesscss.org
79. Ambiente di sviluppo
Raccomandazione:
Eclipse + LESS plugin
(http://www.eclipse.org/downloads/ + http://goo.gl/jler4)
Evidenziazione
errori
e warning
80. Ambiente di sviluppo
Raccomandazione:
Eclipse + LESS plugin
(http://www.eclipse.org/downloads/ + http://goo.gl/jler4)
Link alle
definizioni di
variabili e mixin
82. Compilare LESS in CSS
1)Lato client con less.js:
Pro:
• Veloce per iniziare
Contro:
• Far scaricare al client un file in più
• Compilazione del file in .css prima di renderizzare la
pagina
83. Compilare LESS in CSS
1)Lato client con less.js:
Pro:
• Veloce per iniziare
Contro:
• Far scaricare al client un file in più
• Compilazione del file in .css prima di renderizzare la
pagina
84. Compilare LESS in CSS
2) In automatico premendo
SAVE:
LESS CSS
(minified)
85. Compilare LESS in CSS
2) In automatico premendo
SAVE:
LESS CSS http://wearekiss.com/simpless
(minified)
86. Compilare LESS in CSS
2) In automatico premendo
SAVE:
LESS CSS http://wearekiss.com/simpless
(minified)
Pro:
• Non vi dovete preoccupare di niente
• Esiste l’opzione per la minification
Contro:
88. Compilare LESS in CSS
3) Server side:
Pro:
• Potete definire i file .less dinamicamente (es. per temi)
• Potete fornire ad ogni client un file css personalizzato
Contro:
• Occorre importare una libreria nel vostro sistema
• Overhead se non viene implementato un meccanismo di
cache
95. Alternative a LESS
Sass, Stylus, Turbine, Switch CSS, CSS
Cacheer, CSS Preprocessor, DT CSS,
CSS PP
96. Alternative a LESS
Sass, Stylus, Turbine, Switch CSS, CSS
Cacheer, CSS Preprocessor, DT CSS,
CSS PP
Sembra che ognuno si
stia facendo il suo pre-
processor!
98. Sass
• La sintassi è simile a LESS:
Si usa il $ al posto della @ per definire le variabili
$var anziché @var
99. Sass
• La sintassi è simile a LESS:
Si usa il $ al posto della @ per definire le variabili
$var anziché @var
• Per definire i mixin si antepone
@mixin:
@mixin .shadow { ... }
• Per usarli si antepone @include:
.class{ @include .shadow; }
100. Sass
• La sintassi è simile a LESS:
Si usa il $ al posto della @ per definire le variabili
$var anziché @var
• Per definire i mixin si antepone
@mixin:
@mixin .shadow { ... }
• Per usarli si antepone @include:
.class{ @include .shadow; }
110. Mai più CSS
fogli di stile moderni con LESS
Grazie!
#odioicss
@romeosalv
Editor's Notes
Parleremo di una tecnica che vi aiuterà nello sviluppo e nella manutenibilità dei vostri fogli di stile
Se vi prometto che in 15 minuti rivoluziono il vostro modo di scrivere i fogli di stile per sempre mi credete? Facciamo un scommessa
Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Una bella RDP (rottura di scatole)
Riconoscete questa regola? Si tratta di una regola per aggiungere un’ombra ad un elemento.Se usate i CSS vi ritroverete spesso a fare Copia&Incolla per definire ombre, ma più in generale per replicare i prefissi di ogni browser per diverse regole
LESS introduce i mixin. In pratica voi definite delle regole CSS di uso comune, come shadow in questo caso, e potete riutilizzarle in altre regole CSS.Per chi di voi ha più dimestichezza con i CSS, c’è una tecnica, nota come OOCSS, che vi permette comunque di ovviare a questo problema, aggiungendo ad esempio la classe «shadow» ad un elemento. Tuttavia andiamo a vedere un caso più complesso
LESS introduce i mixin parametrici: potete definire dei parametri con dei valori di default. In questo modo non dovrete veramente più usare il copia/incolla.Per chi di voi ha qualche base di programmazione, i mixin parametrici sono come delle funzioni. I parametri si definiscono e si usano come le variabili. Vengono richiamati come se fossero una funzione. A qualcuno di voi non è chiaro?
Potete utilizzarli per evitare di ripetere i prefissi dei browser, ma anche in molte altre occasioni, come per definire delle regole ed estenderle successivamente.Esistono anche i mixincondizionali: sitratta di caratterizzareilmixin in base ad un intervallo di valori di qualcheparametro. Ad esempiomagarivoglio la distanzadei pixel di un’ombrasiamaggiore se la trasparenza è maggiore. Si usa la clausola when, ma non vi dico I dettagli: se vi serve sappiatecheesistequestapossibilità e sulsito lesscss.org vi spiega come farlo.
Raccomandazione: non utilizzatelo
Raccomandazione: non utilizzatelo
Raccomandazione: non utilizzatelo
Ad esempio conoscete i data-url? tempo fa abbiamo avuto la necessità di inglobare le immagini minori di 1kB come data-url al fine di ridurre il numero di richieste al server.
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare