-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
342 lines (314 loc) · 21.3 KB
/
index.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="optdesc.css">
<title>Portfolio</title>
</head>
<body>
<!-- <header>
<nav>
menu
</nav>
</header> -->
<main>
<div class="inicio">
<section>
<h1>Webkoder</h1>
<span>por Ricardo Rodrigues</span>
<div>
<a href="https://www.facebook.com/ricardofrr" target='_blank'>
<i class="fa fa-2x fa-facebook-square"></i>
</a>
<a href="https://github.com/webkoder" target='_blank'>
<i class="fa fa-2x fa-github"></i>
</a>
<a href="https://ricardofrr.deviantart.com" target='_blank'>
<i class="fa fa-2x fa-deviantart"></i>
</a>
<a href="https://www.last.fm/user/ricardofrr" target='_blank'>
<i class="fa fa-2x fa-lastfm"></i>
</a>
<a href="https://www.linkedin.com/in/ricardo-rodrigues-1b352855/" target='_blank'>
<i class="fa fa-2x fa-linkedin"></i>
</a>
<i id='scrollme' class="fa fa-2x fa-arrow-down"></i>
</div>
</section>
</div>
<article class='habilidades'>
<h2>Conhecimentos</h2>
<p>
Os niveis descritos aqui foram definidos por um critério que se baseia em tempo e o tão confortável é a utilização destas tecnologias em projetos. O <b>avançado</b> para mim, é o item que eu já trabalho a muito tempo e me sinto confiança em utiliza-lo. Quanto ao <b>básico</b>, eu já usei em poucos projetos e pode levar mais tempo de execução do serviço, mas ainda eu tenho grande interesse de aprofundar o conhecimento, por isso ele está nesta lista.
</p>
<h3>HTML</h3>
<section>
<div>
<span class='titulo'>HTML</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>CSS</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>Bootstrap</span>
<span class='nivel'>Avançado</span>
</div>
</section>
<div class="optdesc" data-secao='desc_html'>
<p>
Comecei a estudar HTML aos 15 anos, como hobbie, a principio fiz um site da turma da escola depois de ler um livro chamado "Faça um site - Front Page 2000". Mesmo usando o Front Page, o autor focava bastante no código HTML. Desde então eu acompanhei a evolução do HTML/CSS e as tendências, como tableless, novos formatos (svg, webm etc), frameworks e atualmente a enfase no mobile.<br><br>
O Bootstrap foi um processo natural, com seu enorme sucesso e facilidade de adaptação de layouts torno-se quase um padrão nos meus projetos profissionais.
</p>
</div>
<h3>Back End</h3>
<section>
<div>
<span class='titulo'>PHP</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>ASP</span>
<span class='nivel'>Intermediário</span>
</div>
<div>
<span class='titulo'>Laravel</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>Python</span>
<span class='nivel'>Básico</span>
</div>
</section>
<div class="optdesc" data-secao='desc_backend'>
<p id='desc_backend'>
Minha experiências com back end começou no curso técnico, fiz projetos acadêmicos usando o ASP clássico. Logo após a conclusão do curso, decidi aprender o PHP, sua sintaxe mais simples e a grande comunidade em volta tornou mais fácil a transição, comecei a trabalhar profissionalmente com PHP na BrList, inicialmente meus projetos eram feitos com PHP puro. Após alguns anos, passei a utilizar em grande parte dos projetos o Laravel como framework MVC.<br><br>
Desenvolvi uma API em Python, sobre um framework Django Restful. o serviço ficou funcional, mas não entrou no ar devido ao um problema de confuguração do servidor.
</p>
</div>
</div>
<h3>Javascript</h3>
<section>
<div>
<span class='titulo'>Javascript</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>JQuery</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>Node JS</span>
<span class='nivel'>Basico</span>
</div>
</section>
<div class="optdesc" data-secao='desc_javascript'>
<p id='desc_javascript'>
O uso do javascript inicialmente era para itens básicos, como pequenas animações manipulando o DOM.<br><br>
Com o sucesso do jQuery, passei a utiliza-lo com mais frequência e seguindo a tendência da comunidade, passei a criar páginas usando o Ajax.<br><br>
A versão do EcmaScript 6, webpack e transpiler, tornou o uso do Javascript mais interessante, hoje em dia, utilizo sempre que possível em projetos <i>Single Page Applications</i>. Também me interessei pelo Node JS, fiz cursos e alguns testes interno, no entanto, não cheguei a usar em projetos reais, mas gosto muito do seu gerenciador de pacotes NPM e utilizo em conjunto em projetos PHP.
</p>
</div>
<h3>Front End</h3>
<section>
<div>
<span class='titulo'>Angular 2</span>
<span class='nivel'>Básico</span>
</div>
<div>
<span class='titulo'>Vue JS</span>
<span class='nivel'>Básico</span>
</div>
</section>
<div class="optdesc" data-secao='desc_frontend'>
<p id='desc_frontend'>
Fiz um pequeno projeto usando Angular 2, além dos cursos que fiz, tenho uma idéia do funcionamento do framework e gostaria de trabalhar mais com essa ferramenta. Também tive a oportunidade de estudar o Vue JS, achei o aprendizado mais fácil e utilizei em um projeto pessoal. Espero utiliza-lo em mais projetos SPA.
</p>
</div>
<h3>Design Gráfico</h3>
<section>
<div>
<span class='titulo'>Photoshop</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>Illustrator</span>
<span class='nivel'>Básico</span>
</div>
<div>
<span class='titulo'>Flash</span>
<span class='nivel'>Intermediário</span>
</div>
</section>
<div class="optdesc" data-secao='desc_designgrafico'>
<p id='desc_designgrafico'>
Quando comecei a criar sites por hobbie, logo ficou claro a importância de um bom layout. Nessa época, depois de testar algumas ferramentas, decidi aprender o Photoshop, na época, a versão 7. Criava avatares e assinaturas em foruns de design e participava de competições semanais, cheguei a ganhar algumas, mas o importante era as técnicas que posteriormente foram utilizada para a criação de layout. Esse conhecimento foi fundamental para conseguir meu primeiro emprego, apesar da formação como programador, na ESM trabalhei principalmente com criação de banners e mailmarketing, onde também criava peças usando o Flash. A proximidade com as ferramentas no Illustrator me fez utiliza-lo para alguns trabalhos pequenos, mas a minha preferencia sempre foi o Photoshop.
</p>
</div>
<h3>Desktop</h3>
<section>
<div>
<span class='titulo'>C#</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>Java</span>
<span class='nivel'>Intermediário</span>
</div>
<div>
<span class='titulo'>Visual Basic</span>
<span class='nivel'>Básico</span>
</div>
</section>
<div class="optdesc" data-secao='desc_desktop'>
<p id='desc_desktop'>
Visual Basic 6 foi a primeira linguagem que aprendi, fiz muitos trabalhos acadêmicos e usei para criar ferramentas simples usadas em alguns trabalhos proffisionais. O mesmo principio foi com o Java, estudei no técnico e utilizei no trabalho. tive mais contato com o Java na faculdade também, na BrList criei um sistema interno de controle de expediente. Esse sistema tinha um problema grave com o suporte de uma biblioteca da webcam, então decidi reescrever em C#, o problema da webcam foi resolvido facilmente. Com esta experiência, tive a oportunidade de usar o C# em mais dois grandes projetos para a empresa.
</p>
</div>
<h3>Mobile</h3>
<section>
<div>
<span class='titulo'>Android</span>
<span class='nivel'>Intermediário</span>
</div>
<div>
<span class='titulo'>WebApp</span>
<span class='nivel'>Intermediário</span>
</div>
</section>
<div class="optdesc" data-secao='desc_mobile'>
<p id='desc_mobile'>
Tive a oportunidade de entrar em um projeto de um App para Android, usando o XML padrão. A função do app é registrar dados offline, incluido fotos e sincronizar com o servidor. Este projeto não chegou a maturidade que eu gostaria, mas era utilizado por muitos usuários sem problemas. Outro projeto interessante foi feito usando a técnica do Progressive WebApp. O app é simples, só precisa cadastrar dados offline e sincronizar com o servidor.
</p>
</div>
<h3>Banco de dados</h3>
<section>
<div>
<span class='titulo'>MySQL</span>
<span class='nivel'>Avançado</span>
</div>
<div>
<span class='titulo'>T-SQL</span>
<span class='nivel'>Intermediário</span>
</div>
<div>
<span class='titulo'>Redis</span>
<span class='nivel'>Basico</span>
</div>
</section>
<div class="optdesc" data-secao='desc_bancodedados'>
<p id='desc_bancodedados'>
MySQL é o banco de dados que sempre utilizei com o PHP. Na BrList trabalhei bastante com tratamento de dados e importação de banco de dados, dando oportunidade de criar funções, procedure stores e triggers. Com a similaridade com o MySQL, os estudos com T-SQL foi tranquilo, embora só utilizei no curso. também testei o Redis, pretendo utilizar em projetos futuros.
</p>
</div>
<h3>Outras Ferramentas</h3>
<section>
<div>
<span class='titulo'>Git</span>
<span class='nivel'>Intermediário</span>
</div>
<div>
<span class='titulo'>Gulp</span>
<span class='nivel'>Intermediário</span>
</div>
</section>
<div class="optdesc" data-secao='desc_ferramentas'>
<p id='desc_ferramentas'>
A utilização do Git é principalmente para o deploy de código em teste e produção usando um repositório <i>bare</i> e hooks. O Gulp eu utilizo principalmente para servir páginas básicas em HTML ou para automatizar processos em projetos web.
</p>
</div>
</div>
</article>
<article class='experiencia'>
<h3>Experiência</h3>
<section>
<h4>NoBeta S.A.</h4>
<span>Midia eletrônica.<br>
<i>3 anos: de Setembro de 2014 até o momento.</i></span>
<div class="optdesc" data-secao='desc_nobeta'>
<p>
<b>principais atividades:</b> Escrever um sistema de encurtador de link, que gera um código alfanumerico sequencial atraves de trigger do MySQL e guardando as informações de meta tags em banco de dados e um sistema de cache em arquivos.<br><br>
Os links encurtados levam a uma página intermediária que exibe uma propaganda com um tempo obrigatório de 3 segundos, esta página usa javascript para colocar a publicidade provida do Google DFP, segmentada pela DMP Navegg, em tela cheia. Anteriormente os serviços utilizados eram a SmartAds e TailTarget.<br><br>
Outra necessidade foi inserir a publicidade fullscreen na página dos parceiros como um script. Isso foi feita também com javascript e segue o mesmo padrão visual da propaganda intermediária do encurtador. Em ambos os casos (encurtador e tag script) o uso do jquery foi evitada, pois a diferença de milisegundos da requisição era importante para a entrega de uma publicidade.<br><br>
Em paralelo, criei um painel para os parceiros encurtarem os links e verificar os dados de seus links encurtados, para isso foi utilizado a library do Google DFP para preencher os relatórios. Entre os parceiros estão o MTV, o Jornal Lance, sites como Cifras, Area H, Ocioso, entre outros.<br><br>
Na Hello Group, da qual a Nobeta faz parte, tive a oportunidade de criar uma plataforma de pesquisa on line, que consiste em um questionario com inumeros tipo de perguntas, para pesquisa de mercado, além da plataforma de administração que permite um usuário leigo a digitar as perguntas, gerar o link e gerar relatórios com o resultado da pesquisa. Com esta plataforma, foram atendidos clientes como Grupo Pão de Açucar, Colormaq, Outback, Honda, Bradesco, Banco do Brasil, Hering, Brasil Kirin, Brookfield, Votorantim, Magazine Luiza, Mitsubishi, Sony, Boticario, entre outros.<br><br>
No Projeto de Walmart, criei um aplicativo de auditoria de preço. consistia em um app que baixa uma lista pre-estabelecida de produtos para cada loja, do qual o auditor possa responder algumas questões sobre o produto, tirar fotos e enviar os dados por uma API, escrita por mim. Os dados era apresentado no painel de administração da Hello Research. O aplicativo só havia uma versão para Android, escrita nativamente no Android Studio e distribuida via arquivo apk.
</p>
</div>
</section>
<section>
<h4>BrList Informações e Guias Ltda.</h4>
<span>Editora de Guia Telefonico.<br>
<i>de Abril de 2008 até o Agosto de 2014.</i></span>
<div class="optdesc" data-secao='desc_brlist'>
<p>
<b>principais atividades</b>
Fui contratado para a criação do site industriabrasileira.com, fiz todo o processo, desde a criação dos wireframes e layout, passando pelo desenvolvimento e finalmente o hospedagem e deploy. Industriabrasileira.com era um site de busca de industria, com noticias sobre o setor, o banco de dados foi tratado e colocado para pesquisa, outras bases foram adicionadas, cuja conversão e tratamento foram feita antes de entrar em produção. O industriabrasileira.com foi criado em PHP usando a base em MySQL<br><br>
Com o site em produção, fui recolocado para a atualização do site da empresa: multiguias.com.br, cujo a montagem em HTML e programação com o Laravel feita por mim.<br><br>
Também fui responsável em criar o sistema de gerenciamento do controle de horário dos funcionários da empresa, a ideia era o funcionário, na entrada ou saida da empresa, digitar seu código e tirar uma foto na webcam para comprovar sua identidade. O sistema foi escrito em Java, porém, o problema causado pela falta de suporte da library de webcam (JMF), fez com que eu decidisse por outra linguagem: C#, do qual o problema com a webcam fosse resolvida rapidamente, então reescrevi todo o sistema para esta linguagem.<br><br>
Outro sistema interno criado em C# foi um gerenciador de dados para o Telemarketing: um sistema de impressão de dados para o pessoal de telemarketing fazer as ligações, além de importação de dados via csv ou xls e cruzamento de dados com os telefones bloqeuados pelo PROCON.<br><br>
Por ultimo, criei um sistema interno para gerenciar os pedidos de compra da Famaucêtica Balm Labor, do qual fazia parte das empresas do dono da empresa, criado em PHP com MySQL.<br><br>
</p>
</div>
</section>
<section>
<h4>ESM</h4>
<span>Marketing Esportivo<br>
<i>de Abril de 2007 até o Março de 2008.</i></span>
<div class="optdesc" data-secao='desc_esm'>
<p>
<b>principais atividades</b>
Na ESM trabalhei principalmente como designer, tive a grande oportunidade de criar o layout e montagem em HTML/CSS do site oficial do Sport Clube Corinthians Paulista. Além de trabalhar no site torcidalg.com.br, uma rede social, estilo Orkut, para torcedores do São Paulo e o site do jogador Alex (ex-palmeiras e Fenerbahce).<br><br>
Também fui responsável na criação de banners estáticos e animados usando Photoshop e Flash e a criação de mail marketing da Polimaia, um e-commerce de perfumes importado, do qual a ESM gerenciava.<br><br>
</p>
</div>
</section>
</article>
<article class='formacao'>
<h3>Formação</h3>
<section>
<h4>Universidade Nove de Julho</h4>
<span>Tecnologo em Sistema para Internet<br>
<i>2009 até 2011.</i></span>
</section>
<section>
<h4>Escola Técnica Estadual de São Paulo</h4>
<span>Técnico em Informática<br>
<i>2006 até 2007.</i></span>
</section>
<section>
<h4>BF Biz / Curso Livre</h4>
<span>Programming in C# with Microsoft Visual Studio 2010 - Writing Queries Using Microsoft SQL Server 2008 Transact-SQL</span>
</section>
<section>
<h4>Alura Cursos Online de Tecnologia / Curso Livre</h4>
<span>Programador Angular 2; Desenvolvedor Android</span>
</section>
</article>
<article class='experiencia'>
<h3>Curiosidades</h3>
<section>
<ul>
<li>Eu participava de concursos de design de assinaturas de fóruns e banners e já ganhei alguns desses concursos...</li>
<li>Era uma necessidade na ESM de redimensionar fotos automaticamente para um site chamado "agência Corinthians" do qual o fotografo oficial do clube vendia as fotos para a impressa. Com isso, escrevi um script em <i>Javascript for Adobe Photoshop</i> para fazer o serviço de redimensionar uma pasta de fotos para 4 tipos de tamanhos e em uma dela colocar uma marca d'água.</i></li>
<li>Já escrevi um programinha em VB6 para fazer o dump de um banco de dados para o industriabrasileira.com, o programa em si utilizava o comando <i>send keys</i> para simular a digitação de teclas para fazer um ctrl+c ctrl+v em um arquivo de texto e posteriormente processado para MySQL.</li>
<li>Já escrevi uma extensão do Google Chrome para automatizar testes na plataforma de pesquisa da Hello Research, do qual, seguindo uma pré programação, era submetido uma resposta aleatóriamente.</li>
</ul>
</section>
</article>
<footer>
<p>
made with <i class='fa fa-heart'></i> by Ricardo
</p>
</footer>
</main>
<script src='optdesc.js'></script>
<script src='scroll.js'></script>
</body>
</html>