RamonPage .Inc
Design ☆ UX ☆ Code ☆ Rap
https://ramonpage.com/blog/
2014-11-09T02:00:00+00:00
RamonPage
Minha participação na Semana de Ciência da Computação e Tecnologia da Informação da UENF
/blog/2014/11/09/estive-na-semana-da-computacao-uenf-2014/
2014-11-09T02:00:00+00:00
2014-11-09T02:00:00+00:00
RamonPage
<p>Tive o prazer de palestrar na última quarta-feira para o pessoal de Campos dos Goytacazes, na <abbr title="Semana de Ciência da Computação e Tecnologia da Informação">SCTI</abbr> da <abbr title="Universidade Estadual do Norte Fluminense">UENF</abbr>. O evento é facilitado anualmente pela universidade e os próprios alunos organizam a coisa toda.</p>
<p>O foco da minha palestra foi ajudar o público...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/eventos/" rel="tag">eventos</a>, <a href="https://ramonpage.com/blog/tags/palestras/" rel="tag">palestras</a></p>
<p>Tive o prazer de palestrar na última quarta-feira para o pessoal de Campos dos Goytacazes, na <abbr title="Semana de Ciência da Computação e Tecnologia da Informação">SCTI</abbr> da <abbr title="Universidade Estadual do Norte Fluminense">UENF</abbr>. O evento é facilitado anualmente pela universidade e os próprios alunos organizam a coisa toda.</p>
<p>O foco da minha palestra foi ajudar o público a tomar decisões seguras em front-end, muito mais do que mostrar ferramentas ou <em>vender</em> o que é melhor ou pior.</p>
<p>Confira os slides da minha palestra logo abaixo.</p>
<div class="presentation">
<script async class="speakerdeck-embed" data-id="7db3267047f4013268d52e098d8a2543" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
<div class="presentation-caption">
<a href="https://speakerdeck.com/ramonpage/dicas-para-tomadas-de-decisao-seguras-em-front-end">https://speakerdeck.com/ramonpage/dicas-para-tomadas-de-decisao-seguras-em-front-end</a>
</div>
</div>
<p>Deixo aqui o meu grande abraço ao Eduardo Braga que me fez o convite.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/eventos/" rel="tag">eventos</a>, <a href="https://ramonpage.com/blog/tags/palestras/" rel="tag">palestras</a></p>
Fundo preto e texto branco
/blog/2014/05/25/fundo-preto-e-texto-branco/
2014-05-25T03:00:00+00:00
2014-05-25T03:00:00+00:00
RamonPage
<h2>RECENTEMENTE O <A href="https://www.spotify.com/br" rel="external">Spotify</a> lançou um redesign para o seu aplicativo com fundo escuro e textos claros. Não cheguei a conhecer o layout anterior, mas o atual realmente me agrada.</h2>
<p>Fundo preto com texto claro não é problema para muita gente. Eu mesmo trabalho diariamente com terminal e editor de código de fundo escuro e letras claras. Além disso, essa pode ser uma boa configuração para leitura em ambientes com pouca luminosidade...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/web-design/" rel="tag">Web Design</a>, <a href="https://ramonpage.com/blog/tags/ux/" rel="tag">UX</a>, <a href="https://ramonpage.com/blog/tags/acessibilidade/" rel="tag">Acessibilidade</a></p>
<h2>RECENTEMENTE O <A href="https://www.spotify.com/br" rel="external">Spotify</a> lançou um redesign para o seu aplicativo com fundo escuro e textos claros. Não cheguei a conhecer o layout anterior, mas o atual realmente me agrada.</h2>
<p>Fundo preto com texto claro não é problema para muita gente. Eu mesmo trabalho diariamente com terminal e editor de código de fundo escuro e letras claras. Além disso, essa pode ser uma boa configuração para leitura em ambientes com pouca luminosidade.</p>
<p>Mesmo assim, algo me levou a <em>twittar</em> isso:</p>
<blockquote>
<p>“Fundo preto + fonte branca + texto longo = péssima experiência de leitura.” <cite>— RamonPage (@ramonpage) <a href="https://twitter.com/ramonpage/status/431123280633036800" rel="external">Fevereiro 5, 2014</a></cite></p>
</blockquote>
<p>É muito ruim lidar com texto branco em fundo preto quando o texto é longo. Na maioria das vezes exige muito esforço dos olhos<sup>1</sup>.</p>
<p class="info-label"><sup>1</sup> — Levando em conta a leitura em monitores. Branco no preto em papel tradicional ou <a href="http://en.wikipedia.org/wiki/Electronic_paper" rel="external" lang="en">e-paper</a> é outro departamento.</p>
<p>O grande vilão dessa história é o contraste. Sim, o mesmo <a href="http://contrastrebellion.com/" rel="external">contraste</a> que nós sabemos que é importante manter. Mas como na vida tudo precisa de equilíbrio, a dica da vez é evitar o contraste “completo”. Em outras palavras, o preto “puro”<sup>2</sup>.</p>
<p>Ao trabalhar com fundos escuros, de preferência ao preto com uma pitada de brilho (escala de cinza) ou cores próximas do preto com alguma saturação e brilho. O artigo <a href="http://ianstormtaylor.com/design-tip-never-use-black/" rel="external" lang="en">“Design Tip: Never Use Black”</a> tem uma abordagem interessante sobre isso.</p>
<p class="info-label"><sup>2</sup> — O mesmo se aplica para textos brancos/claros “puros”.</p>
<p>Manter o contraste é importante, mas o exagero ao aplicar fundo escuro pode gerar consequências negativas na experiência do usuário final.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/web-design/" rel="tag">Web Design</a>, <a href="https://ramonpage.com/blog/tags/ux/" rel="tag">UX</a>, <a href="https://ramonpage.com/blog/tags/acessibilidade/" rel="tag">Acessibilidade</a></p>
MÚSICA: Despertar De Um Romântico
/blog/2013/11/26/musica-despertar-de-um-romantico/
2013-11-26T02:00:00+00:00
2013-11-26T02:00:00+00:00
RamonPage
<p>Demorou, mais saiu. Eis a minha quinta música. Enjoy!</p>
<iframe height="166" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/121925461&color=8BD3E5"></iframe>
<h2>Letra</h2>
<p>Adoro o olhar dela em mim<br>
Desse jeito inesperado, despertando enfim<br>
O desejo oportuno, desvendar o seu mistério<br>
Quem sabe ela não queira conhecer um cara sério</p>
<p>Ela é tão linda, eu vou...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/musica/" rel="tag">música</a>, <a href="https://ramonpage.com/blog/tags/single/" rel="tag">single</a></p>
<p>Demorou, mais saiu. Eis a minha quinta música. Enjoy!</p>
<iframe height="166" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/121925461&color=8BD3E5"></iframe>
<h2>Letra</h2>
<p>Adoro o olhar dela em mim<br />
Desse jeito inesperado, despertando enfim<br />
O desejo oportuno, desvendar o seu mistério<br />
Quem sabe ela não queira conhecer um cara sério</p>
<p>Ela é tão linda, eu vou tentar me aproximar<br />
Cortejar e me apresentar, sem titubear<br />
Ficar face a face…<br />
Hã, ela tem o meu sorriso e isso não é disfarce</p>
<p>Ela é mulher de classe, bem vestida, atraente<br />
Tirou do meu silêncio uma palavra de repente<br />
Ligeiramente, elaborei a dialética<br />
Na ânsia de gostar bem muito além da sua estética</p>
<p>Irredutível, esquivou-se de impulso<br />
Difícil reverter, mas eu mantenho o meu discurso<br />
Faço de um tudo, sei não sou mais um<br />
Até pensei em apresentar meu som Rapaz Incomum</p>
<p>[REFRÃO]</p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>Eu sei, o amor é algo complicado</em><br />
<em>Você me fez abrir meu romantismo engavetado</em></p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>A música alimenta a emoção do momento</em><br />
<em>Não quero que o amor se perca ao sopro do vento… Não!</em></p>
<p>Deixe a minha mente descansar<br />
Já não consigo mais pensar em como mudar isso<br />
Deixa meu coração pulsar<br />
Meu sentimento é tão profundo, não vou ser omisso</p>
<p>Deixe a flor desabrochar e expressar<br />
O que o receio não permite externar<br />
Acredita, que nunca é tarde pro amor<br />
Declarações nem sempre são tão fáceis de compor</p>
<p>E muitas vezes sai da boca pra fora<br />
Mas o brilho do olhar é o que basta como prova<br />
Acredita, amor não se expõe em prateleira<br />
Reflita, faça valer se o quer pra vida inteira</p>
<p>Tanta cobrança engana o espaço que temos<br />
É mesquinho transformar alguém naquilo que queremos<br />
Hã, ninguém tá a fim de perder tempo<br />
O mundo é tão veloz, ficou pra trás o sentimento</p>
<p>Não a contento, amar demais virou loucura<br />
Ideia estagnada que com o tempo a vida cura<br />
Eu não entendo, por que isso faz sentido?<br />
Amor deliberado, calculado, objetivo</p>
<p>Por isso eu digo que apesar do meu complexo<br />
Fazer alguém feliz é o que eu mais busco, é o que eu espero!<br />
Se for roubada eu tô na esquiva, eu tô esperto<br />
Garota, pode vir, eu tô no instante e lugar certo</p>
<p>[REFRÃO]</p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>Eu sei, o amor é algo complicado</em><br />
<em>Você me fez abrir meu romantismo engavetado</em></p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>A música alimenta a emoção do momento</em><br />
<em>Não quero que o amor se perca ao sopro do vento… Não!</em></p>
<p>O que me resta é dizer<br />
Escrever, enaltecer<br />
Que eu tenho o dever<br />
De fazer, acontecer<br />
De tentar, acertar, entender, respeitar<br />
E do meu melhor saber cuidar</p>
<p>No seu sorriso viajar, não haveria algo melhor<br />
Um simples gesto para o coração não se sentir só<br />
O jeito dela eu sei de cor<br />
Ela vai ter um beijo Pro</p>
<p>Romantismo refinado, respeitável, com certeza!<br />
Engano achar que é tudo pra que química aconteça<br />
Meu raciocínio não tem dó<br />
Sou RamonPage, saca só!</p>
<p>Digo mais, indo além<br />
Sem outrossim, sem porém<br />
Com o que há, o que convém<br />
Saber bem, muito bem!<br />
Que quando eu focar em alguém<br />
Eu preciso dar em troca<br />
Algo de bom pra ela também</p>
<p>[REFRÃO]</p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>Eu sei, o amor é algo complicado</em><br />
<em>Você me fez abrir meu romantismo engavetado</em></p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>A música alimenta a emoção do momento</em><br />
<em>Não quero que o amor se perca ao sopro do vento… Não!</em></p>
<p>Quem é você que inundou meu pensamento?<br />
Confesso que assustei, tô me sentindo meio tenso<br />
Mal a conheço, mas revê-la eu não dispenso<br />
Pra um rapper que se preze nunca falta argumento</p>
<p>Hã, não vou deixar de utilizá-lo<br />
Agora que eu tive o romantismo despertado<br />
Bem intencionado, sendo um cara bacana<br />
Curtindo a companhia, sem estresse, sem drama</p>
<p>É bom ouvir uma palavra espontânea<br />
De alguém visivelmente natural, contemporânea<br />
Ha-ha, nada interfere a paciência<br />
Estou certo de que não vale gostar por conveniência</p>
<p>É bom saber como curtir a experiência<br />
Respeito nas ações mantém serena a consciência<br />
Pegue a minha mão, vamos viver esse momento<br />
Não quero que o amor se perca ao sopro do vento… Não!</p>
<p>[REFRÃO]</p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>Eu sei, o amor é algo complicado</em><br />
<em>Você me fez abrir meu romantismo engavetado</em></p>
<p><em>Vem cá, te avistei, me encantei</em><br />
<em>Te vi sorrir, me derreti, despertei</em><br />
<em>A música alimenta a emoção do momento</em><br />
<em>Não quero que o amor se perca ao sopro do vento… Não!</em></p>
<p>— FIM —</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/musica/" rel="tag">música</a>, <a href="https://ramonpage.com/blog/tags/single/" rel="tag">single</a></p>
Novo website Sidetech no ar!
/blog/2013/06/25/novo-website-sidetech-no-ar/
2013-06-25T03:00:00+00:00
2013-06-25T03:00:00+00:00
RamonPage
<p>Após os sites <a href="http://peoplenet.sidetech.com.br/" rel="external">PeopleNet</a> e <a href="http://peoplenetmais.sidetech.com.br/" rel="external">PeopleNet+</a>, chegou a vez da Sidetech <a href="http://www.sidetech.com.br" rel="external">renovar seu website</a>.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/sidetech-screenshot.png" alt="Screenshot do novo website Sidetech">
<figcaption>Novo website Sidetech</figcaption>
</figure>
<p>As soluções da Sidetech incluem produtos para as áreas de Saúde e Segurança do Trabalho, Biotecnologia, Gerenciamento de Laboratórios...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/trabalhos/" rel="tag">trabalhos</a></p>
<p>Após os sites <a href="http://peoplenet.sidetech.com.br/" rel="external">PeopleNet</a> e <a href="http://peoplenetmais.sidetech.com.br/" rel="external">PeopleNet+</a>, chegou a vez da Sidetech <a href="http://www.sidetech.com.br" rel="external">renovar seu website</a>.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/sidetech-screenshot.png" alt="Screenshot do novo website Sidetech" />
<figcaption>Novo website Sidetech</figcaption>
</figure>
<p>As soluções da Sidetech incluem produtos para as áreas de Saúde e Segurança do Trabalho, Biotecnologia, Gerenciamento de Laboratórios e Biossegurança.</p>
<p>Eu trabalhei em todos os aspectos técnicos do projeto e também no design/front-end.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/trabalhos/" rel="tag">trabalhos</a></p>
RGBa ou HSLa, eis a questão
/blog/2013/05/18/rgba-ou-hsla-eis-a-questao/
2013-05-18T03:00:00+00:00
2013-05-18T03:00:00+00:00
RamonPage
<h2>O PRIMEIRO RASCUNHO da W3C que confronta os tipos de valor <code>rgba()</code> e <code>hsla()</code> para definir cores em CSS é datado de <a href="http://www.w3.org/TR/2002/WD-css3-color-20020219/" rel="external">19 de fevereiro de 2002</a>. Pois é, muito tempo já passou...</h2>
<p>De lá pra cá nada mudou na especificação, porém o uso desses tipos só ganharam força alguns anos depois 2002, até porque naquela época ainda não havia suporte pela maioria dos navegadores. O fato interessante é que ainda hoje percebo que há uma certa...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/front-end/" rel="tag">front-end</a></p>
<h2>O PRIMEIRO RASCUNHO da W3C que confronta os tipos de valor <code>rgba()</code> e <code>hsla()</code> para definir cores em CSS é datado de <a href="http://www.w3.org/TR/2002/WD-css3-color-20020219/" rel="external">19 de fevereiro de 2002</a>. Pois é, muito tempo já passou...</h2>
<p>De lá pra cá nada mudou na especificação, porém o uso desses tipos só ganharam força alguns anos depois 2002, até porque naquela época ainda não havia suporte pela maioria dos navegadores. O fato interessante é que ainda hoje percebo que há uma certa dúvida sobre qual tipo usar.</p>
<h2>Antes de qualquer coisa, qual a diferença entre os modelos RGB e HSL?</h2>
<p>O RGB é um modelo de cor aditivo<sup>1</sup>, onde conseguimos gerar várias cores através da combinação de três cores primárias (<strong>R</strong>ed, <strong>G</strong>reen e <strong>B</strong>lue). Este modelo é o comumente utilizado em dispositivos eletrônicos desde antes de eu me entender por gente.</p>
<p class="info-label"><sup>1</sup> — Cores aditivas são aquelas representadas pelas combinações de luzes. A soma de todas as cores aditivas gera o branco.</p>
<p>O HSL, por sua vez, também é um modelo aditivo, todavia utiliza um sistema cilíndrico de coordenadas para determinar as cores. HSL significa <strong>H</strong>ue, <strong>S</strong>aturation e <strong>L</strong>ightness.</p>
<p>Existe ainda o modelo HSB (<strong>H</strong>ue, <strong>S</strong>aturation e <strong>B</strong>rightness) ou HSV (<strong>H</strong>ue, <strong>S</strong>aturation e <strong>V</strong>alue), utilizado pelo Photoshop e ferramentas como <a href="http://www.colourlovers.com/" rel="external">COLOURlovers</a>, no entanto este esquema de cores não é suportado em CSS.</p>
<h3>Representando cores tridimensionalmente</h3>
<p>Durante séculos vários artistas e filósofos<sup>2</sup> criaram teorias das cores e alguns deles chegaram à conclusão de que podemos representá-las de forma tridimensional. A partir desses estudos nós chegamos ao conceito de <em>espaços de cor</em>, que são modelos para descrever cada cor a partir de fórmulas matemáticas.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/color-sphere.jpg" alt="Rascunhos da esfera de cor" />
<figcaption>Esfera de cor de Philipp Otto Runge, criada por volta de 1810. Originalmente em <a href="http://www.colorsystem.com/?page_id=771&lang=en" rel="external">colorsystem</a>.</figcaption>
</figure>
<p class="info-label"><sup>2</sup> — Veja no <a href="http://www.colorsystem.com/?page_id=551&lang=en" rel="external">colorsystem</a> uma lista detalhada de teorias das cores criadas por diversos artistas e pensadores.</p>
<p>A grande diferença entre os sistemas de cor RGB e HSL está nos seus modelos de espaço de cor. O RGB pode ser representado de várias formas, mas o seu espaço de cor mais famoso é o chamado cubo RGB.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/rgb-cube.png" alt="Cubo RGB" />
<figcaption>Cubo RGB, que representa todas as cores possíveis de serem criadas a partir do vermelho, verde e azul. Originalmente em <a href="http://en.wikipedia.org/wiki/RGB_color_space" rel="external">Wikipedia</a>.</figcaption>
</figure>
<p>Já o HSL é conhecido pelo seu cilindro (ou diamante) de cor. O espaço de cor HSL é simétrico na transformação das cores mais escuras para as cores mais claras.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/hsl.png" alt="Cilindro representando o modelo HSL" />
<figcaption>Cilindro ou diamante HSL, originalmente em <a href="http://colorizer.org/" rel="external">Colorizer</a>.</figcaption>
</figure>
<h2>Adicionando o alpha channel na história</h2>
<p>O suporte a <em>alpha channel</em> foi adicionado a ambos os modelos de cor à partir das especificações do CSS3. A sua função consiste em determinar o nível de opacidade das cores.</p>
<p>A notação é simples:</p>
<pre><code> /* CSS */
rgba(255,0,0,0.1) /* 10% de vermelho opaco em RGBa */
hsla(0,100%,50%,0.1) /* 10% de vermelho opaco em HSLa */
</code></pre>
<p>Nos tempos atuais, com a descontinuação do <abbr title="Internet Explorer 7">IE7</abbr> e o uso cada vez menor do <abbr title="Internet Explorer 8">IE8</abbr>, é seguro afirmar que podemos abusar sem medo dos tipos <code>rgba()</code> e <code>hsla()</code>. Porém, qual é o melhor?</p>
<h2>RGBa ou HSLa: tecnicamente, tanto faz</h2>
<p>Entenda, <span class="pullquote">o suporte dos navegadores a <code>rgba()</code> e <code>hsla()</code> é <strong>exatamente igual</strong></span>. Além disso, todas as combinações possíveis em RGBa são possíveis em HLSa e vice-versa. Isso quer dizer que a escolha de qual usar é <em>completamente arbitrária</em>.</p>
<p>Minha linha de raciocínio é de que o HSL perde pontos levando em conta a falta de suporte no Photoshop. Utilizei <code>rgba()</code> em praticamente todos os projetos que trabalhei até aqui por este motivo.</p>
<p>Por outro lado, alguns dizem que o HSL é melhor para manipular CSS <em>on-the-fly</em>, por ser mais intuitivo. De qualquer forma, o importante é ter em mente que entre <code>rgba()</code> e <code>hsla()</code> a escolha tanto faz!</p>
<h2>Links úteis</h2>
<ul>
<li><a href="http://mothereffinghsl.com/" rel="external">Mothereffing HSL</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external">color (CSS data type)</a></li>
<li><a href="http://colorizer.org/" rel="external">Colorizer</a></li>
<li><a href="http://hslpicker.com/" rel="external">HSL Color Picker</a></li>
</ul>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/front-end/" rel="tag">front-end</a></p>
Otimizando imagens para displays retina com Slicy
/blog/2013/04/21/otimizando-imagens-para-displays-retina-com-slicy/
2013-04-21T03:00:00+00:00
2013-04-21T03:00:00+00:00
RamonPage
<h2>O <A HREF="HTTP://MACRABBIT.COM/SLICY/" rel="external">Slicy</a> é uma ótima ferramenta para otimizar imagens para displays retina. Uso principalmente quando preciso fazer layouts de aplicativos iOS.</h2>
<figure class="right">
<img src="https://ramonpage.com/assets/images/posts/grupos-de-camadas.png" alt="Grupos de camadas no Photoshop">
<figcaption>Grupos de camadas
nomeados com @2x.png</figcaption>
</figure>
<p>O funcionamento é muito simples: faça seus grupos de camadas no Photoshop normalmente e nomeie cada um deles com a terminação “@2x.png” (ou @1x.png). Após, arraste o arquivo .psd dentro do Slicy para...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/design/" rel="tag">design</a></p>
<h2>O <A HREF="HTTP://MACRABBIT.COM/SLICY/" rel="external">Slicy</a> é uma ótima ferramenta para otimizar imagens para displays retina. Uso principalmente quando preciso fazer layouts de aplicativos iOS.</h2>
<figure class="right">
<img src="https://ramonpage.com/assets/images/posts/grupos-de-camadas.png" alt="Grupos de camadas no Photoshop" />
<figcaption>Grupos de camadas
nomeados com @2x.png</figcaption>
</figure>
<p>O funcionamento é muito simples: faça seus grupos de camadas no Photoshop normalmente e nomeie cada um deles com a terminação “@2x.png” (ou @1x.png). Após, arraste o arquivo .psd dentro do Slicy para gerar as imagens. O mais legal é que a medida que você atualiza o arquivo .psd o Slicy entende que precisa atualizar as imagens também, automaticamente.</p>
<p>Saiba mais no site oficial: <a href="http://macrabbit.com/slicy/" rel="external">http://macrabbit.com/slicy/</a></p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/slicy-screenshot.png" alt="Screenshot do Slicy" />
<figcaption>Slicy antes de carregar o .psd</figcaption>
</figure>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/design/" rel="tag">design</a></p>
Vagrant box com MongoDB
/blog/2013/04/20/usando-mongodb-com-vagrant/
2013-04-20T03:00:00+00:00
2013-04-20T03:00:00+00:00
RamonPage
<p>Seguindo a linha do <a href="http://helabs.com.br/blog/2013/03/05/seu-ambiente-de-trabalho-mais-limpo-usando-vagrant/" rel="external">post do Sylvestre</a> eu resolvi criar um Vagrant box para servir meu MongoDB local. O resultado está no GitHub: <a href="https://github.com/RamonPage/vagrant-precise64-mongodb" rel="external">vagrant-precise64-mongodb</a>.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/back-end/" rel="tag">back-end</a></p>
<p>Seguindo a linha do <a href="http://helabs.com.br/blog/2013/03/05/seu-ambiente-de-trabalho-mais-limpo-usando-vagrant/" rel="external">post do Sylvestre</a> eu resolvi criar um Vagrant box para servir meu MongoDB local. O resultado está no GitHub: <a href="https://github.com/RamonPage/vagrant-precise64-mongodb" rel="external">vagrant-precise64-mongodb</a>.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/back-end/" rel="tag">back-end</a></p>
Apresentando KredStreet
/blog/2013/04/06/apresentando-kredstreet/
2013-04-06T03:00:00+00:00
2013-04-06T03:00:00+00:00
RamonPage
<p><strong>Atualização 24/03/2014</strong>: O KredStreet evoluiu e agora se chama PsychSignal. Para mais informações, <a href="http://psychsignal.com" rel="external">visite o nosso site</a> ou siga-nos no Twitter <a href="http://twitter.com/psychsignal">@psychsignal</a>.</p>
<figure>
<a href="http://kredstreet.com"><img src="https://ramonpage.com/assets/images/posts/kredstreet.png" alt="Logotipo KredStreet"></a>
<figcaption>Em breve, KredStreet.</figcaption>
</figure>
<p>O <a href="http://kredstreet.com" rel="external">KredStreet</a> é uma ferramenta que analisa os sentimentos de investidores...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/trabalhos/" rel="tag">trabalhos</a></p>
<p><strong>Atualização 24/03/2014</strong>: O KredStreet evoluiu e agora se chama PsychSignal. Para mais informações, <a href="http://psychsignal.com" rel="external">visite o nosso site</a> ou siga-nos no Twitter <a href="http://twitter.com/psychsignal">@psychsignal</a>.</p>
<figure>
<a href="http://kredstreet.com"><img src="https://ramonpage.com/assets/images/posts/kredstreet.png" alt="Logotipo KredStreet" /></a>
<figcaption>Em breve, KredStreet.</figcaption>
</figure>
<p>O <a href="http://kredstreet.com" rel="external">KredStreet</a> é uma ferramenta que analisa os sentimentos de investidores no mercado de ações – os chamados <em>traders</em> – e gera estatísticas apuradas sobre as tendências do mercado. Ele utiliza dados do <a href="http://stocktwits.com" rel="external">StockTwits</a> e <a href="https://twitter.com/" rel="external">Twitter</a> para chegar nesses resultados.</p>
<p>O KredStreet é capaz de comparar os sentimentos atuais e passados dos investidores, podendo assim gerar notas de acordo com a acuracidade de cada um, e, de posse dessas notas, gerar um ranking de investidores. Além disso, o KredStreet atualiza diariamente as altas e baixas do mercado (<em>bull market</em> e <em>bear market</em>) e compara esses dados com os índices gerados pelos investidores cadastrados.</p>
<figure>
<img src="https://ramonpage.com/assets/images/posts/bull-and-bear.jpg" alt="Finanças: o touro e o urso" />
<figcaption>Urso e touro em frente à bolsa de valores de Frankfurt © Wikipedia, a enciclopédia livre</figcaption>
</figure>
<p>Por enquanto o KredStreet está voltado para o mercado americano e está em beta privado.</p>
<p>Veja também no <strong>TechCrunch</strong>: <a href="http://techcrunch.com/2013/03/30/big-data-could-cripple-facebook/" rel="external" lang="en">Big Data Could Cripple Facebook</a>.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/trabalhos/" rel="tag">trabalhos</a></p>
Twitter bootstrap e acessibilidade
/blog/2013/03/31/twitter-bootstrap-e-acessibilidade/
2013-03-31T03:00:00+00:00
2013-03-31T03:00:00+00:00
RamonPage
<h2>A REVISTA IMASTERS <a href="http://imasters.com.br/noticia/revista-imasters-esta-de-volta/" rel="external">está de volta</a> e eu tive o prazer de responder uma pergunta para entrar nesta edição de relançamento.</h2>
<figure class="right">
<img src="https://ramonpage.com/assets/images/posts/revista-imasters.png" alt="Capa da revista iMasters - edição 05">
<figcaption>Revista iMasters de volta!</figcaption>
</figure>
<p>A pergunta foi:</p>
<p><em>Após o surgimento do Bootstrap (desenvolvido no Twitter), vários outros frameworks têm surgido. Isso representa um avanço na padronização e o acesso mais fácil a webstandards ou pode ser uma armadilha...</em></p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/semantica/" rel="tag">semântica</a>, <a href="https://ramonpage.com/blog/tags/acessibilidade/" rel="tag">acessibilidade</a></p>
<h2>A REVISTA IMASTERS <a href="http://imasters.com.br/noticia/revista-imasters-esta-de-volta/" rel="external">está de volta</a> e eu tive o prazer de responder uma pergunta para entrar nesta edição de relançamento.</h2>
<figure class="right">
<img src="https://ramonpage.com/assets/images/posts/revista-imasters.png" alt="Capa da revista iMasters - edição 05" />
<figcaption>Revista iMasters de volta!</figcaption>
</figure>
<p>A pergunta foi:</p>
<p><em>Após o surgimento do Bootstrap (desenvolvido no Twitter), vários outros frameworks têm surgido. Isso representa um avanço na padronização e o acesso mais fácil a webstandards ou pode ser uma armadilha quando você precisa desenvolver multi-plataforma e com preocupação com acessibilidade? Por quê?</em></p>
<p>Minha resposta:</p>
<blockquote>
<p>“Eu imagino que as duas coisas. O Twitter Bootstrap e seus congêneres não afetam diretamente na padronização e acesso ao web standards, pois o papel deles, na verdade, consiste em ajudar a tornar o desenvolvimento para web mais prático, versátil e rápido. Em contrapartida, sabendo que esses frameworks procuram cobrir a maior parte dos elementos que usamos no dia a dia, padronizações proprietárias nascem naturalmente, o que é interessante para o estudo de quem está começando. Digo "proprietárias” porque as decisões partem das equipes que criaram e mantêm os projetos, o que muitas vezes dão margem para resultados inconsistentes e que não agradam a maioria. É preciso cuidado para decidir quando usar (ou não usar) esses frameworks.“</p>
</blockquote>
<p>E você, o que acha?</p>
<p>Agradeço à equipe iMaster pela abertura. Aos interessados, é bom ficar ligado <a href="http://imasters.com.br" rel="external">no site</a> para saber como conseguir a sua.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/semantica/" rel="tag">semântica</a>, <a href="https://ramonpage.com/blog/tags/acessibilidade/" rel="tag">acessibilidade</a></p>
Design Responsável
/blog/2013/02/11/design-responsavel/
2013-02-11T02:00:00+00:00
2013-02-11T02:00:00+00:00
RamonPage
<blockquote>
<p>“Poucas pessoas são capazes de expressar com equanimidade opiniões que diferem dos preconceitos do seu ambiente social. A maioria das pessoas são ainda incapazes de formar tais opiniões.” <cite>— Albert Einstein</cite></p>
</blockquote>
<p>Penso que duas das grandes virtudes que...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/front-end/" rel="tag">front-end</a>, <a href="https://ramonpage.com/blog/tags/web-design/" rel="tag">web design</a></p>
<blockquote>
<p>“Poucas pessoas são capazes de expressar com equanimidade opiniões que diferem dos preconceitos do seu ambiente social. A maioria das pessoas são ainda incapazes de formar tais opiniões.” <cite>— Albert Einstein</cite></p>
</blockquote>
<p>Penso que duas das grandes virtudes que nós podemos ter estão na percepção da mudança e no discernimento de saber se é o momento de mudar ou não.</p>
<p>Vamos ser francos, mudar é preciso. Faz parte da evolução humana mudar, errar e acertar. Mas nem tudo são flores, aceitar a mudança pode nos faz crescer ou regredir. Sábio é aquele que sabe mudar o suficiente e na hora certa.</p>
<h2>Nosso modo de trabalho sempre muda</h2>
<p>A web que conhecemos ainda é muito jovem! É quase como um adolescente que grita querendo ser lido, assistido e escutado. E esse adolescente quer estar sempre bem apresentado, haja vista a quantidade de meios (leia-se dispositivos) que a gente procura interagir com ele.</p>
<p>Já perdi a conta de quantas mudanças de paradigma eu acompanhei ao longo de todos esses anos trabalhando com web. Nós deixamos de usar tabelas em prol dos divs, criamos regras para organizar CSS, deixamos de usar divs em prol de uma melhor semântica e por aí vai…</p>
<p>Agora aqui estamos nós, mudando e reaprendendo mais uma vez.</p>
<p>O mundo passou a ser móvel. Estamos em movimento o tempo todo, não é de hoje. É incontestável a mudança comportamental que os gadgets trouxeram para as nossas vidas desde a década passada. A web precisava acompanhar isso. Nossos sites precisavam ser portáteis, pois nós passamos a ter celulares melhores e com telas coloridas.</p>
<p>Apesar disso tudo, era (e ainda é) preciso ter calma nas tomadas de decisão. Concordo plenamente com <a href="http://www.the-haystack.com/" rel="external">Stephen Hay</a>, quando disse que não há <em>mobile web</em>, apenas a mesma web de sempre vista de formas diferentes.</p>
<blockquote>
<p>“<span lang="en">There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.</span>” <cite>— Stephen Hay (@stephenhay) <a href="https://twitter.com/stephenhay/status/23350345962889216" rel="external">Janeiro 7, 2011</a></cite></p>
</blockquote>
<h2>Mudanças de paradigma são necessárias para a evolução do que fazemos</h2>
<p>Foi em 2010 que tudo começou, quando <a href="http://unstoppablerobotninja.com/" rel="external">Ethan Marcotte</a>
publicou no <a href="http://alistapart.com" rel="external">A List Apart</a> o excelente artigo <a href="http://alistapart.com/article/responsive-web-design" rel="external">Responsive Web Design</a>. A mudança de paradigma era tanta que é perceptível ver nos primeiros comentários a incompreensão daquilo que foi escrito.</p>
<p>O tempo foi passando e o conceito ganhou popularidade. Todo mundo começou a querer aquilo, mesmo sem entender direito se era necessário.</p>
<h3>Mas o que é afinal design responsivo?</h3>
<p>Design responsivo nada mais é do que portar um projeto web para diversos dispositivos, utilizando CSS <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="external">media queries</a>. Trocando em miúdos, utilizando esta técnica é possível fazer um projeto ficar apresentável no computador, laptop, tablet e até mesmo em smartphones.</p>
<p>Porém existe um perigo nisso tudo: a liberdade! Nós temos o poder de fazer <em>qualquer coisa</em> tecnologicamente e fica bastante difícil saber o momento de parar. É preciso entender que toda liberdade requer responsabilidade.</p>
<h3>Design responsivo com responsabilidade</h3>
<p>É engraçado ver que a cada nova onda as pessoas tendem a querer provar que são capazes de fazer aquilo. Nós precisamos parar de fazer design responsivo porque é legal e começar a fazer design responsivo porque é necessário!</p>
<blockquote>
<p>“<span lang="en">Designers who resize browsers searching for responsive design.</span>” <cite>— Diego Zambrano (@workforfood) <a href="https://twitter.com/workforfood/status/289033190516072448" rel="external">Janeiro 9, 2013</a></cite></p>
</blockquote>
<p>Veja, não vai ser o <a href="http://responsive.is" rel="external">responsive.is</a> que vai provar que você é um desenvolvedor legal, porque você sabe fazer site responsivo<sup>1</sup>. Não se engane mostrando isso aos seus amigos. <span class="pullquote">Quem mais precisa saber sobre o resultado do seu trabalho é o seu cliente.</span> Ele é o maior interessado em saber se o projeto contratado está compatível com dispositivos móveis ou não (levando em conta o que foi acordado, é claro).</p>
<p class="info-label"><sup>1</sup> — Ao usar <code>device-width</code> ou <code>device-height</code> no seu layout responsivo o responsive.is não vai mostrar corretamente as versões do projeto quando visualizado em desktops, mas será que isso importa? Entenda com a Mozilla a <a href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" rel="external">diferença entre <code>device-(width|height)</code> e <code>width/height</code></a>.</p>
<blockquote>
<p>“<span lang="en">Responsive design is overrated…</span>” <cite>— Daniel Lopes (@danielvlopes) <a href="https://twitter.com/danielvlopes/status/298619097837621248" rel="external">Fevereiro 5, 2013</a></cite></p>
</blockquote>
<p>Nós precisamos parar de achar que somos super-heróis só por conta de uma particularidade do nosso trabalho. Há tantas coisas importantes que permeiam a produção para web. Antes de qualquer ferramenta utilizada e qualquer funcionalidade desenvolvida sempre deve haver um problema a ser resolvido, não apenas a vontade de seguir uma moda.</p>
<h2>Quebrando o paradigma</h2>
<p>Hiroki Takeuchi postou um <a href="https://gocardless.com/blog/unresponsive-design/" rel="external">artigo interessante</a> recentemente. Ele fala sobre o porquê da sua equipe ter decidido deixar de lado o design responsivo nas novas páginas do <a href="https://gocardless.com/" rel="external">GoCardless</a>. Hiroki termina dizendo:</p>
<blockquote>
<p>“<span lang="en">Responsive design is definitely a useful tool to consider, but it’s also important to be clear on the case for it before embarking on any new projects.</span>”</p>
</blockquote>
<p>É importante entender que em determinados casos o design responsivo <a href="http://37signals.com/svn/posts/3269-behind-the-speed-basecamp-mobile" rel="external">não vai ser uma boa solução</a>.</p>
<p>Procure conhecer profundamente a natureza dos seus projetos e faça design responsivo para o bem da web e da mobilidade, não para diversão.</p>
<p><strong>Atualização 19/02/2013:</strong> Sugiro a leitura do artigo <a href="https://vanschneider.squarespace.com/journal/re-re-sponsive-design-youre-doing-it-wrong" rel="external">Re: Re: Sponsive Design — Part I</a> de Tobias van Schneider.</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/front-end/" rel="tag">front-end</a>, <a href="https://ramonpage.com/blog/tags/web-design/" rel="tag">web design</a></p>
Não farei parte da organização do Front in Rio 2013
/blog/2013/01/23/nao-farei-parte-da-organizacao-do-front-in-rio-2013/
2013-01-23T02:00:00+00:00
2013-01-23T02:00:00+00:00
RamonPage
<p>O Front in Rio 2012 foi um verdadeiro <a href="/blog/2012/06/10/front-in-rio-2012-foi-um-sucesso">sucesso</a>, graças a mobilização de alguns amigos. Foi um prazer enorme ter feito parte dessa trupe que fez o evento acontecer.</p>
<p>Eu esperava fortemente poder levantar o evento de 2013, porém para este ano eu tenho...</p><hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/pessoal/" rel="tag">pessoal</a>, <a href="https://ramonpage.com/blog/tags/eventos/" rel="tag">eventos</a>, <a href="https://ramonpage.com/blog/tags/front-in-rio/" rel="tag">front in rio</a></p>
<p>O Front in Rio 2012 foi um verdadeiro <a href="/blog/2012/06/10/front-in-rio-2012-foi-um-sucesso">sucesso</a>, graças a mobilização de alguns amigos. Foi um prazer enorme ter feito parte dessa trupe que fez o evento acontecer.</p>
<p>Eu esperava fortemente poder levantar o evento de 2013, porém para este ano eu tenho muitos outros desafios e foi preciso pesar na balança.</p>
<p>Calma, calma. Eu não estou dizendo que o Front in Rio não vai acontecer em 2013, muito pelo contrário! Desejo boa sorte aos amigos que vão tocar esta missão.</p>
<p>Em tempo, quem sabe 2014? :)</p>
<hr /><p>Marcado em: <a href="https://ramonpage.com/blog/tags/pessoal/" rel="tag">pessoal</a>, <a href="https://ramonpage.com/blog/tags/eventos/" rel="tag">eventos</a>, <a href="https://ramonpage.com/blog/tags/front-in-rio/" rel="tag">front in rio</a></p>