CSS & JS : from zero to Hero

CSS&JSCSS&JS : from ZERO to HERO: from ZERO to HERO
Messina, 24/03/2018
#LSDigital - @strettodigitale

GIUSEPPE PIZZIMENTIGIUSEPPE PIZZIMENTI
https://twitter.com/gpizzimentihttps://twitter.com/gpizzimenti
https://www.linkedin.com/in/giuseppepizzimentihttps://www.linkedin.com/in/giuseppepizzimenti
https://plus.google.com/+GiuseppePizzimentihttps://plus.google.com/+GiuseppePizzimenti
https://www.facebook.com/giuseppe.pizzimentihttps://www.facebook.com/giuseppe.pizzimenti
https://www.slideshare.net/giuseppe.pizzimentihttps://www.slideshare.net/giuseppe.pizzimenti
https://github.com/gpizzimentihttps://github.com/gpizzimenti

http://info.cern.ch/hypertext/WWW/TheProject.html

<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<HR>
<a href="http://somegreatsite.com">Link Name</a>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P> <B>This is a new paragraph!</B> </P>
</BODY>
</HTML>

<table width="100%" heigth="80%">
<tr>
<td colspan="2">
<font color="red" bgcolor="white"
size="3">
<b>Messy stuff</b>
</font>
...

https://www.google.it/search?q=blink+tag

01 Ottobre 199401 Ottobre 1994

17 Dicembre 199617 Dicembre 1996

“...è un linguaggio usato per definire la formattazione didocumenti
HTML, XHTML e XML ad esempio i siti web e relative pagine web...”
https://it.wikipedia.org/wiki/CSS
Cos’è il (i) CSS ?Cos’è il (i) CSS ?

●
Separazione contenuti/markup/stile
●
Codice maggiormente mantenibile/modificabile
●
Velocità sviluppo
●
Velocità download
●
Accessibilità/SEO
Vantaggi del CSSVantaggi del CSS

p { color: red; }
CSS ruleCSS rule
SELECTOR
DECLARATION
PROPERTY VALUE

p {
color: red;
font-size: 12px;
line-height: 16px;
}
Grouping declarationsGrouping declarations

h1, h2, p {
color: red;
font-size: 12px;
line-height: 16px;
}
Grouping selectorsGrouping selectors

h1, h2, p {
color: red;
font-size: 12px;
line-height: 16px;
}
Inheritance & CascadingInheritance & Cascading
h1 { font-weight: bold; }
h1 em { font-weight:
bold; }

Selectors: #IDSelectors: #ID
#container {
width: 960px;
margin: auto;
}

Selectors: .classSelectors: .class
.container {
width: 960px;
margin: auto;
}

Selectors: descendantSelectors: descendant
.container p{
width: 960px;
margin: auto;
}

Selectors: direct childrenSelectors: direct children
.container > p{
width: 960px;
margin: auto;
}

Selectors: adjacent siblingsSelectors: adjacent siblings
.container + p{
width: 960px;
margin: auto;
}

Selectors: siblingsSelectors: siblings
.container ~ p{
width: 960px;
margin: auto;
}

Selectors: attributeSelectors: attribute
a[href*="lostrettodigitale"]{
color: blue;
}
a[href^="http"]{
color: blue;
}
a[href$="jpg"]{
border: 0;
}

Selectors: notSelectors: not
div:not(#container) {
color: blue;
}

Selectors: nt-childSelectors: nt-child
li:nth-child(3) {
color: red;
}
li:first-child {
color: red;
}
li:nth-child(3) {
color: red;
}
li:last-child {
color: red;
}

Selectors: pseudo-elementSelectors: pseudo-element
a:hover, a:visited {
color: blue;
}
li:before, li:after {
content: “!”;
display: inline-block;
}

SpecificitySpecificity
●
ID
●
class
●
tag
●
inheritance
●
order/proximity
●
!important

3 ways to CSS3 ways to CSS
●
INLINE
●
EMBEDDED
●
LINKED

CSS InlineCSS Inline
<p style="color='red';
font-size:='10px';">Quite
Messy stuff</p>

CSS EmbeddedCSS Embedded
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Marginally Less Messy stuff</p>

CSS LinkedCSS Linked
<html>
<head>
<link rel='stylesheet'
href='global.css' type='text/css'
media='all'/>
<link rel='stylesheet'
href='print.css' type='text/css'
media='print'/>
</head>
<body>
<p>Stuff</p>

