Tecnologie Web : HTML

Da Wiki Corso Web.

Indice

STATO=Libero

Cos’è? [Luigi La Torre***]

HTML (HyperText Markup Language) è la linguaggio utilizzato per la pubblicazione di ipertesti sul World Wide Web. Si tratta di un formato non proprietario basato su SGML (Standard Generalized Markup Language). L'ipertesto può essere creato ed elaborato da una vasta gamma di strumenti, dai semplici editor di testo a sofisticati strumenti di editor WYSIWYG (What You See Is What You Get).

HTML utilizza diversi componenti chiave chiamati Tag come <h1> e </ h1> per strutturare il testo in intestazioni, paragrafi, liste, collegamenti ipertestuali, ecc.

I principali tag HTML:

<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="17" _fck_mw_template="true">

<img src="/images/a/aa/Html-cheat-sheet.png" _fck_mw_filename="Html-cheat-sheet.png" _fck_mw_location="center" _fck_mw_width="1000" _fck_mw_type="thumb" alt="Html-cheat-sheet.png" class="fck_mw_frame fck_mw_center" />

Storia dell'HTML [Morgan Salvaggio]

Nel 1980, Tim Berners Lee (inventore del WWW) propone un progetto al CERN che si basa sull'ipertesto, ovvero il concetto base di internet: i documenti sono collegati fra loro mediante link ipertestuali. Questo sistema doveva favorire la comunicazione fra i vari ricercatori che collaborano col CERN.

Dopo un periodo passato a lavorare altrove, Tim Berners Lee torna al CERN nel 1984. Nel 1989, anche grazie al fatto che il CERN in quel periodo era uno dei più importanti nodi della rete, Berners Lee propone di collegare l'idea dell'ipertesto ad internet.

Scrisse una proposta iniziale nel marzo del 1989 e nel'90, con l'aiuto di Robert Cailliau, produsse il documento finale, che fu accettato dal suo manager, Mike Sendall.

Berners Lee iniziò quindi a lavorare al progetto, entrando nella storia come l'inventore del World Wide Web, per il quale inventò il primo browser e editor HTML, chiamato World Wide Web. Inoltre, creò il primo server, chiamato HTTPD (HyperText Transfer Protocol Daemon) e costruito con un computer NeXtStep.

il primo browser Il primo browser

Il primo sito internet in assoluto era http://info.cern.ch/ e fu messo online il 6 agosto 1991. Includeva un articolo su cos'era il WWW, come procurarsi un browser, e creare un server. Inoltre, era la prima directory del mondo, dato che Berners Lee manteneva una lista contenente i vari siti che nascevano dopo il suo.

Berners-Lee fondò nel 1994 il World Wide Web Consortium (W3C), presso il MIT, in Massachusetts, per riunire varie aziende con lo scopo di inventare e produrre standard per il web, in modo da migliorarne la qualità. Nel 2004 Berners Lee ha accettato una carica all'university of Southampton, nel Regno Unito, dove lavorerà al suo nuovo progetto, chiamato Semantic Web.

Berners-Lee ha donato la sua idea all'umanità, senza specularci sopra. Il W3C ha deciso di continuare su questa strada, proponendosi di mantenere i loro standard pubblici e gratuiti, in modo che chiunque possa servirsene.




Web Standards Project [Chiara Frantini]

'Web Standards Project' (WaSP) è un gruppo di webdesigner professionisti che si dedica a diffondere e incoraggiare l'uso degli standard web raccomandati dal W3C.

Fondato nel 1998, il Web Standards Project si occupa di ridurre il costo e la complessità dello sviluppo di pagine web, incrementando l'accessibilità, la durata e attuabilità a lungo termine dei documenti pubblicati sul Web.


Attività [Chiara Frantini]

L'attività più importante del WaSP è stata la creazione dei test di interoperabilità e aderenza agli standard per i browser.

