Prima lezione del corso "Web & Graphic Design" in collaborazione con l'associazione studentesca Link Udu Lecce. Il percorso illustra come si è arrivati all'attuale Responsive, dopo un periodo condito da <tables> e Flash, per poi arrivare al full-CSS grazie anche al Web 2.0 e Wordpress. CONTENUTI DEL CORSO: HTML 5 + CSS 3 Responsive Web Design Tipografia Drupal 7 Content Strategy Information Architecture Tips & Tricks Web Designer e Social Media Guida al Freelancing TUTOR del corso: Andrea Riezzo - web designer - Freelance - Blogger Professionista - Content Strategist - Videomaker http://androe.com http://follow.androe.com http://altroportaleunisalento.jimdo.com/progetti-corsi/archivio-a-a-2012-13/10-corso-di-web-graphic-designer/

1. WEB DESIGNER
martedì 22 gennaio 13

2. WEB DESIGNER
martedì 22 gennaio 13

3. WEB DESIGNER
VISTO DALLA SOCIETÀ
http://www.flickr.com/photos/vancouverfilmschool
martedì 22 gennaio 13

4. WEB DESIGNER
VISTO DAI MIEI GENITORI
http://www.flickr.com/photos/8362710@N03/4700161983/sizes/o/in/photostream/
martedì 22 gennaio 13

5. WEB DESIGNER
VISTO DAI MIEI CLIENTI
http://www.flickr.com/photos/slworking
martedì 22 gennaio 13

6. WEB DESIGNER
VISTO DAI MIEI CLIENTI
http://www.flickr.com/photos/onthetower
martedì 22 gennaio 13

7. WEB DESIGNER
VISTO DA CHI NON HA LE IDEE BEN CHIARE
http://www.flickr.com/photos/eldave
martedì 22 gennaio 13

8. WEB DESIGNER
VISTO DA CHI NON HA LE IDEE BEN CHIARE
http://www.flickr.com/photos/tyle_r
martedì 22 gennaio 13

9. WEB DESIGNER
COSA PENSAVO DI DIVENTARE
martedì 22 gennaio 13

10. WEB DESIGNER
COME SONO IN REALTÀ
martedì 22 gennaio 13

11. WEB DESIGNER
martedì 22 gennaio 13

12. DI COSA DI OCCUPA UN
WEB DESIGNER
?
martedì 22 gennaio 13

13. DESIGN ≠ disegno
martedì 22 gennaio 13

14. martedì 22 gennaio 13

15. DESIGN
NOUN
a plan or drawing produced to show the look and
function or workings of a building, garment, or other
object before it is made
[mass noun] the art or action of conceiving of and
producing a plan or drawing of something before
it is made
VERB
do or plan (something) with a specific purpose in mind
fonte: Oxford Dictionaries Online http://oxforddictionaries.com/definition/english/design
martedì 22 gennaio 13

16. DESIGN = progettazione
martedì 22 gennaio 13

17. DI COSA DI OCCUPA UN
WEB DESIGNER
?
martedì 22 gennaio 13

18. WEB DESIGNER
martedì 22 gennaio 13

19. WEB DESIGNER
programmazione
martedì 22 gennaio 13

20. PHP
WEB DESIGNER
programmazione
martedì 22 gennaio 13

21. javascript PHP
WEB DESIGNER
programmazione
martedì 22 gennaio 13

22. javascript PHP
WEB DESIGNER
programmazione HTML
martedì 22 gennaio 13

23. javascript CSS PHP
WEB DESIGNER
programmazione HTML
martedì 22 gennaio 13

24. javascript SEO CSS PHP
WEB DESIGNER
programmazione HTML
martedì 22 gennaio 13

25. javascript SEO CSS PHP
WEB DESIGNER
programmazione HTML TIPOGRAFIA
martedì 22 gennaio 13

26. javascript SEO CSS PHP
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
martedì 22 gennaio 13

27. javascript SEO CSS PHP
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

28. javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

29. javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

30. jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

31. USER INTERFACE
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

32. jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
CMS
martedì 22 gennaio 13

33. jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
USO DEI SOCIAL MEDIA
CMS
martedì 22 gennaio 13

34. jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP USO DEI SOCIAL MEDIA
CMS
martedì 22 gennaio 13

35. content strategy
jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP USO DEI SOCIAL MEDIA
CMS
martedì 22 gennaio 13

