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 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!
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.
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!
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.
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
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
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?
This set of design patterns are related to Enterprise Patterns. In it you can find, J2EE, Presentation, Business & Integration Patterns (such as: ApplicaCon Controller, Data Transfer Object (DTO), Business Object (BO) & Data Access Object (DAO) among others ...)
Difficoltà: Facie, Beginner
Argomenti: Drupal Theming & Css Framework
Descrizione:
Le slide sono state proiettate durante la sessione "Drupal Theming & Css Framework" al Drupal Camp 2010 di Torino da Domenico Monaco, aka Kiuz. domenico.monaco[@]kiuz.it
In the last few months there's been a growing friction between those who see CSS as an untouchable layer in the "separation of concerns" paradigm, and those who have simply ignored this golden rule and found different ways to style the UI, typically applying CSS styles via JavaScript.
This debate is getting more and more intense, fiery and harsh every day, bringing division in a community that used to be immune to this kind of “wars”.
Is there anything practical that we can do, here and now, to stop it?
This talk will be my attempt to bring peace between the two fronts, help these two opposite factions to understand and listen to each other, see the counterpart's points of views, find the good things they have in common, and learn something from that.
## This talk has been presented at London CSS Meetup. ##
Video of the talk: https://www.youtube.com/watch?v=bb_kb6Q2Kdc
Style Guides, Pattern Libraries, Design Systems and other amenities.Cristiano Rastelli
Style guides and component libraries are the new trend in front-end development.
Everyone is into "Atomic Design" and "Modular CSS" nowadays.
But how did we get to this “hype”, and why? What is a style guide, what is its value and where are the benefits of introducing one in a project? And are them useful only for the web, or can be employed by other platforms too?
I'll try to give an answer to all these questions in this presentation – directed to designers, web developers but also iOS/Android/Win developers – and I'll show how our Mobile Web team in Badoo has developed his first style guide and how is using it to catch bugs and create a shared pattern library.
My kick-off presentation at IxDA London Meetup October 2015.
The subject of the evening was inspired by Russel Davies' post “Software Above the Level of a Single Man” — a provocation with amazingly simplicity but very deep in its implications.
The main point we wanted to discuss was the shift as designers from "design for my phone, for my watch, for my [personal context here]" to "design for our car, our home, our office/workplace, our classroom, our [shared space/context here]".
Because as soon as you move away from the "level of a single man", you have to deal with (and design for) the complexity of “human interactions”. And it's not only a matter of defining personas, contexts, use cases; but also of understanding relationships, hierarchies, “meanings”, emotions.
Are we ready to deal with this change of paradigm? What are the complexities that we have to take into account? Are there already studies, real projects, examples of possible solutions, and what can we learn from them?
An internal talk for VisuaDNA about Smart Cities, Open-Data, Connected Objects, Quantified Self, Internet of Things, and other ideas for the future of Big Data.
Presented on December 2013.
This is going to be a very personal and opinionated talk, on what I foresee as a "senior" developer for the future of our profession: fears, risks, opportunities and challenges.
A talk about the personal responsibilities that we - as software developers - have. Not only to create better software, but to create a better software industry for us and for the future generations. A talk about the temptations we have to adopt approaches, processes and mental models typical of the Industrial era, instead of building our own "rules of the game" and decide on which values we want to ground our profession. A talk about the importance of the communities, the open source, the culture of making and sharing the knowledge, instead of simply re-sharing or re-using someone else's work.
Because, in the software industry, take away the technology and all that remains are again the persons, with their knowledge, their passions and their ethic.
Some tips on how to make you presentation look better (and why you should). An internal presentation I gave in VisualDNA, during the "Let's Talk" series of lectures about how to give good presentations and do public speaking.
Un recente libro di Luke Wroblewski, intitolato "Mobile First" ha coniato questa definizione di un approccio alla progettazione che poi è stato dato per scontato dalla maggior parte degli interaction/ux/web designer. In questo talk vorrei invece portare la mia esperienza nella realizzazione di diversi siti web "responsive" che è invece diametralmente opposto, spiegando le ragioni che mi hanno portato a questa scelta e il metodo che ho adottato e consolidato negli ultimi mesi.
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102 Cristiano Rastelli
L'idea del talk è quella di mostrare come spesso in fase di preventivazione di un lavoro si tenda a sottovalutare tutta una serie di aspetti e attività apparentemente secondari, ma in realtà con un impatto notevole sull'effort. Scopo del talk è quello di portare all'attenzione degli sviluppatori come questo "difetto" nelle proprie stime abbia impatto non solo sulla remuneratività del proprio lavoro, ma soprattutto sulla qualità complessiva del prodotto consegnato al cliente.L'idea del talk è quella di mostrare come spesso in fase di preventivazione di un lavoro si tenda a sottovalutare tutta una serie di aspetti e attività apparentemente secondari, ma in realtà con un impatto notevole sull'effort. Scopo del talk è quello di portare all'attenzione degli sviluppatori come questo "difetto" nelle proprie stime abbia impatto non solo sulla remuneratività del proprio lavoro, ma soprattutto sulla qualità complessiva del prodotto consegnato al cliente.
Il mini-talk che ho portato al Methodcamp 2012, per discutere assieme agli altri partecipanti e confrontarmi con loro sul metodo di esplorazione che tipicamente adotto nella fase iniziale di un progetto di design.
L'idea del talk è quella di prendere spunto da alcune osservazioni recenti, su come spesso in fase di preventivazione di un lavoro si tenda a sottovalutare tutta una serie di aspetti e attività apparentemente secondari, ma in realtà con un impatto notevole sull'effort, sul tempo complessivo che sarà necessario dedicare a quell'attività per completare il lavoro richiesto. A partire da queste "osservazioni sul campo" proverò a suggerire alcuni accorgimenti che ho adottato nella mia esperienza per evitare questo "effetto sottovalutazione", coinvolgendo la platea e invitando i partecipanti a discutere e confrontarsi con me su questi e su altri stratagemmi che ho intenzione di provare nel futuro. Scopo del talk è quello di portare all'attenzione degli sviluppatori (ma non solo loro) come questo "difetto" nelle proprie stime abbia impatto non solo sulla remuneratività del proprio lavoro e sul tempo che dedichiamo ad esso, ma soprattutto sulla qualità complessiva del prodotto consegnato al cliente.
In questa presentazione, ho provato a percorrere la strada che ha portato dal modello "classico" della Human-Computer-Interaction all'attuale modello dello User-Experience Design, un "cappello" multi-disciplinare sotto il quale oggi si raccolgono diverse competenze, pratiche e metodologie (architettura delle informazioni, etnografia, interaction design, graphic and visual design, web/software design and development, user-testing, per dirne alcune) utilizzate per la progettazione e la realizzazione non solo di interfacce (software/applicative, web, mobile, ecc.) ma anche e soprattutto di servizi (cross-canale, cross-device, multi-ambiente) e di vere e proprie "esperienze utente". Da qui, ho provato a guardare al futuro, dallo UXD delle reti sociali alle contraddizioni fra convergenza delle metafore d'interazione e frammentazione dei medium di fruizione, per arrivare a immaginare di poter parlare un giorno di "Humanity-Cloud Interaction".
In questa presentazione, ho provato a percorrere la strada che ha portato dal modello "classico" della Human-Computer-Interaction all'attuale modello dello User-Experience Design, un "cappello" multi-disciplinare sotto il quale oggi si raccolgono diverse competenze, pratiche e metodologie (architettura delle informazioni, etnografia, interaction design, graphic and visual design, web/software design and development, user-testing, per dirne alcune) utilizzate per la progettazione e la realizzazione non solo di interfacce (software/applicative, web, mobile, ecc.) ma anche e soprattutto di servizi (cross-canale, cross-device, multi-ambiente) e di vere e proprie "esperienze utente". Da qui, ho provato a guardare al futuro, dallo UXD delle reti sociali alle contraddizioni fra convergenza delle metafore d'interazione e frammentazione dei medium di fruizione, per arrivare a immaginare di poter parlare un giorno di "Humanity-Cloud Interaction".
In questa presentazione condivido la mia "esperienza sul campo" nel prendere un sito web (www.nosqlday.it) inizialmente realizzato in HTML5+CSS3 ma con il solo target "desktop", e renderlo non solo compatibile o ottimizzato, ma addirittura "speciale" per la visualizzazione su dispositivi mobili.
Presentazione tenuta in occasione del seminario "Lost in translation: la comunicazione aumentativa e alternativa per l’inclusione sociale di adulti e anziani" nell'ambito di HANDImatica 2010, mostra-convegno nazionale dedicata alle tecnologie ICT per le persone disabili.
E' l'evoluzione della presentazione tenuta allo UXCamp 2009 a Firenze.
La presentazione che ho tenuto allo UX Camp Italia 2010 a Firenze, sul tema della qualità e dell'eccellenza nel design (user-centered design, user-experience design, user-interface design, web design, ecc.) e dei rischi connessi al perdere di vista la vera natura del proprio lavoro e le richieste del committente.
La presentazione che ho tenuto all'ExperienceCamp 2010 presso Sketchin (Manno, CH) a tema percezione della "qualità" della user-experience da parte degli utenti e valore che ad essa assegniamo come sviluppatori/designer.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.Cristiano Rastelli
Partendo dall’esperienza acquisita e vissuta in prima persona durante i due anni di lavoro che hanno portato prima alla realizzazione e poi al successivo mantenimento del sito web di un piccolo giornale d’opinione a diffusione nazionale, cercheremo di portare la nostra analisi sul rapporto fra esperienza utente e fruizione dei contenuti anche ai siti web dei principali quotidiani presenti in Italia, per provare a immaginare come i nuovi modelli di business che stanno facendo breccia nel mondo dell’editoria impongano necessariamente un nuovo approccio verso qualità, quantità e fruibilità dei contenuti offerti al lettore/consumatore/cliente, e quindi un nuovo spazio di intervento per chi si occupa di architettura dell’informazione e design dell’esperienza utente.
Esperienza utente e fruizione dei contenuti nei quotidiani online in Italia.
Best practices per lo sviluppo Frontend
1. Best practices per lo sviluppo Frontend
CRISTIANO RASTELLI
WEB & INTERACTION DESIGNER
2. Alcune cose prima di iniziare
Forse le più importanti...
g ood
Best practices
3. Alcune cose prima di iniziare
Forse le più importanti...
ser- side
brow
sviluppo Frontend
4. Alcune cose prima di iniziare
Forse le più importanti...
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.
presentazione visuale tramite CSS
interazione utente tramite JS
manipolazione pagina tramite DOM
5. AGENDA
Di cosa stiamo parlando?
Linguaggi
Demo
“Presentazione”
“Interazione”
“Manipolazione”
Risorse utili
9. Il nostro modello client-server
SERVER
LAYOUT ENGINE
RENDERING MODE VISUAL FORMATTING MODEL
http://
• standard mode BOX MODEL
DOCTYPE • quirks mode • standard W3C
DTD • traditional IE
DOCUMENT OBJECT MODEL
BROWSER
10. Visual Formatting Model
È il modello con il quale viene processato il document-tree
per il rendering verso media visuali.
Ogni elemento del document-tree genera o meno un box il
cui layout grafico è determinato in base a:
tipo e dimensione del box
schema posizionale
relazione con gli altri elementi del document-tree
condizioni al contorno
11. Box Model
È il modello con il quale viene elaborato il layout grafico
del singolo box all’interno del document-tree.
Le dimensioni grafiche del box sono determinate in base a:
dimensione orizzontale/verticale
dimensione del margine esterno
dimensione del padding interno
dimensione del bordo
14. Document Object Model ( )
“A document object model (DOM) is an application
programming interface (API) for representing a document
(such as an HTML document) and accessing and
manipulating the various elements (such as HTML tags and
strings of text) that make up that document.
JavaScript-enabled web browsers have always defined a
document object model.”
Oggi convenzionalmente ci si riferisce al DOM come
rappresentazione del documento in memoria nel browser.
Attenzione: DOM ≠ “Source”
15. Il documento
<html>
<head>
<title>Helo world</title>
</head>
<body>
<h1 id=”stw”>Save the world</h1>
<p>Save the <i>cheer</i> leaders.</p>
</body>
</html>
16. Il documento a oggetti
DOCUMENT
<html>
<head> <body>
ELEMENT
<title> <h1> <p>
Save the
Helo world
world
Save the <i> leaders.
cheer
id
ATTR TEXT
18. Accesso ai nodi
Diretto tramite selettore
.getElementsByTagName('tag')[x]
.getElementById('xxx');
document.getElementsByTagName('h1')[0]
document.getElementsByTagName('p')[3].lastChild
document.getElementById('stw');
19. Gestione dei nodi
Creazione/Modifica/Eliminazione
.createElement('hr')
.appendChild(x)
.removeChild(document.childNodes[3].firstChild)
.createTextNode('lorem ipsum')
var x = document.createElement('span');
var y = document.createTextNode('I am a paragraph');
x.appendChild(y);
document.appendChild(x);
20. Il documento a oggetti
DOCUMENT
span
<html>
I am a paragraph
<head> <body>
ELEMENT
<title> <h1> <p>
Save the
Helo world
world
Save the <i> leaders.
cheer
id
ATTR TEXT
21. Modifica dei nodi
Proprietà degli elementi
.id
.className
.nodeValue
.innerHTML
setAttribute(…)
getAttribute()
removeAttribute(…)
22. Manipolazione del DOM
Abbiamo tramite il DOM il completo accesso agli
elementi del documento. Questo vuol dire che, nel
browser, tramite Javascript, possiamo modificare
programmaticamente qualsiasi parte del documento.
Ovviamente va come sempre considerato il supporto dei
browser ai metodi del DOM, che se nel caso del CORE
sono abbastanza standard, per il resto hanno
implementazioni che variano da browser a browser.
23. Un mondo (quasi) perfetto
l’implementazione in Javascript
dei metodi di accesso al DOM
non è standard fra i browser
DOM
Frameworks
34. Struttura di una pagina HTML
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
................. TAG SOUP .............
</body>
</html>
35. Elenco tag HTML
• ADDRESS ‐ Address information • DIR ‐ Directory list
• APPLET ‐ Java applet • DIV ‐ Logical division
• AREA ‐ Hotzone in imagemap • DL ‐ Definition list
• A ‐ Anchor • DT ‐ Definition term
• BASE ‐ Document location • EM ‐ Emphasized text
• BASEFONT ‐ Default font size • FONT ‐ Font modification
• BIG ‐ Larger text • FORM ‐ Input form
• BLOCKQUOTE ‐ Large quotation • H1 ‐ Level 1 header
• BODY ‐ Document body • H2 ‐ Level 2 header
• BR ‐ Line break • H3 ‐ Level 3 header
• B ‐ Bold • H4 ‐ Level 4 header
• CAPTION ‐ Table caption • H5 ‐ Level 5 header
• CENTER ‐ Centered division • H6 ‐ Level 6 header
• CITE ‐ Short citation • HEAD ‐ Document head
• CODE ‐ Code fragment • HR ‐ Horizontal rule
• DD ‐ Definition • HTML ‐ HTML Document
• DFN ‐ Definition of a term • IMG ‐ Images
36. Elenco tag HTML
• INPUT ‐ Input field, button, etc. • SMALL ‐ Smaller text
• ISINDEX ‐ Primitive search • STRIKE ‐ Strikeout
• I ‐ Italics • STRONG ‐ Strongly emphasized
• KBD ‐ Keyboard input • STYLE ‐ Style information
• LINK ‐ Site structure • SUB ‐ Subscript
• LI ‐ List item • SUP ‐ Superscript
• MAP ‐ Client‐side imagemap • TABLE ‐ Tables
• MENU ‐ Menu item list • TD ‐ Table cell
• META ‐ Meta‐information • TEXTAREA ‐ Input area
• OL ‐ Ordered list • TH ‐ Header cell
• OPTION ‐ Selection list option • TITLE ‐ Document title
• PARAM ‐ Parameter for Java applet • TR ‐ Table row
• PRE ‐ Preformatted text • TT ‐ Teletype
• P ‐ Paragraph • UL ‐ Unordered list
• SAMP ‐ Sample text • U ‐ Underline
• SCRIPT ‐ Inline script • VAR ‐ Variable
• SELECT ‐ Selection list
37. HyperText Markup Language
Linguaggio di markup, ovvero di descrizione di un
contenuto, non di programmazione.
Osservando con attenzione le specifiche W3C
sull’uso e sul significato dei tag, si capisce che:
Molta struttura
Molta semantica
Poca formattazione
40. Utilizzo dei CSS
PRESENTAZIONE LAYOUT
color position
font sizing
text formatting margin/padding
list style/type display
border float/clear
41. I vantaggi
Separazione fra “contenuto” e “presentazione”
Riduzione banda (“traffico”) e latenza nel rendering
Migliore controllo del codice HTML e del layout
Maggiore consistenza fra le pagine e fra i browser
42. Concetti di base
Cascading (precedenza)
Author --› User --› User Agent
Overriding
Stile dichiarato vs. Stile computato
Specificità
Elemento (b, div, span) 0.0.1
Classe/Pseudoclasse (.redbox, :hover) 0.1.0
ID (#mainBox) 1.0.0
Ereditarietà
44. I selettori
h1, h2, p {…} elemento HTML
#boxRoot, h2#title {…} id
.redbox {…}, span.redbox {…} classe
span.redbox.special {…} classi multiple
a:hover {…} pseudo‐classi
div > p, h1 + h2 {…} figli/adiacenti
input[type=button] attributi
*** e molti altri...
45. Struttura di un file CSS
body {…}
h1 {…}
h2 {…}
h3 {…}
p {…}
a, a:hover, a:active, a:visited {…}
#boxHead {…}
#boxBody {…}
#boxFoot {…}
body#pageHome h1, body#pageHome h2, body#pageHome h3 {…}
body#pageAbout #boxMain table#tblAboutPeople {…}
body#pageContacts #boxMain #bmContactPlace p {…}
.sIFR‐flash {…}
.sIFR‐hasFlash #boxMain h1 {…}
47. Quale Javascript?
Differenti browser implementano diversi engine
Javascript, con diverse estensioni applicative
(componenti, utility, metodi, ecc.).
Ma soprattutto, implementano diversi metodi di
accesso al DOM.
Dovremmo riempire ogni singola funzione di “if” e
di test sul browser utilizzato, con tutto ciò che
comporta una scelta del genere.
Conclusione: dobbiamo utilizzare un framework.
48. Quale Framework?
Ogni framework avrà la sua sintassi e la propria
libreria di “effetti speciali”.
Quello che è comune ai framework in realtà è il
fatto di disporre di metodi cross-browser di
accesso e manipolazione del DOM.
Come sceglierlo? In base al tipo di applicazione e di
utilizzo che andremo a farne. s e al lo
go!
ba
...opp ure in
49. Perché adottare un framework?
Vi immaginate fare questo per tutte le funzioni?
window.xpath = !!(document.evaluate);
if (window.ActiveXObject) {
window[window.XMLHttpRequest ? 'ie7':'ie6'] = true;
window.ie = true;
} else if (document.childNodes && !document.all && !
navigator.taintEnabled) {
window[window.xpath ? 'webkit420':'webkit419'] = true;
window.webkit = true;
window.khtml = true;
} else if (document.getBoxObjectFor != null) {
window.gecko = true;
}
Lasciamo che sia il framework a farlo per noi!
51. Separazione, ora e sempre!
È fondamentale la separazione fra i diversi ambiti
o layer “logici” di una pagina web:
Comportamento
Presentazione
Contenuti
52. Ad ognuno il suo!
Lasciamo che ogni linguaggio faccia ciò per cui è
stato pensato e progettato:
HTML semantica
CSS visualizzazione
JS interazione
53. Browser evoluti
In cosa consiste l’evoluzione dei browser?
Nel crescente supporto agli standard del W3C.
Quali vantaggi per gli sviluppatori?
Impiego intelligente di CSS + DOM & JS
Maggiore rigore formale e controllo sul codice
Maggiore controllo sul rendering
Maggiore capacità di elaborazione lato client (JS)
Più attenzione a semantica e accessibilità
54. L’importanza del “DOM scripting”
Cosa posso fare in una applicazione web tramite la
manipolazione del DOM? TUTTO.
Capite allora l’importanza del DOM ai fini dello
sviluppo di pagine e soprattutto applicazioni web:
posso spostare moltissima logica verso il client.
DOM
58. Avoid inline style
Evitate per quanto vi è possibile questo:
<p align="center"><b><font size="4">
<p style="color:red;">...
<div align="right"><p>...</p></div>
<p>...</p><br/><br/><br/><br/><p>...</p>