- Il test <a href="http://it.wikipedia.org/wiki/Acid1">Acid n°1</a> permette ai browser e agli altri strumenti di rendering di provare la compatibilità con le specifiche HTML 4.0 e CSS 1
- Il test <a href="http://it.wikipedia.org/wiki/Acid2">Acid n°2</a> permette ai browser e agli altri strumenti di rendering di provare la compatibilità con le specifiche CSS 1 e 2
- Il test <a href="http://it.wikipedia.org/wiki/Acid3">Acid n°3</a> permette ai browser e agli altri strumenti di rendering di provare la compatibilità con le specifiche CSS 2.1, DOM e EcmaScript.

Versioni [Luigi La Torre]

Html 2.0

<a href="http://www.w3.org/MarkUp/html-spec/">HTML 2.0</a> (RFC 1866) è stato sviluppato da IETF (Internet Engineering Task Force) nel 1996. Esso ha fissato il core dello standard HTML. Dopo il rilascio della RFC 2854, RFC 1866 è diventato obsoleto.

Html 3.2

<a href="http://www.w3.org/TR/REC-html32">HTML 3.2</a> ha aggiunto nuove features come tabelle, applet, testo attorno alle immagini, apici e pedici, essendo sempre compatibile con lo standard <a href="http://www.w3.org/MarkUp/html-spec/">HTML 2.0</a>.

Html 4.0

Nel 1997 è stata pubblicata la prima release. Una seconda versione è stata rilasciata in aprile 1998 con modifiche limitate alle correzioni redazionali. Tale specifica è stata sostituita, attualmente, dallo standard <a href="http://www.w3.org/TR/html401/">HTML 4.01</a>.

Html 5.0

Lo standard Html 5.0 è stato pubblicato nel gennaio del 2008. HTML5 si propone come evoluzione dello standard <a href="http://www.w3.org/TR/html401/">HTML 4.01</a>. La seguente immagine illustra in breve l'introduzione delle nuove funzionalità di HTML5 e i principali browser supportati. In fondo, invece, è comparato HTML5 e Flash.

Web

Esempi Html 5.0

Di seguito i principali siti sviluppati con html 5.0 che maggiormente mi hanno colpito:

Test speed browser

Ecco un video test HTML5 che mostra un confronto dei principali browser:

<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="14" _fck_mw_template="true">

Inoltre, a questo <a href="http://ie.microsoft.com/testdrive/Performance/Paintball/Default.html">link</a> è possibile testare i propri browser per verificarne il migliore nell'utilizzo della tecnologia HTML5.

DIVERTENTI UTILIZZI DI HTML 5.0 [Melissa Colombo***]

Google è da sempre una delle aziende che basa il proprio successo sull’innovazione e sulla sperimentazione. HTML5 è, a detta di molti, il futuro del web, e Google sta già sperimentando ampiamente con il nuovo standard. Per far conoscere le potenzialità del linguaggio è nata Google Gravity, una pagina web che letteralmente crolla sotto i nostri occhi, e ci permette di giocare con la gravità e con tutti gli oggetti presenti nella homepage di Google.

Provatelooo: http://mrdoob.com/projects/chromeexperiments/google_gravity/

6732524401_8e6ac32eee_b.jpg

ALTRI ESEMPI [Luigi La Torre]

Provate a scrivere nella barra di ricerca di Google "do + spazio" e attendere qualche secondo. La pagina del browser effettuerà una rotazione.

LA MUSICA SPOSA HTML5 CON STUPEFACENTI RISULTATI[Melissa Colombo]

Alcune band sfruttano la tecnologia HTML5 e le competenze dei tecnici Google, per offrire ai propri fan un’esperienza interattiva che supera il tradizionale concetto di videoclip.

All’inizio c’è stato The Wilderness Downtown degli Arcade Fire, due anni dopo ci riprovano gli Ok Go con All Is Not Lost,entrambi hanno aderito al Chrome Experiments e hanno dato vita, nel primo caso, ad un video che sfruttando l’integrazione con Google Maps dava allo spettatore la possibilità di ambientare il video in una città a propria scelta, magari la propria; nel secondo caso trasformando l’utente nel regista del video che, digitando una frase a propria scelta dal sito ufficiale del video, “obbliga” la band a riprodurla lettera per lettera, tra mille finestre pop-up.

The Wilderness Downtown degli Arcade Fire[Melissa Colombo]