PropertiesProperties
.element {
background-color: rgb(255,255,255);
background-image: url('immagini/fiore.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
color: #FF0000;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
text-align: justify;
text-indent: 100px;
text-transform: uppercase;
transition: all 1s ease-out;
}

Box ModelBox Model
“...l’insieme delle regole che servono per definire dimensioni,aspetto e
posizione degli elementi della pagina...”

Box modelBox model
.box {
display: block;
width: 400px;
padding: 10px;
border: 5px solid #000;
margin: 20px 10px;
min-width: 250px;
max-width: 50%;
overflow: hidden; /* scroll, auto, visibile */
}

Box-sizingBox-sizing
* {
box-sizing: border-box;
}

Block elementsBlock elements
● div, p, h1 { display: block; }
●
Unelemento block-level è un elemento che forma un blocco separato, può contenere
elementi block-levele elementi inline e gli si possono attribuire delle dimensioni.
●
Glielementiblock-level vengono disposti verticalmente, formando unanuovariga.
●
Unelemento block level di dimensioni non specificate occupatra margini, bordi,
paddinge contenuto, tutta la larghezza messa a disposizionedelsuo box contenitore.
●
In verticale occuperà l’altezza necessaria al suo contenuto.

Inline elementsInline elements
● span, a, em { display: inline; }
●
Un elemento in linea è un elemento che rimane in linea conilresto del contenuto:può
contenere solo altri elementi inline
●
Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o
modificandone lasua natura con la proprietà display, non si possono attribuire delle
dimensioni
●
Elementiinline adiacenti vengono disposti orizzontalmente.
●
Un elemento inline occuperà sia in orizzontale che in verticale l’ altezzanecessaria al
suo contenuto.

Invisible elementsInvisible elements
.hidden {
display: none;
visibility: hidden; /* visibile */
}

PositioningPositioning
.positioned { position: static; }
●
STATIC : (default)l'elemento viene posizionato seguendo il normale flusso delcodiceHTML
●
RELATIVE : l'elemento viene posizionato in relazione al suo contenitore naturale conle proprietà
top,left,bottom,right
●
ABSOLUTE : l'elemento viene estratto dal normale flusso della pagina e viene posizionato in
relazione a primo contenitore con valore diverso da staticcon le proprietà top,left,bottom,right
●
FIXED : l'elemento viene estratto dal normale flusso della paginae viene posizionato in relazione
alla paginacon le proprietà top,bottom,lefteright; senza però scrollarecon essa

Floating & ClearingFloating & Clearing
.floating { float: left; } /* right, none */
Laproprietà FLOAT estrae un elemento dal normale flusso deldocumento per spostarlo suuno
dei latidel suo contenitore, facendo scorrere tutti gli elementi verso il lato opposto;
.cleared { clear: both; } /* right, left */
Laproprietà CLEAR impedisce che ad un dato elemento si affianchino elementi flottantisu un
lato o entrambi.

<html>
<head>
<title>Layout table-less</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="MAIN">
<div id="HEADER">Header</div>
<div id="SIDEBAR">
Sidebar
</div>
<div id="CONTENT">
Content
</div>
<div id="FOOTER">
Footer
</div>
</div>
</body>
</html>

#MAIN {
margin: 0 auto 0 auto; //0 auto;
width: 750px;
border: solid 1px #FFF;
}
#HEADER {
border-bottom: solid 1px #FFF;
}
#SIDEBAR {
float: left;
width: 150px;
}
#CONTENT {
float: left;
width: 600px;
border-left: solid 1px #FFF;
}
#FOOTER {
clear: left;
border-top: solid 1px #FFF;
}

Media queriesMedia queries
@media only screen and (max-width: 768px) {
#MAIN {
width: 100%;
}
#SIDEBAR , #CONTENT {
float: none;
width: 100%;
}
}

Media queriesMedia queries
@media screen and (orientation: landscape) {
/* portrait */
}

FlexboxFlexbox
.flexcontainer {
display: flex;
flex-flow: row;
}

GridGrid
.gridcontainer {
display: grid; /* inline-grid, subgrid */
grid-template-columns: 40px 50px auto 50px
40px;
grid-template-rows: 25% 100px auto;
}

PreprocessorPreprocessor
“...è un linguaggio che compila in CSS...”

Vantaggi del PreprocessingVantaggi del Preprocessing
●
Le variabili
●
Le operazioni
●
Le regole annidate
●
Le funzioni (mixins) e le estensioni (extends)
●
Le importazioni di file e librerie

