Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design Adattivo
salvatore.paone@unifi.it
Wireframe classici
Wireframe disegnando su dispositivi reali
Wireframe disegnando su Photoshop
Wireframe Adattivi in HTML e CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wireframe</title>
</head>
<body>
</body>
</html>
<div id="page">
<section id="book-title"></section>
<section id="synopsis"></section>
<section id="purchase"></section>
<s...
<div id="page">
<section id="book-title"><h1>1. Book
title</h1></section>
<section id="synopsis"><h1>2.
Synopsis/descripti...
Prima di iniziare a scrivere gli stili attribuiamo una classe al
body che poi rimuoveremo quando passeremo dal
wireframe a...
il foglio di stile con i selettori che saranno sempre usati è
base.css:
body {
background-color: white;
font-family: sans-...
Preparo i collegamenti per i fogli di stile:
<title>Wireframe</title>
<link rel="stylesheet" href="styles/base.
css" media...
Completo base.css:
.wireframe section{
margin: 1em;
background-color: whitesmoke;
border: 1px solid gainsboro;
font: small...
Adeguare il wireframe affinché sia Mobile First:
http://www.abookapart.com/products/mobile-first
testandolo.
Effettuare te...
Stimare l’altezza dei blocchi aiuta a comprendere cosa
succederà con i contenuti reali:
.wireframe #book-title { height: 5...
Aggiungere la navigazione:
<nav>
<h1 id="nav">Navigation links</h1>
</nav>
Aggiungere l’ancora per il menu:
<div id="page"...
Inoltre aggiungiamo una regola per spostare il
collegamento in alto a destra:
.wireframe .menu {
position: absolute;
margi...
Iniziamo a lavorare per classi di dispositivo, ma dobbiamo
informare il browser che quando diremo min-width, la
larghezza ...
medium.css avrà alcune regole, che smentiranno base.css
.wireframe .menu {
display: none;
}
.wireframe nav {
position: abs...
a cascata large.css smentirà medium.css e base.css
.wireframe section {
margin: 1em 0;
}
.wireframe #page {
position: rela...
andando a creare due colonne...
.wireframe #purchase {
float: right;
width: 40%;
height: 30em;
margin-top: 0;
}
.wireframe...
jQuery Picture
Picture è un plugin per jQuery che aiuta il webmaster a
creare della pagine responsive. Con esso le immagin...
Inizializzare il plugin
$(function(){
$('figure.responsive').picture();
});
<figure class="responsive" data-media="
assets...
Upcoming SlideShare
Loading in …5
×

Primo approccio al design adattivo

1,995 views

Published on

Progettare siti da fruire su dispositivi diversi è imprescindibile nel Web design attuale. Scopriamo le tecniche fondamentali per ottenere risultati ottimi su tutti gli schermi

Published in: Education
  • Be the first to comment

Primo approccio al design adattivo

  1. 1. Design Adattivo salvatore.paone@unifi.it
  2. 2. Wireframe classici
  3. 3. Wireframe disegnando su dispositivi reali
  4. 4. Wireframe disegnando su Photoshop
  5. 5. Wireframe Adattivi in HTML e CSS
  6. 6. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wireframe</title> </head> <body> </body> </html>
  7. 7. <div id="page"> <section id="book-title"></section> <section id="synopsis"></section> <section id="purchase"></section> <section id="resources"></section> <section id="errata"></section> </div>
  8. 8. <div id="page"> <section id="book-title"><h1>1. Book title</h1></section> <section id="synopsis"><h1>2. Synopsis/description</h1></section> <section id="purchase"><h1>3. Purchase options and formats</h1></section> <section id="resources"><h1>4. Resources</h1></section> <section id="errata"><h1>5. Errata</h1></section> </div>
  9. 9. Prima di iniziare a scrivere gli stili attribuiamo una classe al body che poi rimuoveremo quando passeremo dal wireframe al prototipo: <body class="wireframe"> Stili:
  10. 10. il foglio di stile con i selettori che saranno sempre usati è base.css: body { background-color: white; font-family: sans-serif; } .wireframe section{ background-color: whitesmoke; border: 1px solid gainsboro; }
  11. 11. Preparo i collegamenti per i fogli di stile: <title>Wireframe</title> <link rel="stylesheet" href="styles/base. css" media="screen"> <link rel="stylesheet" href="styles/medium. css" media="screen"> <link rel="stylesheet" href="styles/large. css" media="screen"> medium.css e large.css saranno successivamente completate con le media query: http://www.w3. org/TR/css3-mediaqueries/
  12. 12. Completo base.css: .wireframe section{ margin: 1em; background-color: whitesmoke; border: 1px solid gainsboro; font: small sans-serif; text-align: center; color: silver; } .wireframe h1 { font-weight: 100; }
  13. 13. Adeguare il wireframe affinché sia Mobile First: http://www.abookapart.com/products/mobile-first testandolo. Effettuare test con dispositivi iOS: si consiglia Xcode Effettuare test con dispositivi Android: si consiglia Android SDK Oppure: http://ami.responsivedesign.is/ http://seeresponsive.it/ http://www.responsinator.com/
  14. 14. Stimare l’altezza dei blocchi aiuta a comprendere cosa succederà con i contenuti reali: .wireframe #book-title { height: 5em; } .wireframe #synopsis { height: 30em; } .wireframe #purchase { height: 20em; } .wireframe #resources { height: 50em; } .wireframe #errata { height: 40em; }
  15. 15. Aggiungere la navigazione: <nav> <h1 id="nav">Navigation links</h1> </nav> Aggiungere l’ancora per il menu: <div id="page"> <a href="#nav" class="menu">Menu</a> ... Aggiungere gli stile anche a: .wireframe nav, .wireframe .menu { ...
  16. 16. Inoltre aggiungiamo una regola per spostare il collegamento in alto a destra: .wireframe .menu { position: absolute; margin: 0; top: 0; right: 0; background-color: gainsboro; padding: 0.5em; color: steelblue; } .wireframe nav { height: 10em; }
  17. 17. Iniziamo a lavorare per classi di dispositivo, ma dobbiamo informare il browser che quando diremo min-width, la larghezza della pagina deve essere la larghezza del dispositivo: <meta name="viewport" content="width=device-width, minimum-scale=1.0"> Iniziamo a creare fogli di stile in cui indichiamo la min- width: <link rel="stylesheet" href="styles/medium.css" media="screen and (min-width: 600px)"> <link rel="stylesheet" href="styles/large.css" media="screen and (min-width: 900px)">
  18. 18. medium.css avrà alcune regole, che smentiranno base.css .wireframe .menu { display: none; } .wireframe nav { position: absolute; top: 0; width: 100%; height: auto; margin: 0; border: none; }
  19. 19. a cascata large.css smentirà medium.css e base.css .wireframe section { margin: 1em 0; } .wireframe #page { position: relative; width: 90%; margin: 0 auto; } .wireframe #synopsis { float: left; width: 58%; margin-top: 0; }
  20. 20. andando a creare due colonne... .wireframe #purchase { float: right; width: 40%; height: 30em; margin-top: 0; } .wireframe #purchase+section { clear: both; }
  21. 21. jQuery Picture Picture è un plugin per jQuery che aiuta il webmaster a creare della pagine responsive. Con esso le immagini si ridimensionano correttamente quando la finestra del browser viene rimpicciolita. Il ridimensionamento è in verità simulato perché al plugin vengono passate più immagini (rappresentanti la stessa cosa) con dimensioni diverse e, a seconda della dimensione del browser, viene istantaneamente caricata quella con la larghezza più adatta. http://jquerypicture.com/
  22. 22. Inizializzare il plugin $(function(){ $('figure.responsive').picture(); }); <figure class="responsive" data-media=" assets/images/small.png" data-media600=" assets/images/medium.png" data-media900=" assets/images/large.png" title="A Half Brained Idea"> </figure>

×