6888858155_6cb9d618c6_z.jpg <br/>
Il sito: http://www.thewildernessdowntown.com/&nbsp;
Il video:
<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="8" _fck_mw_template="true">

All Is Not Lost degli Ok Go [Melissa Colombo]

6888944013_27737079a5_z.jpg

Il sito: http://www.allisnotlo.st/index_en.html <br/>

Il video:
<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="12" _fck_mw_template="true">

HTML5 rivoluziona anche il modo di disegnare [Melissa Colombo]

Provate!

http://mrdoob.com/125/Multiuser_Sketchpad 6894036667_7b62d66107.jpg

6894027023_82eb80a29e.jpg"

Visita il sito:

http://multisketchpad.posterous.com/


Esempi di Web del Futuro [Di Donato Leonardo]

HTML5 oltre a diminuire la varietà di standard adottati per il web e portare quindi a una semplificazione dei processi di sviluppo, porta con sè, grazie alle caratterstiche di cui è dotato, una serie di possibilità inimmaginabili e realizzabili solo ed esclusivamente tramite l'utilizzo di software di terze parti che spesso richiede un player e genera quindi problemi di standardizzazione e compatibilità.

Ecco alcuni esempi di cosa è possibile creare con HTML5.


Z-Type - <a href="http
//www.phoboslab.org/ztype/">link</a> </dt>
E' un gioco di typing interamente fatto in HTML5 e Javascript, provatelo: è entusiasmante (ed è strabiliante quanto sia leggero anch'essendo un gioco) ! </dd>
Impress - <a href="http
//bartaz.github.com/impress.js/#/bored">link</a> </dt>
Realmente impressionante! Un nuovo paradigma di navigazione che supera la fantasia è oramai possibile grazie a HTML5, CSS3 e JS. Usate la barra spaziatrice per visualizzare un sito web davvero particolare (e anche in 3D!) che tuttavia non perde nulla in usabilità. </dd>
Bookcase - <a href="http
//workshop.chromeexperiments.com/bookcase/">link</a> </dt>
HTML5 + WebGL ed ecco questo scaffale 3D e a spirale su cui visualizzare i propri libri. </dd>


Editor HTML Online [Luigi La Torre***]

<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="10" _fck_mw_template="true">

<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="8" _fck_mw_template="true">

Altri HTML Online Editor [Di Donato Leonardo]

Rendera [Di Donato Leonardo] </dt>
Un altro editor online interessante che supporta non solo per HTML5 ma anche per HAML, CSS e JavaScript è <a href="http://rendera.heroku.com/">Rendera</a>.
I seguenti sono snippet creati al fine di visualizzare le nuove feature dell'HTML5: </dd>



Maqetta [Di Donato Leonardo] </dt>
Un editor WYSIWYG per HTML5, CSS e JavaScript davvero promettente (richiede la registrazione) è Maqetta.
E' possibile provarlo in anteprima a questo <a href="http://maqetta.org:55556/maqetta/">link</a>. Non appena aperto sarà visualizzabile un progetto di esempio dal quale è possibile apprendere le funzionalità base. </dd>


<img src="/images/thumb/d/d7/Maquetta.png/1000px-Maquetta.png" _fck_mw_filename="Maquetta.png" _fck_mw_width="1000" alt="Maquetta.png" />


WYSIWYG Widgets WordPress Plugin Tutorial [Oscar Bertone Giordano]
<a href="http://socialmedia101.artizondigital.com/2011/06/wysiwyg-widgets-wordpress-plugin-tutorial-html-free-text-editing-in-a-text-widget/">HTML Free Text Editing in a Text Widget</a>

<a href="http://wikicorsoweb.altervista.org/index.php/Tecnologie_Web">back</a>

Html vs Flash [Alessio Bellino]

Flash o non Flash?

Flash è una tecnologia potentissima, e può essere dotato anche di un lato server-side (che può essere anche PHP, ma è disponibile anche un linguaggio proprietario) per la gestione di contenuti dinamici.

Dove è corretto utilizzarlo e dove se ne può (o se ne deve) fare a meno?

E’ questo il punto controverso dove designers e “tecnologi” puri si scontrano.

E' bene fare delle considerazioni:

Queste tre premesse sono utili ad un analisi dettagliata.

La struttura è determinata da una serie di link studiati in base alla rappresentazione logica dei contenuti.

(La strutturazione di un sito web sembra banale; è invece necessario uno studio attento dei contenuti per poterne determinare una struttura logica – insieme dei link – funzionale, user-friendly e priva di ridondanze.)

I motori di ricerca non leggono i contenuti presenti in un file Flash (ad oggi solo Google riesce a leggere – in percentuali molto basse che dipendono dal grado di complessità dell’appicativo Flash – alcuni contenuti basati su Flash).

Il grado di importanza (ranking) attribuito ad un contenuto da un motore di ricerca dipende, tra l’altro, dal grado di strutturazione dello stesso contenuto: un contenuto che è strutturato ad un livello più basso avrà meno importanza e viceversa (ad esempio la home page ha un’importanza maggiore, le pagine figlie annidate a livelli più bassi e quindi più nascoste, avranno un importanza minore).

Per un motore di ricerca è impossibile determinare la struttura di un sito realizzato in Flash ed è quindi impossibile attribuire una determinata “importanza” ad ogni singolo contenuto.

Il grado di importanza dipende anche dalla struttura dell’URL:

www.bellinux.gov/importante/menoimportante/ancoramenoimportante/.

Un sito web realizzato in Flash non ha una strutturazione ad URL: tutto è concentrato in un unica pagina (si può ovviare a questo svantaggio creando una struttura e gestendo manualmente i contenuti Flash dedicati ad ogni pagina ma si perde la praticità del Flash!)

In conclusione, per “insegnare” ai motori di ricerca la logica interna di un sito web è indispensabile trovare altre soluzioni.

Un vantaggio (che si trasforma in uno svantaggio) di Flash è la praticità. Ma è sempre così?

Capita di dover impostare modifiche relativamente importanti ad un sito web; un implementazione logica corretta permette di effettuare le modifiche in tempi brevissimi e nella maggior parte dei casi direttamente online (se si utilizza un CMS).

Per modificare un sito in Flash è invece necessario editarne il cuore all’interno di Adobe Flash con i svantaggi che ne derivano.

Il vantaggio di una maggiore praticità iniziale si trasforma in uno svantaggio nel momento in cui si ha la necessità di effettuare, anche piccole modifiche, al motore di gestione dei contenuti (quando c’è!) interno del sito web.

Un altro svantaggio di Flash, che potrebbe essere considerato irrilevante (ed in effetti, per un designers lo sarebbe – per un “tecnologo” no!) è la velocità di esecuzione.

Flash ha però anche molti vantaggi: ha una gestione della grafica completa ed efficientissima e riesce persino a gestire le librerie DirectX e OpenGL per la creazioni di grafica 3D avanzata, persino giochi completi!

Per la gestione del 2D è praticamente possibile fare tutto con gli strumenti che il browser mette a disposizione (ogni browser, anche internet explorer 6!) ha un motore per il rendering di grafica vettoriale molto avanzato e gestibile tramite JavaScript.

Tuttavia è evidente la praticità d’uso di Flash anche per questa categoria di grafica; la gestione del 2D tramite librerie javascript può divenire davvero molto complessa.

Come fare quindi per ovviare agli svantaggi di Flash e usufruire dei notevoli vantaggi tecnologici che mette a disposizione?

La strada è semplice (e ovvia): utilizzare combinatamente alla tecnologia Flash le tecnologie HTML CSS e AJAX imponendosi di usare Flash solo per contenuti non diversamente gestibili ed in ogni caso non utilizzando mai Flash per la gestione della strutturazione logica (link, menù di scelta e quant’altro) e per la gestione di contenuti testuali.

Le tecnologie di rendering di tutti i browser consentono infatti di combinare le tecnologie in un “corpus” unico perfettamente amalgamato (ad esempio è addirittura possibile gestire le trasparenze tramite Flash avendo come sfondo una pagina HTML gestita dinamicamente tramite AJAX – e quindi in potenziale evoluzione – in maniera del tutto trasparente!)