36. content strategy
GRAPHIC DESIGN
jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP USO DEI SOCIAL MEDIA
CMS
martedì 22 gennaio 13

37. content strategy
GRAPHIC DESIGN
jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP USO DEI SOCIAL MEDIA
economia
CMS
martedì 22 gennaio 13

38. content strategy
GRAPHIC DESIGN
jQuery USER INTERFACE LEGGI
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
martedì 22 gennaio 13

39. GRAPHIC DESIGN web marketing
content strategy
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
martedì 22 gennaio 13

40. animazione
GRAPHIC DESIGN web marketing
content strategy
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
martedì 22 gennaio 13

41. animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
martedì 22 gennaio 13

42. animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
IMPRENDITORIA
martedì 22 gennaio 13

43. animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia
IMPRENDITORIA FREELANCING
martedì 22 gennaio 13

44. animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
IMPRENDITORIA FREELANCING
martedì 22 gennaio 13

45. INFORMATION ARCHITECTURE
animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
IMPRENDITORIA FREELANCING
martedì 22 gennaio 13

46. PSICOLOGIA
INFORMATION ARCHITECTURE
animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
IMPRENDITORIA FREELANCING
martedì 22 gennaio 13

47. PSICOLOGIA
INFORMATION ARCHITECTURE
animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
team management
IMPRENDITORIA FREELANCING
martedì 22 gennaio 13

48. PSICOLOGIA
INFORMATION ARCHITECTURE
animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
team management
IMPRENDITORIA FREELANCING WEB PUBLISHING
martedì 22 gennaio 13

49. PSICOLOGIA PROJECT MANAGEMENT
INFORMATION ARCHITECTURE
animazione CSS3 + HTML5
GRAPHIC DESIGN content strategyweb marketing
USER INTERFACE LEGGI
jQuery
javascript SEO CSS PHP accessibilità
WEB DESIGNER
programmazione HTML UX TIPOGRAFIA
MARKUP CMS
USO DEI SOCIAL MEDIA
SOCIAL NETWORKING economia branding
team management
IMPRENDITORIA FREELANCING WEB PUBLISHING
martedì 22 gennaio 13

50. WEB DESIGNER
martedì 22 gennaio 13

51. martedì 22 gennaio 13

52. il Web Design è una cosa seria,
da non prendere sottogamba.
martedì 22 gennaio 13

53. UN PO’ DI STORIA
http://www.flickr.com/photos/conqenator
martedì 22 gennaio 13

54. HTML
martedì 22 gennaio 13

55. HTML
HYPERTEXT MARKUP LANGUAGE
martedì 22 gennaio 13

56. HTML
HYPERTEXT MARKUP LANGUAGE
martedì 22 gennaio 13

57. HTML
HYPERTEXT MARKUP LANGUAGE
Testo visualizzato su
dispositivi elettronici
dotato di hyperlink
cliccabili.
Lettura del documento
non lineare.
martedì 22 gennaio 13

58. HTML
HYPERTEXT MARKUP LANGUAGE
Testo visualizzato su Regole che definiscono la
dispositivi elettronici rappresentazione di un testo,
dotato di hyperlink affidata (nel caso di HTML) a
cliccabili. un software.
Lettura del documento
non lineare.
martedì 22 gennaio 13

59. CSS
CASCADE STYLESHEETS
martedì 22 gennaio 13

60. CSS
CASCADE STYLESHEETS
Fogli di stile
Regolano l’aspetto di un documento HTML
martedì 22 gennaio 13

61. CSS
CASCADE STYLESHEETS
Fogli di stile
Regolano l’aspetto di un documento HTML
SEPARAZIONE TRA CONTENUTO E FORMA
martedì 22 gennaio 13

62. con CSS
martedì 22 gennaio 13

63. senza CSS
martedì 22 gennaio 13

64. le prime pagine web:
- spartane
- poche immagini
- formattazione contenuta
nell’html
martedì 22 gennaio 13

65. <font>
martedì 22 gennaio 13

66. <font>
martedì 22 gennaio 13

67. <font>
XHTML
martedì 22 gennaio 13

68. le prime pagine web:
- spartane
- poche immagini
- formattazione contenuta
nell’html
martedì 22 gennaio 13

69. uso delle tabelle
per il layout
<table>
martedì 22 gennaio 13