SASSSASS
●
https://rubyinstaller.org/
● C:gem install sass
● C:sass –watch
[nomeFile].scss:[percorso]/[n
omeFile].css

VariabiliVariabili
$coloreSfondo: black;
$coloreTesto: white;
$coloreBordo: $coloreTesto;
body {background:$coloreSfondo;}
* {color:$coloreTesto;}
.pippo {border-color:$coloreBordo;}
.pluto {border-color:$coloreBordo;}

OperazioniOperazioni
$contenitore: 1080px;
$colSx: 200px;
$colDx: 200px;
$paddingColonne: 20px;
$colCentrale: $contenitore - $colSx - $colDx -
6*$paddingColonne;
.contenitore {width:$contenitore;}
.colonnaSinistra {width:$colSx; padding:0
$paddingColonne;}
.colonnaCentrale {width:$colCentrale; padding:0
$paddingColonne;}
.colonnaDestra {width:$colDx; padding:0
$paddingColonne;}

Regole annidateRegole annidate
ul.menuBottom {margin:0; padding:0; list-
style:none;}
ul.menuBottom li {display:inline-block;
padding:0 20px;}
ul.menuBottom li a {display:block;}
ul.menuBottom li a:hover {color:blue;}
ul.menuBottom li.first {padding-left:0;}

Regole annidateRegole annidate
ul.menuBottom {
margin:0; padding:0; list-style:none;
li {
display:inline-block; padding:0 20px;
a {
display:block; color:red;
&:hover {color:blue;}
}
&.first {padding-left:0;}
}
}

ExtendsExtends
.classe {
background:black;
em, strong {color:red}
}
.classeBordoArancio {
@extend .classe;
border:1px solid red;
}

MixinsMixins
.modal-background{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: black;
opacity: 0.9;
}