La praticità (che in molti casi è effettiva) che la tecnologia Flash offre, in ambito lavorativo, è comunque molto elevata e ne giustifica l’uso a patto di rispettare alcune piccole regole guidate dal buon senso: uso, non abuso!


The scale of the Universe 2 by Cary Huang - Tecnologia Flash [Chiara Frantini]

Un anno (2011) fa veniva pubblicato "The Scale of the Universe" : una bellissima animazione flash dove si poteva passare dagli elementi più piccoli, a quelli più grandi del creato e capirne e immaginarne le proporzioni.

Poco fa (2012) è stato pubblicato "The Scale of the Universe 2", lo stesso concetto ma rivisto graficamente, aggiornato nei contenuti, con nuovi soggetti e con la possibilità di approfondirne la conoscenza semplicemente cliccandoci sopra.

E' un vero viaggio, dall'infinitamente piccolo all'infinitamente grande.


<a href="http://images.4channel.org/f/src/589217_scale_of_universe_enhanced.swf">The Scale of the Universe 2</a>

HTML5: due browser su tre pronti a mollare flash [Aurora Ripamonti]

Le ultime analisi sulla compatibilità con HTML5 mostrano con chiarezza che utenti e aziende sono quasi pronti ad abbandonare Flash in favore di HTML5 per la riproduzione di video. A frenare il salto sono le vecchie versioni di Internet Explorer.
Una ricerca svolta da LongTailVideo  mostra che la maggior parte dei browser in circolazione sono pronti al passaggio, con poche e trascurabili differenze tra le varie versioni e dispositivi.
I due terzi del mercato cono compatibili con i nuovi standard, con l'eccezione delle vecchie versioni di Internet Explorer; Microsoft IE 6,7 e 8 rappresentano il 28% del mercato, e quindi sono praticamente gli unici responsabili se non si raggiunge il 100% nella compatibilità con HTML5. 

Per quanto riguarda il mobile i video HTML5 sono gli unici che funzionano bene su smartphone e tablet, anche se tecnicamente Android può riprodurre anche quelli in Flash. 

6795446101_9b08ff9314.jpg

Un aspetto rilevante è il codec usato per rendere riproducibili audio e video. A questo riguardo LongTail Video fa notare che il mercato è spaccato a metà tra WebM (il codec promosso da Google) e MP4.

6795446249_d8a116e0df.jpg

Se si pone l'attenzione solo su Android e iOS, MP4 ha la meglio, perché solo alcuni browser desktop (Chrome, Firefox e Opera) sono per ora compatibili con WebM. Google ha però affermato che in futuro Chrome non sarà più compatibile con MP4 e quindi WebM potrebbe fare un grande salto in avanti. Per la compatibilità di WebM su dispositivi mobile invece bisogna aspettare lo sviluppo hardware, e i tempi potrebbero essere ancora lunghi. 

6795446303_e0b46ef090.jpg

Per quanto riguarda i tag abbinati ai video, le differenze più rilevanti segnano la distanza tra desktop e mobile: Android e iOS infatti non permettono l'uso dei tag preload e autoplay.
Questi tag comunque porterebbero il telefono e lo smartphone a consumare banda preziosa, anche se l'utente non è interessato a riprodurre il video. Immaginiamo per esempio chi visita il nostro sito con un cellulare in treno, e ha un piano dati limitato: probabilmente è disposto a usare qualche KB per caricare un articolo, ma non per i video che ogni tanto sono presenti nelle nostre pagine.
"Ci sembra quindi giusto che sia l'utente a decidere se e quanto caricare un video con uno smartphone e un tablet, e a gestire in autonomia il proprio costoso piano dati"

HTML5 [Alessio Bellino]

E' uno standard ancora in fase di definizione e supportato in parte dai browser più moderni. Supporta il rendering 3D riuscendo a sostituire Flash (quasi) completamente. Tuttavia è molto complesso da usare e ancora non perfettamente supportato (potrebbero esserci problemi di compatibilità con i browser). Inoltre ci sono browser, come Safari per iOS, che non supportano Flash e i contenuti sviluppati in tale tecnologia risultano inutilizzabili al contrario di HTML5 che invece è ben supportato.

HTML5 e Swiffy [Alessio Bellino]

