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
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
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!
Corso rivolto alla comprensione delle caratteristiche di HTML, XHTML, CSS nel pieno rispetto degli standard e con consapevolezza della compatibilità cross-browser.
Piccola guida ai primi passi a WP.
- Come funziona un sito web
- Accenni di definizione di HTML - CSS - PHP
- wp.com VS wp.org
- Come installare un website in WP
- Scrivere un post
- Scrivere un articolo
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
I linguaggi del web - seconda edizione (1° giornata)Diego La Monica
Contenuti del modulo:
- Cos’è HTML
- I tag e la loro rappresentazione
- Differenze tra le grammatiche HTML e XHTML
- La suddivisione di una pagina
- Strutturare una pagina autodescrittiva
- HTML 5
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with 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.
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
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
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!
Corso rivolto alla comprensione delle caratteristiche di HTML, XHTML, CSS nel pieno rispetto degli standard e con consapevolezza della compatibilità cross-browser.
Piccola guida ai primi passi a WP.
- Come funziona un sito web
- Accenni di definizione di HTML - CSS - PHP
- wp.com VS wp.org
- Come installare un website in WP
- Scrivere un post
- Scrivere un articolo
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
I linguaggi del web - seconda edizione (1° giornata)Diego La Monica
Contenuti del modulo:
- Cos’è HTML
- I tag e la loro rappresentazione
- Differenze tra le grammatiche HTML e XHTML
- La suddivisione di una pagina
- Strutturare una pagina autodescrittiva
- HTML 5
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Dispense del corso IN530 "Sistemi per l'elaborazione delle informazioni" presso il Corso di Laurea in Matematica dell'Università degli Studi Roma Tre.
[http://www.mat.uniroma3.it/users/liverani/IN530/]
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?
2. whoami
• Matteo Magni
• Web Developer & System Administrator
• http://www.linkedin.com/in/matteomagni
• http://twitter.com/ilbonzo
• matteo@magni.me
3. Corso
Web Master & Web Designer
• HTML e CSS
• Dreamweaver
• SEO e Web Marketing
• Grafica per il Web
• Web Usability
• Javascript
• HTML5 e Css3
• jQuery
• Joomla
• [Progetto]
4. Nascita del World Wide Web
Tim Berners-Lee e Robert
Cailliau nel 1990 misero a punto
il protocollo HTTP e una prima
specifica del linguaggio HTML,
sulla base dei quali sono stati
realizzati un primo programma
browser/editor ipertestuale per il
WWW, utilizzato all'interno del
CERN nel 1991. (Wikipedia)
5. W3C :Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT
(Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dal
quale proveniva), un'associazione di nome World Wide Web Consortium (abbreviato
W3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Web
e di aiutare il web a sviluppare tutte le sue potenzialità.
• Il web ormai non è più uno strumento per «appassionati», ma è diventato parte integrante della vita
comune delle persone. Attualmente esistono diversi tipi di apparecchi (come cellulari e PDA) che
accedono ad internet. Ciò è possibile solo grazie ad un «comune linguaggio di comunicazione» (nello
specifico, il protocollo di comunicazione e linguaggio in cui è scritto il file) tra server, PC ed altri dispositivi.
Il W3C si occupa di aggiornare e creare queste specifiche.
• Il Web ha un potenziale praticamente illimitato, ed apre nuove strade ai portatori di handicap, anche gravi.
Il W3C cerca di studiare i modi per rendere quanto più agevole l'accesso al web da parte di questa
categoria di persone.
• Il web è unico perché è libero. Chiunque può creare un documento html e metterlo liberamente online. Il
W3C cerca di evitare che interessi di qualsiasi genere possano porre un freno a questa assoluta libertà
ed è anche un sito per aiutare a sviluppare le potenzialità comunicative degli esseri umani.
6. HTTP
• L'HyperText Transfer Protocol
(HTTP) (protocollo di
trasferimento di un ipertesto) è
usato come principale sistema per
la trasmissione d'informazioni sul
web. Le specifiche del protocollo
sono gestite dal World Wide Web
Consortium (W3C). Un Server
HTTP generalmente resta in
ascolto sulla porta 80 usando il
protocollo TCP. (Wikipedia)
7. Client - Server
• Il client effettua una
Request al server
che a sua volta
risponderà con una
Response.
• Il tutto in modo
Stateless
8. HTML
• L'HyperText Markup Language (HTML) (traduzione letterale:
linguaggio di descrizione per ipertesti) è il linguaggio solitamente
usato per i documenti ipertestuali disponibili nel World Wide Web. In
tali documenti, un tratto di testo può essere contrassegnato
inserendo delle etichette, tag, che ne descrivono la funzione, il
colore, il link, o altre caratteristiche. Il contenuto servito dai siti web
in seguito a una richiesta dell'utente solitamente consiste di un
documento HTML: un web browser scarica da uno o più web server
il contenuto HTML ed eventuali documenti collegati e li elabora,
ossia ne interpreta il codice, al fine di generare la visualizzazione
della pagina desiderata sullo schermo del computer. (wikipedia)
9. Browser
• Il browser è un
software che ha la
capacità di
interpretare l'HTML
e di visualizzarlo in
forma di ipertesto.
12. Markup language
L'HTML non è un linguaggio di
programmazione, ma un
linguaggio di markup, ossia
descrive le modalità di
impaginazione, formattazione o
visualizzazione grafica (layout)
del contenuto, testuale e non, di
una pagina web. Tuttavia, l'HTML
supporta l'inserimento di script e
oggetti esterni quali immagini o
filmati. (wikipedia)
13. SGML -Semantica degli
elementi
Lo Standard Generalized Markup Lo scopo è quello di marcare gli
Language (SGML). elementi di un documento web
La principale funzione di SGML è la secondo le sue caratteristiche di
stesura di testi chiamati Document contenuto. Seguendo questo
Type Definition, in acronimo DTD, approccio avremo una marcatura
ciascuno dei quali definisce in modo semantica, viceversa avremo una
rigoroso la struttura logica che marcatura difficile da comprendere e
devono avere i documenti di un incoerente.
determinato tipo; si dice che questi
documenti rispetto a SGML
costituiscono un linguaggio obiettivo,
ovvero una applicazione.
15. Cosa fa il DTD
• Definisce gli elementi leciti all'interno del documento. Non si possono usare
altri elementi se non quelli definiti. Una specie di "vocabolario" per i file che
lo useranno.
• Definisce la struttura di ogni elemento. La struttura indica cosa può
contenere ciascun elemento, l'ordine, la quantità di elementi che possono
comparire e se sono opzionali o obbligatori. Una specie di "grammatica".
• Dichiara una serie di attributi per ogni elemento e che valori possono o
devono assumere questi attributi.
• Fornisce infine alcuni meccanismi per semplificare la gestione del
documento, come la possibilità di dichiarare entity e la possibilità di
importare parti di altri DTD.
16. Tecnologie Client Side
• HTML → contenuto
• Css →visualizzazione
• Javascript → interazione
17. HTML 4
HTML 4.01 Specification
W3C Recommendation 24 December 1999
http://www.w3.org/TR/html4/
In italiano
http://www.diodati.org/w3c/html401/cover.html
18. Tag HTML
Apertura e chiusura Indentazione
<tag>contenuto</tag> 1) <tag1>
<tag2>contenuto</tag2>
Tag senza “contenuto”
<tag3/>
<tag/>
</tag1>
Annidamento 2) <tag1><tag2>contenuto</tag2>
<tag3/></tag1>
<tag1>
<tag2>Contenuto</tag2> L'output è uguale ma il primo è
molto più leggibile per il
<tag3/> programmatore
</tag1>
19. Commenti
• I commenti sono porzioni
di codice che il browser
ignora e non fa vedere
all'utente. Tale codice
<!
Io sono un commento risulta invece molto utile
HTML per il programmatore al
> fine di spiegare le
porzioni di codice.
20. Attributi
Gli attributi vengono usati per aggiungere una caratteristica o una
proprietà ad un elemento.
Un attributo è una coppia nome-valore che può essere presente
all'interno del tag di apertura di un elemento, dopo il nome dell'elemento
stesso.
<img src=”pippo.png”/>
<a href=”http://google.com”>
Google
</a>
21. Struttura di un documento
HTML
<!DOCTYPE HTML PUBLIC
"//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/stric
t.dtd">
<HTML>
<HEAD>
<TITLE>Il mio primo
documento HTML</TITLE>
</HEAD>
<BODY>
<P>Ciao mondo!</P>
</BODY>
</HTML>
22. Elementi documento HTML
• L'elemento HTML
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.3
• L'elemento HEAD
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.1
• L'elemento TITLE
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.2
• L'elemento BODY
– http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.1
24. Editor (2)
Con syntax highlighting si intende la caratteristica di un software, solitamente editor di
testo, di visualizzare un testo con differenti colori e font in base a particolari regole
sintattiche. Questa caratteristica, utilizzata soprattutto per il codice sorgente, facilità la
scrittura in un linguaggio strutturato come un linguaggio di programmazione o un
linguaggio di markup che dispone di una sintassi e di una grammatica precise.
26. Righe e Paragrafi
• <p>
• <br/>
• <pre>
<pre>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</pre>
27. Entità HTML
http://it.wikibooks.org/wiki/HTML/Entit%C3%A0
• Le entità sono dei particolari codici che servono per rappresentare
caratteri speciali, i quali potrebbero avere problemi di visualizzazioni
su computer e sistemi operativi differenti. Il codice per inserire una
entità nella pagina è: &entità.
< <
> >
Ci permette di fare:
<pre> → <pre>
<br/> → <br/>
29. Elementi di Testo
http://www.diodati.org/w3c/html401/struct/text.html
– EM: Denota enfasi.
– STRONG: Denota un'enfasi più forte
– CITE: Contiene una citazione o un riferimento ad altre fonti.
– DFN: Indica che questa è l'istanza di definizione del termine racchiuso.
– CODE: Designa un frammento di codice informatico.
– SAMP: Designa un campione prodotto da programmi, script, ecc.
– KBD: Denota del testo che deve essere immesso dall'utente.
– VAR: Denota un'istanza di una variabile o di un argomento di
programma.
– ABBR: Denota un'abbreviazione (es., WWW, HTTP, URI, Mass., ecc.).
– ACRONYM: Denota un acronimo (es., WAC, radar, ecc.).
30. Citazioni
http://www.diodati.org/w3c/html401/struct/text.html#h-9.2.2
BLOCKQUOTE
• I programmi utente di tipo visuale generalmente
riproducono BLOCKQUOTE come un blocco rientrato.
Q
• I programmi utente di tipo visuale devono garantire che il
contenuto dell'elemento Q sia riprodotto racchiuso tra
virgolette. Gli autori non dovrebbero mettere le virgolette
all'inizio e alla fine del contenuto dell'elemento Q.
Presentazione Moduli corso - Spiegazione del progetto A partire dal modulo di javascript ci sarà l'ideazione e la realizzazione di un progetto concreto per valutare il lavoro.
Un po' di storia Come e da chi è nato il web, diciamo 1.0
Facciamo un passo indietro, che tecnologie hanno permesso di far nascere il web? La prima tecnologia fondamentale è il protocollo HTTP della famiglia dei protocolli TCP State Less → protocollo che non ricorda lo stato, per questo immediato e facile da gestire. Si basa sul sistema Request – Response Ad ogni chiamata al server segue una response di tale server al nostro client.
Il server dopo la request chiude la comunicazione
Questo è il software con cui noi principalmente ci interfacciamo al web. Sia questo su desktop, netbook, tablet, smartphone.
Insomma quello che vediamo sul browser non è esattamente quello che ci passa il server. Il borwser mette una “seconda” pelle al codice prima di farcelo vedere
Una volta faceva tutto l'HTML ma poi si è capito che il modello “unico” era sbagliato Ci voleva separazione dei compiti
Quasi come un modello MVC HTML → model CSS → view Javascript → controller Pattern/paradigma noto in programmazione che permette di separare bene le responsabilità
HTML è una specifica vecchia, per questo si sta lavorando su HTML5
Il codice è tutto caricato su github e lo sarà nelle prossime lezioni