MixinsMixins
@mixin overlay() {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal-background{
@include overlay();
background: black;
opacity: 0.9;
}

MixinsMixins
@mixin overlay($bgcolor: “black”, $opacity: 0.9)
{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background: $bgcolor;
opacity: $opacity;
}
.modal-background{
@include overlay(“white”,0.6);
}

MixinsMixins
$breakpoints: (
"phone": 400px,
"phone-wide": 480px,
"phablet": 560px,
"tablet-small": 640px,
"tablet": 768px,
"tablet-wide": 1024px,
"desktop": 1248px,
"desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}

ImportImport
● _libreria.scss
● @import "libreria.scss"

Frameworks SASSFrameworks SASS
● Bourbon
● Compass
● CSSOwl
● Scut
● Susy

SQL JAVA,ASP,CGI,PHP,...
CORBA,COM+,SOAP,...
JAVA,.NET,... XML/WAP. JAVASCRIPT

Java..che?Java..che?
●
Sviluppato da una sola persona ( @BrendanEich)in 10
giorni
●
Sintassi come il C
●
Interpretato come Basic
●
Dinamico come Python
●
Funzionalecome Scheme
●
Ad oggetti ...ma senza classi! (come Perl)
●
...ed ha Java nel nome!

https://www.destroyallsoftware.com/talks/wat

..ed alcuni, altri, fatti.....ed alcuni, altri, fatti...

“Any application that can be written in JavaScript, will eventually be
written in JavaScript”
https://blog.codinghorror.com/the-principle-of-least-power/
Legge di AtwoodLegge di Atwood

MongoDB, CouchDB, Elastic,.. NodeJS
JSON, GraphQL, ..
Electron Cordova, ReactNative, PWA. Javascript,Jquery,Typescript, React,...

ECMA...che?ECMA...che?
●
1997 : ECMAScript 1
●
1998:ES2
●
1999: ES3
●
ES4(abbandonato)
●
2009: ES5 = ES 3.1
●
2015 : ES6 = ES2015
●
2016: ES2016 = ES7
●
2017: ES2017 = ES8

EmbeddedEmbedded
<script>
/*
codice ed istruzioni javascript
*/
</script>

LinkedLinked
<script src="libreria.js"></script>

VariablesVariables
var nomeVariabile = valore;
var nome = “Giuseppe Pizzimenti”;

If..elseIf..else
if (condizione 1) {
istruzioni;
}
else if (condizione 2) {
istruzioni;
} else {
istruzioni;
}

ForFor
var i;
for (i=0; i<3; i++) {
/*
istruzioni che verranno ripetute 3 volte
*/
}

WhileWhile
while (condizione) {
istruzioni;
};
do {
istruzioni;
}
while (condizione);

ArraysArrays
var nomeArray;
nomeArray = [valore1,valore2,...];

ArraysArrays
var nomi = [“Giuseppe”,“Francesco”],
cognomi = [“Pizzimenti”,”Micali”];
var giuseppe = nomi[0] + “ “ + cognomi[0],
francesco = nomi[1] + “ “ + cognomi[1];
nomi.push(“Andrea”); //unshift
cognomi.push(“Nucita”);
nomi[2]=”Gaspare”;
cognomi[2]=”Novara”;
nomi.pop(); //shift
cognomi.pop();
for (var i=0; i<nomi.length; i++) {
alert(nomi[i]);
}

FunctionsFunctions
function nomeFunzione(argomenti) {
istruzioni;
}

FunctionsFunctions
function calcolaIVA(prezzo,aliquota){
var iva = (prezzo/100)*aliquota;
return iva;
}
function mostraIVA(){
var ivaDaMostrare = calcolaIVA(100,22);
alert(ivaDaMostrare);
}
<button onclick="mostraIVA()">
clicca qui per visualizzare l'IVA
</button>

ObjectsObjects
var oggetto = {
proprieta: valore;
metodo: function () { ... };
}

ObjectsObjects
var person = {
name: ['Giuseppe', 'Pizzimenti'],
age: 47,
gender: 'maschio',
languages: ['css', 'javascript'],
bio: function() {
alert(this.name[0] + ' ' + this.name[1]
+ ' ha ' + this.age + ' anni e usa '
+ this.languages[0]
+ ' e ' + this.languages[1] + '.');
},
greeting: function() {
alert('Ciao! Io sono ' + this.name[0] + '.');
}
};

JSONJSON
{
"associazione": "Lo Stretto Digitale",
"link": "http://www.lostrettodigitale.org",
"territorio": "Messina – Reggio Calabria",
"argomenti": [
{
"linguaggio": "CSS",
"inizio": 9
"fine": 11
},
{
"linguaggio": "JS",
"inizio": 11
"fine": 13
}
]
}

DOMDOM
“...ilDocument Object Model(spesso abbreviato come DOM),
letteralmente “modello a oggettideldocumento”, è una forma di
rappresentazione dei documenti strutturati come modello orientato
agli oggetti....”
https://it.wikipedia.org/wiki/Document_Object_Model

DOMDOM

<HTML>
<HEAD>
<TITLE>
My Document
</TITLE>
</HEAD>
<BODY>
<H1>Header</H1>
<P>
Paragraph
</P>
</BODY>
</HTML>

Selezionare elementi del DOMSelezionare elementi del DOM
● document.getElementByID()
● <element>.getElementByTagName()
● <element>.getElementByClassName()
● <element>.querySelector();
● <element>.querySelectorAll();

Navigare il DOMNavigare il DOM
● document.documentElement;
● <element>.parentNode
● <element>.childNodes[indice]
● <element>.firstChild
● <element>.lastChild
● <element>.nextSibling
● <element>.previousSibling

Modificare il DOMModificare il DOM
● <element>.firstChild.nodeValue
● <element>.innerHTML
● <element>.innerHTML=“<p>Testo</p>”

Modificare il DOMModificare il DOM
● document.createElement(tagname)
● <element>.createTextNode(text)
● <element>.appendChild(element)
● <element>.insertBefore(new,previous)
● <element>.removeChild(element)

WEB APIWEB API
● FILE
● VIDEO
● AUDIO
● 2D/3D/Vector
● GEOLOCATION
● Web workers
● Web sockets
● Local Storage
● Service workers
● ...

EventsEvents
function calcolaIVA(prezzo,aliquota){
var iva = (prezzo/100)*aliquota;
return iva;
}
function mostraIVA(){
var ivaDaMostrare = calcolaIVA(100,22);
alert(ivaDaMostrare);
}
var btn = document.querySelector('button');
btn.addEventListener('click', mostraIVA);

Synthetic EventsSynthetic Events
function calcoloMoltoMoltoLungo(){
var eventStart = new Event('startCalcolo'),
eventStop = new Event('stopCalcolo');
document.dispatchEvent(eventStart);
...
document.dispatchEvent(eventStop);
}
document.addEventListener('startCalcolo', function (e)
{ alert(“Iniziato!”); }, false);
document.addEventListener('stopCalcolo', function (e)
{ alert(“Finito!”); }, false);

Custom EventsCustom Events
function calcoloMoltoMoltoLungo(){
var eventStart = new CustomEvent('startCalcolo', { startTime: new Date() } );
var eventStop = new CustomEvent('stopCalcolo', { stopTime: new Date() } );
document.dispatchEvent(eventStart);
...
document.dispatchEvent(eventStop);
}
document.addEventListener('startCalcolo', function (e)
{ alert(“Iniziato il “ + e.startTime + ”!”); }, false);
document.addEventListener('stopCalcolo', function (e)
{ alert(“Finito il “ + e.stopTime + ”!”); }, false);

Callback HellCallback Hell
costruireModello(function(){
...
ordinarePezzi(function(){
...
incollarePezzi(function(){
...
dipingereModello();
})
})
});

PromisesPromises
var calcoloLungoEdIncerto = new Promise(function(resolve,reject){
var risolto = ...;
if(risolto)
resolve("risolto");
else
reject("non risolto");
});
CalcoloLungoEdIncerto
.then(function(stato){
alert('Il calcolo è stato: ' + stato);
})
.catch(function(stato){
alert('Il calcolo è stato: ' + stato);
});

PromisesPromises
var ordinarePezzi = function(){
return new Promise(function(resolve,reject){
resolve("fatto");
});
}
var incollarePezzi = function(){
resolve('fatto');
});
}
var dipingereModello = function(){
resolve('fatto');
});
}
var costruireModello = function(){
ordinarePezzi()
.then(incollarePezzi)
.then(dipingereModello)
.then(function(){
alert('Completato!');
});
}