Google ha sviluppato in via sperimentale Swiffy in grado di convertire contenuti Flash nel rispettivo HTML5.

<a href="http://www.google.com/doubleclick/studio/swiffy/">www.google.com/doubleclick/studio/swiffy/</a>

Riferimenti

[1] <a href="http://visdes.settimopiano.it/duemiladieci/category/programmazione-e-archiviazione-per-il-web/">Tabella HTML 4.01</a>

Chrome Experiments [Chiara Frantini]

Chrome Experiments è una vetrina web per esperimenti creativi, la maggior parte dei quali sono costruiti con le più recenti tecnologie open, tra cui HTML5, Canvas, SVG, e WebGL. Tutti gli esperimenti sono stati fatti e presentati da artisti e programmatori di talento provenienti da tutto il mondo.

<a href="http://www.chromeexperiments.com/">www.chromeexperiments.com</a>


WebGL [Chiara Frantini]

WebGL è una Web-based Graphics Library. È un contesto di HTML che fornisce API di grafica 3D per i browser web.
Le specifiche sono ancora in costruzione. WebGL è gestito dal Gruppo Khronos, un'organizzazione non profit.

HTML5 Today [Chiara Frantini]

HTML5 Today è il primo e più completo blog italiano su HTML5, CSS3 e sulle nuove tecnologie del web.
Vengono pubblicati quasi quotidianamente articoli, news, tutorial ed esempi per scoprire il futuro del web e per essere aggiornati su tutte le ultime novità in ambito HTML, programmazione e JavaScript.
E' possibile salvarlo tra i bookmark, iscriversi al feed RSS o seguirlo su Twitter.

<a href="http://www.html5today.it/">www.html5today.it</a>

CSS [Chiara Frantini]

Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C. L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

Prima dei CSS [Chiara Frantini]

Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri e la formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente.

Il linguaggio HTML (e la sua evoluzione XHTML) ha come scopo quello di gestire i contenuti associandone o specificandone allo stesso tempo la struttura grafica (layout) all'interno della pagina web da realizzare grazie all'utilizzo di tag diversi. Ogni tag specifica un diverso ruolo dei contenuti che esso contrassegna.

I browser che interpretano il codice (X)HTML mostrano all'utente formattazioni predefinite per ogni tag che incontrano (così ad esempio i contenuti marcati con il tag "h1" avranno carattere 18pt e i contenuti marcati da "p" avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo dell'utente, che può modificarla nelle Impostazioni del suo browser.

Per permettere agli autori di definire l'aspetto delle loro pagine, dal 1993 in poi Netscape Navigator ed Internet Explorer, i due browser che si disputavano gli utenti nella nota guerra dei browser, presentarono tag proprietari, ovvero non aderenti agli standard e non compatibili con i browser concorrenti. Un esempio di questi tag è "font" che va a definire il font.

Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione e così il loro uso è diventato massiccio. Tuttavia questi tag presentano tre problemi: 1-Il primo problema è costituito dalla lunghezza di questi tag. Se confrontata con una pagina che adotta il linguaggio CSS, una pagina che non lo adotta è in genere più pesante (in termini di bit) in un rapporto che spesso raggiunge il 200%. Inoltre le istruzioni CSS possono essere raccolte in un file esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server devono trasmettere. 2-Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente agli standard, ridondante e confuso comporta infatti molto lavoro aggiuntivo per i browser, che devono cercare di correggere ed interpretare (quando possibile) direttive arbitrarie. 3-Il terzo problema comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i nuovi computer palmari e gli smartphone. Queste pagine infatti sono progettate per schermi con risoluzione minima 800x600 pixel. I palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a visualizzare correttamente la pagina e l'utente dovrà tentare di "decodificarla", operazione spesso molto scomoda.

CSS 1 [Chiara Frantini]