70. HEADER
NAVIGATION CONTENT
FOOTER
martedì 22 gennaio 13

71. uso delle tabelle
per il layout
<table>
martedì 22 gennaio 13

72. uso delle tabelle per il layout
<table>
facili da usare uso improprio
WYSIWYG codice sporco
struttura “solida” ... anzi sporchissimo
IE ... fuori standard
martedì 22 gennaio 13

73. 2002
CSS 2.1
martedì 22 gennaio 13

74. tableless layout
CSS is better
focus on CONTENT
martedì 22 gennaio 13

75. tableless layout
<div>
martedì 22 gennaio 13

76. <table border=”1”>
<tr>
<td>Titolo della pagina</td>
</tr>
<tr>
<td>Menu1</td>
<td>Menu2</td>
<td>Menu3</td>
</tr>
<tr>
<td>Contenuto della pagina</td>
</tr>
</table>
martedì 22 gennaio 13

77. <table border=”1”>
<tr>
<td>Titolo della pagina</td>
</tr>
<tr>
<td>Menu1</td>
<td>Menu2</td>
<td>Menu3</td>
</tr>
<tr>
<td>Contenuto della pagina</td>
</tr>
</table>
martedì 22 gennaio 13

78. <table style=”width: 700px;” border=”1”>
<tr style=”width: 700px;” >
<td style=”color: #ff0000; font-size:
32px;” >Titolo della pagina</td>
</tr>
<tr>
<td style=”font-size:16px;”>Menu1</td>
<td style=”font-size:16px;”>Menu2</td>
<td style=”font-size:16px;”>Menu3</td>
</tr>
<tr>
<td style=”font-size:32px;” >Contenuto
della pagina</td>
</tr>
</table>
martedì 22 gennaio 13

79. <table style=”width: 700px;” border=”1”>
<tr style=”width: 700px;” >
<td style=”color: #ff0000; font-size:
32px;” >Titolo della pagina</td>
</tr>
<tr>
<td style=”font-size:16px;”>Menu1</td>
<td style=”font-size:16px;”>Menu2</td>
<td style=”font-size:16px;”>Menu3</td>
</tr>
<tr>
<td style=”font-size:32px;” >Contenuto
della pagina</td>
</tr>
</table>
martedì 22 gennaio 13

80. martedì 22 gennaio 13

81. <div>
<h1>Titolo della pagina</h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<p>Contenuto della pagina</p>
</div>
martedì 22 gennaio 13

82. <div>
<h1>Titolo della pagina</h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<p>Contenuto della pagina</p>
</div>
martedì 22 gennaio 13

83. martedì 22 gennaio 13

84. <div>
<h1>Titolo della pagina</h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<p>Contenuto della pagina</p>
</div>
martedì 22 gennaio 13

85. focus on CONTENT
martedì 22 gennaio 13

86. focus on CONTENT
HTML semantico
martedì 22 gennaio 13

87. focus on CONTENT
HTML semantico
<p> <ul> <h1> etc.
martedì 22 gennaio 13

88. 2003
martedì 22 gennaio 13

89. 2003
martedì 22 gennaio 13

90. CMS opensource
scritto in PHP
martedì 22 gennaio 13

91. fondato da Automattic
di Matt Mullenweg
martedì 22 gennaio 13

92. Matt Mullenweg
ma.tt
martedì 22 gennaio 13

93. Matt Mullenweg
ma.tt
classe 1984
martedì 22 gennaio 13

94. Matt Mullenweg
ma.tt
classe 1984
nominato tra le 50 persone
più influenti del Web
da PC World
martedì 22 gennaio 13

95. Blogging
martedì 22 gennaio 13

96. Blogging
Web 2.0
martedì 22 gennaio 13

97. Blogging
Web 2.0
CSS-only templates
martedì 22 gennaio 13

98. Kubrick Theme
martedì 22 gennaio 13

99. ✓ Facile da usare
martedì 22 gennaio 13

100. ✓ Facile da usare
✓ Leggero
martedì 22 gennaio 13

101. ✓ Facile da usare
✓ Leggero
✓ Community entusiasta
martedì 22 gennaio 13

102. ✓ Facile da usare
✓ Leggero
✓ Community entusiasta
X poco sicuro
martedì 22 gennaio 13

103. ✓ Facile da usare
✓ Leggero
✓ Community entusiasta
X poco sicuro
martedì 22 gennaio 13

