Web design in social media era: from project to visual; from interaction social media strategies to web 2.0 visual style. Flowcharts: from site layouts to flowcharts of social media managements crisis. Typography and fonts. Flowcharting online web apps. Typography web apps and sites.
14. Web Communication and Social Media - Media design 03 2012
http://www.loisjeans.com/web2012/es
venerdì 1 giugno 12
15. Web Communication and Social Media - Media design 03 2012
http://www.loisjeans.com/web2012/es
venerdì 1 giugno 12
16. Web Communication and Social Media - Media design 03 2012
http://www.bluezonesproject.com/
venerdì 1 giugno 12
17. Web Communication and Social Media - Media design 03 2012
http://beta.theexpressiveweb.com/
venerdì 1 giugno 12
18. Web Communication and Social Media - Media design 03 2012
http://beta.theexpressiveweb.com/
venerdì 1 giugno 12
19. Web Communication and Social Media - Media design 03 2012
http://beta.theexpressiveweb.com/
venerdì 1 giugno 12
20. Web Communication and Social Media - Media design 03 2012
La classifica dei siti più visitati in italia maggio 2012
http://www.alexa.com/topsites/countries/IT
venerdì 1 giugno 12
21. Web Communication and Social Media - Media design 03 2012
La classifica dei siti più visitati in italia maggio 2012
http://www.alexa.com/topsites/countries/IT
venerdì 1 giugno 12
22. Web Communication and Social Media - Media design 03 2012
La classifica dei 20 siti più visitati in italia nel 2011 (marzo 2011 GOOGLE/ALEXA)
http://www.google.com/adplanner/static/top100countries/it.html
http://www.alexa.com/topsites/countries/IT
venerdì 1 giugno 12
23. Web Communication and Social Media - Media design 03 2012
La classifica dei 1000 siti più visitati nel mondo
http://www.google.com/adplanner/static/top1000/index.html
venerdì 1 giugno 12
24. Web Communication and Social Media - Media design 03 2012
Web Design / site production
Interaction Design
Interaction Design
venerdì 1 giugno 12
25. Web Communication and Social Media - Media design 03 2012
Web Design
Web design is the skill of creating presentations of content
(usually hypertext or hypermedia) that is delivered to an end-
user through the World Wide Web, by way of a Web browser or
other Web-enabled software like Internet television clients,
microblogging clients and RSS readers.
The intent of web design[1] is to create a web site—a collection
of electronic documents and applications that reside on a web
server/servers and present content and interactive features/
interfaces to the end user in form of Web pages once
requested. Such elements as text, bit-mapped images (GIFs,
JPEGs) and forms can be placed on the page using HTML/
XHTML/XML tags. Displaying more complex media (vector
graphics, animations, videos, sounds) requires plug-ins such
as Adobe Flash, QuickTime, Java run-time environment, etc.
Plug-ins are also embedded into web page by using HTML/
XHTML tags.
venerdì 1 giugno 12
26. Web Communication and Social Media - Media design 03 2012
Graphic Design
The term graphic design can refer to
a number of artistic and professional
disciplines which focus on visual
communication and presentation.
Various methods are used to create
and combine symbols, images and/or
words to create a visual representation
of ideas and messages. A graphic
designer may use typography, visual
arts and page layout techniques to
produce the final result. Graphic design
often refers to both the process
(designing) by which the
communication is created and the
products (designs) which are
generated.
venerdì 1 giugno 12
27. Web Communication and Social Media - Media design 03 2012
Interaction Design
Interaction design (IxD) is the study of
devices with which a user can interact, in
particular computer users. The practice
typically centers around "embedding
information technology into the ambient
social complexities of the physical
world."[1] It can also apply to other types
of non-electronic products and services,
and even organizations. Interaction
design defines the behavior (the
"interaction") of an artifact or system in
response to its users.
venerdì 1 giugno 12
28. Web Communication and Social Media - Media design 03 2012
Social Media
Social media is a term used to describe the
type of media that is based on conversation
and interaction between people online.
Where media means digital words, sounds
& pictures which are typically shared via the
internet and the value can be cultural,
societal or even financial.
Social media are media designed to be
disseminated through social interaction,
using highly accessible and scalable
publishing techniques. Social media use
web-based technologies to transform and
broadcast media monologues into social
media dialogues. They support the
democratization of knowledge and
information and transform people from
content consumers to content producers.
venerdì 1 giugno 12
29. Web Communication and Social Media - Media design 03 2012
Interaction Design
Interaction Design new Patterns
venerdì 1 giugno 12
30. Web Communication and Social Media - Media design 03 2012
Da Utente singolo a Sociale (plurale)
UGC
interazioni
interazioni con altri utenti,
con sito , interfaccia,
, interfaccia, media condivisi
azioni solitarie dialoghi
community
venerdì 1 giugno 12
31. Web Communication and Social Media - Media design 03 2012
cambio di prospettiva nel progetto del Social Web
da Statico a Dinamico a Vivo
progettazione da Statica a Liquido a Evolutiva
dal Sito a Ecosistema
dal semplice Ascolto al
coinvolgimento alla
Partecipazione emotiva
da utente a community
venerdì 1 giugno 12
32. Web Communication and Social Media - Media design 03 2012
progettare PER gli utenti
Target
progettare CON gli utenti
User Centered Design Social Media Design
venerdì 1 giugno 12
33. Web Communication and Social Media - Media design 03 2012
progettazione tradizionale progetto social
Target Crowd
Web Statico Dinamico/Organico
Dati Oggettivi Emotività
Transazioni Relazioni
Progettazione
One Shot
continua
venerdì 1 giugno 12
34. Web Communication and Social Media - Media design 03 2012
cambio di prospettiva nel progetto del Social Web
venerdì 1 giugno 12
36. Web Communication and Social Media - Media design 03 2012
Stilemi visivi Social Web
importanza del logo
colori pastello, green, organics, healthy
forme morbide, arrotondate, organiche
aria, grande aree di respiro visivo
“green is the new gray”
“black is dead” Bottoni “stelloni”, trend gadgets
interfaccia minimale vs contents
bianco bianco bianco
tante (ri)flessioni sul pavimento
grande uso della Typography
tanta grafica, no stock photos
venerdì 1 giugno 12
37. Web Communication and Social Media - Media design 03 2012
Web 2.0 Style
• Semplicità
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• Angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Soft Icons
• Typography
• Splash/Star
venerdì 1 giugno 12
38. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
39. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
40. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
41. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
42. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
43. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
44. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
45. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
46. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
47. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
48. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
49. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
50. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
51. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
52. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
53. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
54. Web Communication and Social Media - Media design 03 2012
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
venerdì 1 giugno 12
55. Web Communication and Social Media - Media design 03 2012
Web 2.0 Style http://theconversationprism.com/click/
venerdì 1 giugno 12
56. Web Communication and Social Media - Media design 03 2012
Web 2.0 Style http://www.go2web20.net/
venerdì 1 giugno 12
57. Web Communication and Social Media - Media design 03 2012
Web 2.0 Style http://mashable.com/
venerdì 1 giugno 12
58. Web Communication and Social Media - Media design 03 2012
Web 2.0 Style http://momb.socio-kybernetics.net/
venerdì 1 giugno 12
59. Web Communication and Social Media - Media design 03 2012
http://emilychang.com/ehub/
Web 2.0 Style
venerdì 1 giugno 12
60. Web Communication and Social Media - Media design 03 2012
http://emilychang.com/ehub/
Web 2.0 Style
venerdì 1 giugno 12
130. Web Communication and Social Media - Media design 03 2012
flowchart delle azioni
venerdì 1 giugno 12
131. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
flowchart dei processi
venerdì 1 giugno 12
132. Web Communication and Social Media - Media design 03 2012
flowchart friendfeed
venerdì 1 giugno 12
133. Web Communication and Social Media - Media design 03 2012
flowchart post
http://www.bydatabedriven.com/social-media-flow-chart-blog-vs-facebook-vs-twitter/
venerdì 1 giugno 12
134. Web Communication and Social Media - Media design 03 2012
flowchart post
http://www.asce.org/followasce/
venerdì 1 giugno 12
135. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
flowchart post
http://www.socialfish.org/2010/11/social-media-response-triage.html
venerdì 1 giugno 12
136. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Social Media
venerdì 1 giugno 12
137. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Social Media
venerdì 1 giugno 12
138. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Pfizer Canada has
modified an
assessment chart
that was originally
developed by the U.S.
Air Force . The flow
chart will guide Pfizer
Canada in
responding to
remarks on social
media networks
which are either the
property of,
sponsored by or have
a relation of some
kind to Pfizer Canada
Social Media
venerdì 1 giugno 12
139. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Pfizer Canada has
modified an
assessment chart
that was originally
developed by the U.S.
Air Force . The flow
chart will guide Pfizer
Canada in
responding to
remarks on social
media networks
which are either the
property of,
sponsored by or have
a relation of some
kind to Pfizer Canada
Social Media
venerdì 1 giugno 12
140. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Pfizer Canada has
modified an
assessment chart
that was originally
developed by the U.S.
Air Force . The flow
chart will guide Pfizer
Canada in
responding to
remarks on social
media networks
which are either the
property of,
sponsored by or have
a relation of some
kind to Pfizer Canada
Social Media
venerdì 1 giugno 12
141. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Social Media
venerdì 1 giugno 12
142. Web Communication and Social Media - Media design 03 2012
Community Management Scenario Map flowchart post
by David Armano - @Armano
venerdì 1 giugno 12
143. Web Communication and Social Media - Media design 03 2012
Community Management Scenario Map flowchart post
http://
www.slidesh
are.net/
morganmclint
ic/red-alert-
handling-a-
crisis-in-a-
sm-
landscape?
by David Armano - @Armano
venerdì 1 giugno 12
144. Web Communication and Social Media - Media design 03 2012
Community Management Scenario Map flowchart post
venerdì 1 giugno 12
145. Web Communication and Social Media - Media design 03 2012
Community Management Scenario Map flowchart post
venerdì 1 giugno 12
146. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Community Management Scenario Map flowchart post
venerdì 1 giugno 12
147. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
Community Management Scenario Map flowchart post
http://www.hivestrategies.com/
venerdì 1 giugno 12
148. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
venerdì 1 giugno 12
150. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
venerdì 1 giugno 12
151. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
http://socialmediatoday.com
venerdì 1 giugno 12
152. Web Communication and Social Media - Media design 03 2012
http://sportfanconnect.com/
http://socialmediatoday.com
venerdì 1 giugno 12
153. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
http://www.stampsconnect.com/
http://socialmediatoday.com
venerdì 1 giugno 12
156. Web Communication and Social Media - Media design 03 2012
Social Media Adoption Decision Flowchart
venerdì 1 giugno 12
157. Tools
Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
+ +
Il primo prototipo di Twitter
venerdì 1 giugno 12
158. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
venerdì 1 giugno 12
159. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
venerdì 1 giugno 12
160. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
venerdì 1 giugno 12
161. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
venerdì 1 giugno 12
162. Tools
Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
http://www.lovelycharts.com/ 1
2
100% free
Online application
3 Create flowcharts, sitemaps, wireframes
venerdì 1 giugno 12
163. Tools
Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
http://www.lovelycharts.com/ 1
2
100% free
Online application
3 Create flowcharts, sitemaps, wireframes
venerdì 1 giugno 12
164. Web Communication and Social Media - Media design 03 2012
http://www.lovelycharts.com/
venerdì 1 giugno 12
165. Tools
Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups
1 Freemium
http://www.mockflow.com/ 2 Web 2.0 air interface
3 desktop/online
venerdì 1 giugno 12
166. Web Communication and Social Media - Media design 03 2012
http://www.mockflow.com/
venerdì 1 giugno 12
167. Web Communication and Social Media - Media design 03 2012
http://www.mockflow.com/
venerdì 1 giugno 12
168. Web Communication and Social Media - Media design 03 2012
http://www.mockflow.com/
http://www.youtube.com/watch?v=sqF0AWam-Cg
venerdì 1 giugno 12
169. Web Communication and Social Media - Media design 03 2012
http://www.mockflow.com/
http://www.youtube.com/watch?v=U8rgQyUVMKY
venerdì 1 giugno 12
170. Web Communication and Social Media - Media design 03 2012
http://www.mockflow.com/
http://www.youtube.com/watch?v=4Vk2B-jWzyQ
venerdì 1 giugno 12
171. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups Tools
http://www.balsamiq.com/
1 handrawn style
1 79$ una tantum
2 Online / desktop
venerdì 1 giugno 12
172. Web Communication and Social Media - Media design 03 2012
http://www.balsamiq.com/
http://www.youtube.com/watch?v=aJTuFRaIi_g
venerdì 1 giugno 12
173. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups Tools
HotGloo
Pencil Project
ProtoShare Axure RP
Justinmind Prototyper Gliffy
Serena Prototype Composer
Pidoco FlairBuilder
JumpChart iPlotz
Protofluid.com
GUI Design Studio
OmniGraffle (Mac, iPad)
Microsoft Visio
Mockingbird
venerdì 1 giugno 12
174. Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups Tools
iMockups
http://www.youtube.com/watch?v=LOyIVqJcGfc
venerdì 1 giugno 12
175. Web Communication and Social Media - Media design 03 2012
http://www.youtube.com/watch?v=hII6AbGrWR8
venerdì 1 giugno 12
176. Web Communication and Social Media - Media design 03 2012
Progetto comunicazione visiva / Layout
venerdì 1 giugno 12
177. Web Communication and Social Media - Media design 03 2012
Progetto comunicazione visiva Layout
venerdì 1 giugno 12
178. Web Communication and Social Media - Media design 03 2012
Progetto comunicazione visiva Layout
Consistenza
concepts
Visual design
tono del design Stile gerarchie visive
metafora elementi visivi iconici
tipologia di sito web
linguaggio
simbologia astratte/stilizzazioni CSS
diagrammi semplici
illustrazioni stilizzate
interfaccia illustrazioni realistiche
orientamento fotografie
illustrazioni iperrealistiche
testo
typography
testo grafico
content
venerdì 1 giugno 12
179. Web Communication and Social Media - Media design 03 2012
Typography/Fonts i caratteri hanno carattere
venerdì 1 giugno 12
180. Web Communication and Social Media - Media design 03 2012
Typography/Fonts
venerdì 1 giugno 12
181. Web Communication and Social Media - Media design 03 2012
Typography/Fonts
Garamond
Bodoni
Times New Roman
venerdì 1 giugno 12
182. Web Communication and Social Media - Media design 03 2012
Typography/Fonts
venerdì 1 giugno 12
183. Web Communication and Social Media - Media design 03 2012
Typography/Fonts
ordini di composizione
venerdì 1 giugno 12
184. Web Communication and Social Media - Media design 03 2012
famiglie
venerdì 1 giugno 12
200. Web Communication and Social Media - Media design 03 2012
limitate capacità di formattazione
limitate capacità di uso dei font Fonts & Web
html
formattazione e contenuto uniti
contenuto separato dallo stile
css
Hyper Test Markup Language
formattazione e impaginazione avanzata
limitate capacità di uso dei font
cascading
style
sheet
sIFR 2.0
Scalable Inman Flash Replacement (sIFR)
rendering dei font grazie al plugin flash
testo in grafica ajax
jpeg gif png
solo per titoli non per il body text
Asynchronous JavaScript And XMl
flash
formattazione e impaginazione avanzata
uso di qualsiasi font
downloadable fonts?
distribuzione illegale EULA
DRM
venerdì 1 giugno 12
201. Web Communication and Social Media - Media design 03 2012
Font esistenti: decine di migliaia. Font usate su web: 5
Famiglie di fonts usabili Serif, Sans-Serif, Monospace, Script, Fantasy
font usate: Arial • Georgia • Times New Roman• Trebuchet • Verdana
Web-safe fonts
Microsoft's Core fonts for the Web (1996 - 2002)
Since being released under Microsoft's Core fonts for the Web
program, Arial, Georgia, and Verdana have become three de
facto fonts of the Web.
In order to ensure that all web users had a basic set of fonts,
Microsoft started Core fonts for the Web initiative. The released
fonts include Arial, Georgia, Times New Roman, and Verdana
under an EULA which made them freely distributable. Their high
penetration rate has made them a staple for web designers.
CSS2 attempted to increase the tools available to web
developers by adding font synthesis, improved font matching and
the ability to download remote fonts.[Some CSS2 font properties
were removed from CSS2.1 and later included in CSS3.
Web-safe fonts
Web-safe fonts are fonts likely to be present on a wide
range of computer systems, and used by web content
authors to increase the likelihood that content will be
displayed in their chosen font. If a visitor to a website
does not have the specified font, their browser will
attempt to select a similar alternative, based on the
author-specified fallback fonts and generic families.
font web safe usabili mac/win: 60
venerdì 1 giugno 12
202. Web Communication and Social Media - Media design 03 2012
Webfonts
Webfonts are font files embedded in websites
using the @font-face rule. This technique was first
available in Netscape Navigator 4 using Bitstream's
TrueDoc standard but was discontinued in Netscape
Navigator 6.
Microsoft developed the Embedded OpenType
format (.eot) which is supported in Internet Explorer
since version 4.
In march 2008 Apple introduced Safari 3.1 which
supports the @font-face rule, but it doesn't use any
of the previously mentioned formats, but the popular
font formats TrueType and OpenType (with
TrueType or PostScript outlines). Other browser
makers are following Apple's lead. Firefox 3.5 and
Opera 10 will also support direct linking of TrueType
and OpenType fonts using the @font-face rule
Commercial fonts can often not be embedded in website
using the @font-face rule, because the font files need to be
uploaded to a public server, where they could be
downloaded by anyone. Some font vendors allow the
embedding of EOT files, but not TrueType or OpenType. You
need the check the End User License Agreement (EULA) of
the font vendor before embedding a font in your website..
http://www.webfonts.info/
http://www.webfonts.info/wiki/index.php?
title=Fonts_available_for_@font-face_embedding
venerdì 1 giugno 12
203. Web Communication and Social Media - Media design 03 2012
http://code.google.com/apis/webfonts/
venerdì 1 giugno 12
204. Web Communication and Social Media - Media design 03 2012
http://www.google.com/webfonts/
venerdì 1 giugno 12
208. Web Communication and Social Media - Media design 03 2012
http://typekit.com/
venerdì 1 giugno 12
209. Web Communication and Social Media - Media design 03 2012
http://typekit.com/
venerdì 1 giugno 12
210. Web Communication and Social Media - Media design 03 2012
http://blog.typekit.com/
venerdì 1 giugno 12
211. Web Communication and Social Media - Media design 03 2012
http://blog.typekit.com/
venerdì 1 giugno 12
212. Web Communication and Social Media - Media design 03 2012
http://blog.typekit.com/
venerdì 1 giugno 12
213. Web Communication and Social Media - Media design 03 2012
http://typekit.com/
venerdì 1 giugno 12
214. Web Communication and Social Media - Media design 03 2012
Typography/Fonts http://www.typotheque.com/site/index.php
venerdì 1 giugno 12
215. Web Communication and Social Media - Media design 03 2012
http://www.extensis.com/en/WebINK/
venerdì 1 giugno 12
216. Web Communication and Social Media - Media design 03 2012
Templates per Blog
wordpress
venerdì 1 giugno 12
217. Web Communication and Social Media - Media design 03 2012
Templates per Blog
wordpress
venerdì 1 giugno 12
218. Web Communication and Social Media - Media design 03 2012
Templates per Blog
Tumblr
venerdì 1 giugno 12
219. Web Communication and Social Media - Media design 03 2012
http://ilovetypography.com/
venerdì 1 giugno 12
220. Web Communication and Social Media - Media design 03 2012
http://www.newyorker.com/
venerdì 1 giugno 12
221. Web Communication and Social Media - Media design 03 2012
http://blog.typekit.com/2010/11/30/bring-your-own-fonts-to-typekit/
venerdì 1 giugno 12
222. Web Communication and Social Media - Media design 03 2012
http://webtypography.net/
venerdì 1 giugno 12
223. Web Communication and Social Media - Media design 03 2012
http://www.ogilvy.com/
venerdì 1 giugno 12
224. Web Communication and Social Media - Media design 03 2012
http://imagemechanics.com.au/#!/pages/our-story
venerdì 1 giugno 12
225. Web Communication and Social Media -- Media design 03
Web Communication and Social Media Media design 03 2012
http://newsmap.jp/
venerdì 1 giugno 12
226. Web Communication and Social Media - Media design 03 2012
http://carsonified.com/events/
venerdì 1 giugno 12
227. Web Communication and Social Media - Media design 03 2012
Typography/Fonts
http://www.organicgrid.com/
venerdì 1 giugno 12
228. Web Communication and Social Media - Media design 03 2012
Typography/Fonts http://www.alistapart.com/
venerdì 1 giugno 12
229. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/
what font?
venerdì 1 giugno 12
230. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/
venerdì 1 giugno 12
231. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/
venerdì 1 giugno 12
232. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools
http://itunes.apple.com/it/app/whatthefont/id304304134?mt=8
venerdì 1 giugno 12
233. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
234. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
235. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
236. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://typenav.fontshop.com/
venerdì 1 giugno 12
237. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://itunes.apple.com/it/app/fontshuffle/id298268157?mt=8
FontShuffle
venerdì 1 giugno 12
238. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.identifont.com/identify.html
venerdì 1 giugno 12
239. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.typetester.org/
venerdì 1 giugno 12
240. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools
http://csstypeset.com/
http://www.suprb.com/apps/csstype/
http://csstxt.com/
venerdì 1 giugno 12
241. Web Communication and Social Media - Media design 03 2012
http://www.codestyle.org/
Typography/Fonts Tools http://www.codestyle.org/css/font-family/index.shtml
venerdì 1 giugno 12
242. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.fontshop.com./
venerdì 1 giugno 12
243. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.linotype.com/
venerdì 1 giugno 12
244. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.adobe.com/type/fontfinder/
venerdì 1 giugno 12
245. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.adobe.com/type/
venerdì 1 giugno 12
246. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.emigre.com/
venerdì 1 giugno 12
247. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://new.myfonts.com/
venerdì 1 giugno 12
248. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://new.myfonts.com/
venerdì 1 giugno 12
249. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.itcfonts.com/
venerdì 1 giugno 12
250. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.dafont.com/
venerdì 1 giugno 12
251. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.urbanfonts.com/
venerdì 1 giugno 12
252. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/
venerdì 1 giugno 12
253. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/
venerdì 1 giugno 12
254. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/
venerdì 1 giugno 12
255. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/
venerdì 1 giugno 12
256. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/
venerdì 1 giugno 12
257. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/
venerdì 1 giugno 12
258. Web Communication and Social Media - Media design 03 2012
http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/
venerdì 1 giugno 12
259. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.storyabout.net/typedrawing/index.php
venerdì 1 giugno 12
260. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://itunes.apple.com/it/app/type-drawing/id314072879?mt=8
venerdì 1 giugno 12
261. Web Communication and Social Media - Media design 03 2012
Typography/Fonts Tools http://www.wordle.net/
http://www.quirinale.it/elementi/Continua.aspx?tipo=Discorso&key=1820
Testo integrale del messaggio del Presidente Napolitano alle
Camere sulla Legge in materia di lavoro
Palazzo del Quirinale, 31/03/2010
venerdì 1 giugno 12
262. Cristian Contini
Art Direction - Communication - New & Next Media
E-MAIL cristian.contini@gmail.com
http://www.augmentedadvertising.com
CV http://www.linkedin.com/in/cristiancontini
twitter: @cristiancontini
Skype: cristiancontini
WEB http://www.cristiancontini.it/
BLOG http://cristiancontini.blogspot.com
SECOND LIFE Grocon Emoto
venerdì 1 giugno 12