Si tende ad evidenziare anche un'ulteriore questione, nelle pagine web non standard, ovvero l'uso del tag (le tabelle) per realizzare l'impaginazione delle pagine web. Questo viene considerato dai puristi come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. Oltre a questo, l'uso delle tabelle comporta anche svantaggi pratici: aumento del peso delle pagine, come già indicato al problema 1, e peggioramento dell'accessibilità, in quanto l'ordine logico dei dati può dover essere sacrificato per motivi di layout. Nonostante tutto, alcuni sostengono l'uso delle tabelle per la loro maggior facilità di implementazione. Per tentare di risolvere questa situazione, nel 1996 il W3C emanò le specifiche CSS 1. I CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di questo linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferita su un codice completamente separato, il CSS appunto. I richiami tra i due codici venivano effettuati tramite due particolari attributi: class e ID. Queste specifiche: 1. Erano un'efficace soluzione al primo problema (escludendo la questione del tag

) perché riducevano notevolmente le dimensioni della pagine. 2. Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML. 3. Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA (i palmari) erano scarsamente diffusi. I CSS 1 sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non ebbero successo a causa della mancanza di browser in grado di supportarli.

CSS 2 e CSS 2.1 [Chiara Frantini]

Per includere nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel 1998 il W3C emanò le specifiche CSS 2 e nel 2004 le specifiche CSS 2.1. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il problema tre, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il problema due è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla. Con la comparsa di Internet Explorer 5, di Firefox e di Opera 7, i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web.


CSS 3 [Chiara Frantini]

Le specifiche CSS 3 non sono state ancora pubblicate, sebbene il W3C pubblichi costantemente informazioni sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bug di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i bordi arrotondati la cui realizzazione affligge i webdesigner da tempo.


Twitter Timeline [Marco Carisio]

In questa infografica che vi propongo sono illustrati gli sviluppi del linguaggio CSS dal 1995 ad oggi:


CSS Zen Garden [Chiara Frantini]

Il CSS Zen Garden è una delle risorse per lo sviluppo del World Wide Web. L'obiettivo del sito è quello di mostrare cosa è possibile fare con il design basato sui CSS. I fogli di stile hanno contribuito grazie ai graphic designer di tutto il mondo ad essere utilizzati per cambiare la visualizzazione visiva di un singolo file HTML, producendo centinaia di disegni differenti.

Oltre al riferimento a un file CSS esterno, il markup HTML non cambia mai. Tutte le differenze visive sono il risultato di un CSS (che supporta anche le immagini). Il sito è stato tradotto in più lingue e conta nel 2011 di 210 progetti provenienti da ogni parte del globo.

CSS Zen Garden - Storia [Chiara Frantini]

Quando è stato lanciato a Maggio del 2003 conteneva solo 5 progetti.

A Febbraio 2005, The Zen of CSS Design (Peachpit Press) è stato pubblicato dall'autore del sito CSS Zen Garden Dave Shea e dal web designer Molly Holzschlag. Il libro si basa su 36 progetti presenti sul sito. A Luglio 2005 è stato tradotto in italiano ed è stato pubblicato col nome di Lo zen e l'arte del Web con il CSS (Mondadori Informatica).

"Il Giardino" stesso ha ispirato siti web simili in altre lingue; Shea dice di essere stato ispirato da un esperimento di Chris Casciano chiamato "Daily CSS Fun" (Divertimento quotidiano dei CSS), e un concorso legato ai CSS di HotBot, un motore di ricerca.

Il sito CSS Zen Garden non è al momento attivo e sviluppato ed è stato aggiornato per l'ultima volta nel mese di Aprile 2008.

<a href="http://csszengarden.com/">csszengarden.com</a>

Introduzione all' HTML 5 [Mazzotta Simone]

Presentazione di Christopher Schmitt sugli elementi, sul layout, sulla formattazione css, audio, video,microformati e mobile di HTML5.

fonte: <a href="http://www.slideshare.net/teleject/looking-into-html5">slideshare.net</a>


Guide HTML [Oscar Bertone Giordano]

<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="4" _fck_mw_template="true">
<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="2" _fck_mw_template="true">
<img class="FCK__MWTemplate" src="spacer.gif" _fckfakelement="true" _fckrealelement="0" _fck_mw_template="true">





Whos here now:   Members 0   Guests 0   Bots & Crawlers 1
 
Strumenti personali
Namespace
Varianti
Azioni
Forum Menu
Wikibook
Autori
Istruzioni
Widget e Social Media
Strumenti
Modifiche