forked from larryhynes/nojpeg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
nojpegpt.html
174 lines (141 loc) · 7.08 KB
/
nojpegpt.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
174
<!doctype html>
<html lang="PT">
<head>
<meta charset="utf-8">
<title>SemJPEG</title>
<meta name="description" content="Porque você não deve usar JPEG para seu logo">
<meta name="author" content="Diogo Ambrosio">
<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>SemJPEG</h1>
<h3>Porque você não deve usar JPEG para seu logo.</h3>
<p>Já se perguntou por que os designers vivem te pedindo o arquivo EPS?</p>
<p>Use a tecla → para avançar, ou clique na seta azul no canto inferior.</p>
<p><a href="nojpegcz.html">Česky</a>, <a href="nojpegptpt.html">Português</a>, <a href="index.html">English</a>, <a href="nojpegit.html">Italiano</a>, <a href="nojpeges.html">Español</a>, <a href="nojpegfr.html">Francais</a>, <a href="nojpeggl.html">Galego</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>Então, temos um logo...</h2>
<img src="img/NoJPEG.jpg" alt="NoJPEG">
<p>E é um arquivo JPEG.</p>
<p class="fragment">Então ele tem um fundo branco por padrão.</p>
<p class="fragment">Isso não é bom.</p>
</section>
<section>
<h2>Nós não queremos um fundo branco</h2>
<img src="img/slide.jpg" alt="Slide">
<p>Quer dizer, e se quisermos usar nosso logo em um fundo colorido?</p>
<p class="fragment">Sim, estamos presos com esse retângulo branco atrás.</p>
</section>
<section>
<h2>O que acontece se usarmos um arquivo EPS?</h2>
<img src="img/slide2.jpg" alt="Slide2">
<p>Tcharaaam! Sem fundo branco.</p>
<p class="fragment">Mas espere, tem mais!</p>
</section>
<section>
<h2>O que acontece se aumentarmos um JPEG?</h2>
<img src="img/pixeljpeg.jpg" alt="Pixellated JPEG">
<p>Ele fica borrado e horrível!</p>
</section>
<section>
<h2>E se aumentarmos o arquivo EPS?</h2>
<img src="img/slide3.jpg" alt="Slide3">
<p>Tcharaaam! Podemos aumentar o arquivo EPS <i>indefinidamente</i> e ele continuará bonito e nítido.</p>
</section>
<section>
<h2>Outro problema usando JPEG</h2>
<img src="img/NoJPEG_compressed.jpg" alt="compressed JPEG">
<p>O JPEG é um formato de compressão com perdas, logo ele perde a qualidade da sua arte.</p>
</section>
<section>
<h2>“Mas eu não consigo ler um arquivo EPS!”</h2>
<p>É verdade, arquivos EPS são um tipo de arquivo 'profissional'. Talvez você não consiga abrir.</p>
<p>(Mas fique tranquilo, designers, gráficas, desenvolvedores web, todos eles conseguem ler.)</p>
<p>Então o que fazemos?</p>
</section>
<section>
<h2>Diga olá para...</h2>
<img src="img/png.jpg" alt="PNG">
<p>Arquivos PNG. É como um JPEG, então você pode abrir, usar nos seus arquivos internos, apresentações, etc.</p>
<p class="fragment">E sem fundo branco! \o/</p>
</section>
<section>
<h2>“Então você está dizendo que preciso de dois arquivos com o logo?”</h2>
<p>Sim.</p>
<ol>
<li>Um EPS para os designers, gráficas, desenvolvedores e todos dessa área.</li>
<li>Um arquivo PNG para apresentações, uso interno, etc.</li>
</ol>
</section>
<section>
<h2>Não acreditam em mim?</h2>
<p>Vamos perguntar ao Twitter como eles fazem.</p>
<img src="img/twitter.png" alt="Twitter">
<p>EPS e PNG. (E esses caras são espertos)</p>
</section>
<section>
<h2>É um pouco mais técnico do que essa apresentação faz parecer</h2>
<p>Mas não se preocupe com isso agora. Só tenha certeza que você tem um arquivo <i>vetorizado</i> EPS e um arquivo PNG com um fundo <i>transparente</i> pra seu logo.</p>
<p>E pronto! Divirta-se!</p>
</section>
<section>
<h2>Outras opções a se considerar...</h2>
<p>Arquivos SVG e PDF podem ser usados eficientemente para cuidar da sua imagem online e na gráfica... peça detalhes ao seu designer favorito.</p>
<p>(Isso <i>não</i> quer dizer que você pode colocar um arquivo JPEG em um documento do Word e salvar como PDF.)</p>
</section>
<section>
<h1>Créditos</h1>
<p>Trazido a você por <a href="http://larryhynes.com/about.html">Larry Hynes</a>.</p>
<p>Criado com o poderoso <a href="http://lab.hakim.se/reveal-js/#/">Reveal.js</a>.</p>
<p>Inspirado por <a href="http://no-www.org/">no-www.org</a>.</p>
<p>Com agradecimentos a <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> e Al Haigh pelo feedback e sugestões.</p>
<p>Traduzido para o português brasileiro por <a href="https://twitter.com/diogotux">@diogotux</a>
<p>Por que não se une a nós no <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>