Fetch APIFetch API
fetch("http://www.lostrettodigitale.org")
.then(function(response) {
if (response.ok) {
alert("Contenuto ricevuto");
}
})
.catch(error => alert("Si è verificato un
errore!"))
/* arrow function*/

Fetch APIFetch API
fetch("http://www.lostrettodigitale.org").then(function(response) {
if (response.ok) {
alert("Contenuto ricevuto");
}
if (response.status >= 100 && response.status < 200) {
alert("Informazioni per il client");
}
alert("Redirezione");
}
alert("Richiesta errata");
}
alert("Errore sul server");
}
}).catch(error => alert("Si è verificato un errore!"))

Fetch APIFetch API
var url = "http://www.lostrettodigitale.org/iscriviti";
var richiesta = new Request(url, {
method: "post",
headers: new Headers({
"Content-Type": "application/json"
}),
body: JSON.stringify({
titolo: "Un articolo",
autore: "Mario Rossi"
})
});
fetch(richiesta).then(...).catch(...)

ASYNC/AWAITASYNC/AWAIT
function getIscritto(name) {
fetch("/iscritto/" + name).then(response => {
alert(response);
}).catch(error => alert("Si è verificato un errore!"));
}
async function getIscritto(name) {
try { // gestione errore
var response = await fetch("/iscritto/" + name);
alert(response);
} catch (e) {
alert("Si è verificato un errore!")
}
}

async function getBlogAndPhoto(userId) {
try {
let utente = await fetch("/utente/" + userId);
let blog = await fetch("/blog/" + utente.blogId);
let foto = await fetch("/photo/" + utente.albumId);
return {
utente,
blog,
foto
};
} catch (e) {
console.log("Si è verificato un errore!");
//solo per sviluppatore
}
}

async function getBlogAndPhoto(userId) {
try {
let utente = await fetch("/utente/" + userId);
let result = await Promise.all([
fetch("/blog/" + utente.blogId),
fetch("/photo/" + utente.albumId)
]);
return {
utente,
blog: result[0],
foto: result[1]
};
} catch (e) {
console.log("Si è verificato un errore!")
}

http://www.typescriptlang.org/

https://facebook.github.io/react-native/

https://developers.google.com/web/progressive-web-apps/

https://www.packtpub.com/packt/free-ebook/thinking-in-css

https://www.sitepoint.com/premium/l/10-free-ebooks-b

https://eloquentjavascript.net/

https://github.com/getify/You-Dont-Know-JS

CSS & JS : from zero to Hero

Recommended

Recommended

More Related Content

Similar to CSS & JS : from zero to Hero

Similar to CSS & JS : from zero to Hero (18)

More from Giuseppe Pizzimenti

More from Giuseppe Pizzimenti (6)

CSS & JS : from zero to Hero