104. martedì 22 gennaio 13

105. martedì 22 gennaio 13

106. ✓ Robusto
martedì 22 gennaio 13

107. ✓ Robusto
✓ Ottima gestione contenuti
martedì 22 gennaio 13

108. ✓ Robusto
✓ Ottima gestione contenuti
✓ Community solida
martedì 22 gennaio 13

109. ✓ Robusto
✓ Ottima gestione contenuti
✓ Community solida
X inizialmente ostico
martedì 22 gennaio 13

110. Web 2.0
martedì 22 gennaio 13

111. Web 2.0
BLOG
martedì 22 gennaio 13

112. Web 2.0
BLOG
martedì 22 gennaio 13

113. Web 2.0
BLOG
martedì 22 gennaio 13

114. Web 2.0
BLOG
martedì 22 gennaio 13

115. Web 2.0
HEADER
grandi e illustrati
martedì 22 gennaio 13

116. Web 2.0
ROUNDED CORNERS
martedì 22 gennaio 13

117. Web 2.0
ROUNDED CORNERS
✓ “accoglienti”
✓ “rassicuranti”
✓ focus all’interno dell’oggetto
martedì 22 gennaio 13

118. Web 2.0
SOCIAL ICONS
martedì 22 gennaio 13

119. Web 2.0
SOCIAL ICONS
martedì 22 gennaio 13

120. Web 2.0
SOCIAL ICONS
martedì 22 gennaio 13

121. Web 2.0
AJAX
effetti javascript
anche nell’interfaccia
(div che scompaiono, si ricaricano etc.)
martedì 22 gennaio 13

122. Web 2.0
FEEDS
martedì 22 gennaio 13

123. Web 2.0
FEEDS
le informazioni
possono essere visualizzate
in modo personalizzato
dall’utente
martedì 22 gennaio 13

124. Web 2.0
COLORI
uso di colori pastello
nel web design
martedì 22 gennaio 13

125. Web 2.0
BUTTONS
gli oggetti che richiedono azione
(call-to actions)
sono volutamente sproporzionati
martedì 22 gennaio 13

126. Web 2.0
BUTTONS
ISCRIVITI
martedì 22 gennaio 13

127. Web 2.0
ONE PAGE SITES
martedì 22 gennaio 13

128. Web 2.0
FORM
invia
martedì 22 gennaio 13

129. Web 2.0
USER GENERATED
CONTENT
invia
martedì 22 gennaio 13

130. Web 2.0
USER GENERATED
CONTENT
i siti web diventano
contenitori di contenuti
piuttosto che di oggetti
martedì 22 gennaio 13

131. USER GENERATED
CONTENT
i siti web diventano
contenitori di contenuti
piuttosto che di oggetti
martedì 22 gennaio 13

132. i CMS opensource
più famosi
etc
martedì 22 gennaio 13

133. tools WYSIWYG
per web publishing
etc
martedì 22 gennaio 13

134. FLASH
martedì 22 gennaio 13

135. FLASH
martedì 22 gennaio 13

136. FLASH
martedì 22 gennaio 13

137. FLASH
2008
martedì 22 gennaio 13

138. FLASH
martedì 22 gennaio 13

139. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

140. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

141. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

142. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

143. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

144. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

145. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

146. RESPONSIVE
WEB DESIGN
« in essence, RWD is adapting a website
to best fit the device viewport. »
martedì 22 gennaio 13

147. RESPONSIVE
WEB DESIGN
✓ Accessibilità (canonical web location)
✓ Conservabilità (un solo HTML)
✓ Usabilità (facile da navigare su tutti i dispositivi)
martedì 22 gennaio 13

148. RESPONSIVE
WEB DESIGN
FRAMEWORK
martedì 22 gennaio 13

149. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

150. RESPONSIVE
WEB DESIGN
martedì 22 gennaio 13

151. RESPONSIVE
WEB DESIGN
Google approva ufficialmente
martedì 22 gennaio 13

152. RESPONSIVE
WEB DESIGN
Google approva ufficialmente
Navigazione sito tap-oriented
martedì 22 gennaio 13

153. RESPONSIVE
WEB DESIGN
Google approva ufficialmente
Navigazione sito tap-oriented
Interfaccia web che trascura
l’hover dei link?
martedì 22 gennaio 13

154. follow.androe.com
martedì 22 gennaio 13