forked from larryhynes/nojpeg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnojpegit.html
173 lines (140 loc) · 7.56 KB
/
nojpegit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="IT">
<head>
<meta charset="utf-8">
<title>NoJPEG</title>
<meta name="description" content="Perché non dovresti usare JPEG per il tuo logo">
<meta name="author" content="Larry Hynes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal/css/reveal.min.css">
<link rel="stylesheet" href="reveal/css/theme/nojpeg.css" id="theme">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal/css/print/pdf.css' : 'reveal/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="NoJPEG">
<meta name="application-name" content="NoJPEG">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>NoJPEG</h1>
<h3>Perché non dovresti usare JPEG per il tuo logo</h3>
<p>Hai mai pensato perché i designer continuino a chiederti file .eps?</p>
<p>Puoi usare la freccia → per avanzare, o cliccare sul triangolino blu là in basso.</p>
<p><a href="nojpegcz.html">Česky</a>, <a href="nojpegptpt.html">Português</a>, <a href="nojpegpt.html">Português Brasileiro</a>, <a href="index.html">English</a>, <a href="nojpeges.html">Español</a>, <a href="nojpegfr.html">Francais</a>, <a href="nojpegca.html">Català</a>, <a href="nojpegnl.html">Nederlands</a>, <a href="nojpegru.html">Русский</a>, <a href="nojpegtr.html">Türkçe</a>.</p>
</section>
<section>
<h2>Quindi, abbiamo un logo...</h2>
<img src="img/NoJPEG.jpg" alt="NoJPEG">
<p>Ed è un file JPEG.</p>
<p class="fragment">Quindi ha uno sfondo bianco di default.</p>
<p class="fragment">Non è fico.</p>
</section>
<section>
<h2>Non vogliamo uno sfondo bianco</h2>
<img src="img/slide.jpg" alt="Slide">
<p>Cioè, e se volessimo usare il logo su uno sfondo di colore diverso?</p>
<p class="fragment">Sì, dobbiamo portarci dietro quell'area bianca.</p>
</section>
<section>
<h2>Cosa succede, invece, se usiamo un EPS?</h2>
<img src="img/slide2.jpg" alt="Slide2">
<p>Ta-da! Niente sfondo bianco.</p>
<p class="fragment">Ma aspetta, c'è di più!</p>
</section>
<section>
<h2>Cosa succede se allarghiamo un JPEG?</h2>
<img src="img/pixeljpeg.jpg" alt="Pixellated JPEG">
<p>Diventa sfocato, e orribile!</p>
</section>
<section>
<h2>E cosa succede se allarghiamo un EPS?</h2>
<img src="img/slide3.jpg" alt="Slide3">
<p>Ta-da! Possiamo allargare un EPS <i>all'infinito</i> e rimarrà perfetto.</p>
</section>
<section>
<h2>Un altro svantaggio dell'usare JPEG:</h2>
<img src="img/NoJPEG_compressed.jpg" alt="compressed JPEG">
<p>Siccome JPEG è un formato a compressione “lossy” puoi perdere qualità esportando il file.</p>
</section>
<section>
<h2>“Ma non riesco a leggere file EPS!”</h2>
<p>È vero, EPS è un formato per professionisti. Potresti non essere in grado di aprirlo.</p>
<p>(Ma fidati: ogni grafico, web designer e pubblicitario può.)</p>
<p>Quindi, cosa facciamo?</p>
</section>
<section>
<h2>Saluta i...</h2>
<img src="img/png.jpg" alt="PNG">
<p>File PNG. È come un JPEG quindi puoi aprirlo ed usarlo in qualsiasi ambito</p>
<p class="fragment">Ma senza lo sfondo bianco. Yay!</p>
</section>
<section>
<h2>“Quindi mi stai dicendo che ho bisogno di 2 file?”</h2>
<p>Sì.</p>
<ol>
<li>Un file EPS per grafici, web designer e altri professionisti</li>
<li>E un file PNG per uso interno, presentazioni...</li>
</ol>
</section>
<section>
<h2>Non mi credi?</h2>
<p>Chiediamo a twitter come lo fanno.</p>
<img src="img/Cattura.PNG" alt="Twitter">
<p>EPS e PNG. (Quei ragazzi sono capaci...)</p>
</section>
<section>
<h2>È un po' più tecnico di quanto questa presentazione possa far credere</h2>
<p>Ma non pensarci per ora. Assicurati di avere un file <i>vettoriale</i> EPS e un PNG con sfondo <i>trasparente</i> .</p>
<p>Divertiti!</p>
</section>
<section>
<h2>Altre opzioni da considerare...</h2>
<p>Puoi usare sia SVG che file PDF per gestire la tua identità online. Chiedi un consiglio ai tuoi designer di fiducia.</p>
<p>(Questo <i>non</i> significa che puoi inserire un JPEG in un file word e salvarlo come PDF.)</p>
</section>
<section>
<h1>Credits</h1>
<p>Brought to you by <a href="http://larryhynes.com/about.html">Larry Hynes</a>.</p>
<p>Created with the only mighty <a href="http://lab.hakim.se/reveal-js/#/">Reveal.js</a>.</p>
<p>Inspired by <a href="http://no-www.org/">no-www.org</a>.</p>
<p>With thanks to <a href="https://twitter.com/joffley">@joffley</a>, <a href="https://twitter.com/bjango">@bjango</a>, <a href="https://twitter.com/jescalan">@jescalan</a>, <a href="https://twitter.com/arnauvp">@arnauvp</a> and Al Haigh for feedback and suggestions.</p>
<p>Why not get involved at <a href="https://github.com/larryhynes/nojpeg">GitHub</a>?</p>
</section>
</div>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
transition: 'convex',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true },
]
});
</script>
</body>
</html>