[Tutorial] Gerando estrutura de aplicação web com NodeJS + Yeoman

Aprendemos a instalar o NodeJS no ubuntu 14.04 LTS uns dias atrás, agora vamos entender porque o NodeJS é tão popular entre os desenvolvedores front-ends. Vamos trabalhar com alguns componentes que deixam nossa vida mais automatizada, trazendo redução de tempo na produção dos projetos realizados, e alguns eles são: Yeoman Gulp Bower Sass(Scss) jQuery Modernizr O Conceito Imagine só, todo projeto seja ele de estudo ou de produção tem que criar toda uma estrutura de pastas e arquivos para poder começar a trabalhar, levando em consideração que precisaremos configurar o Gulpfile.js, Bower.json, linkar jQuery,Modernizr, fazer os testes, estruturar o Sass(scss) e … Continuar lendo [Tutorial] Gerando estrutura de aplicação web com NodeJS + Yeoman

Tutorial: Criando um Grid de Colunas com Sass

Objetivo: Criar um grid de colunas verticais com duas cores no background, que calculam automaticamente a quantidade que precisa para encaixar na tela do usuário. HTML Nosso HTML será básico e terá somente uma class dentro da tag <header class=”header”><!– empty –></header> CSS Para o CSS iremos utilizar o pre-compilador Sass, então estou levando em consideração que você já tenha instalado em sua maquina e funcionando. Primeiro vamos resetar margin, padding, e fazer com o box leve em consideração suas bordas,paddings,margins e definir um background geral. *, *:after *:before{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: … Continuar lendo Tutorial: Criando um Grid de Colunas com Sass

Tutorial: Criando um Componente com Sass em 10 minutos

Os desenvolvedores de hoje reconhecem que, ao começar um projeto web precisamos ter o máximo possível de código reaproveitável, não importa se é HTML, CSS, Javascript, Ruby ou PHP, Java, .NET, enfim precisamos ter coleções ou componentes prontos para usar, adiantando o processo de criação e nos dando mais tempo para outras tarefas. Então vamos criar  um componente CSS para lidar com diferentes tipos de mensagens de alerta,onde é o caso perfeito para que possamos implementar alguns conceitos de Sass (Syntactically Awesome StyleSheets) Definindo o HTML Você pode utilizar qualquer elemento HTML que trabalhe como bloco(block), uma div,section,article.. trabalharemos com … Continuar lendo Tutorial: Criando um Componente com Sass em 10 minutos

PORTAL DE NOTICIAS – JUVENTUDE GOSPEL

Projeto realizado em parceria com meu amigo Eliel de Paula. O escopo era que teriamos que criar algo muito simples, então fiz a cabeça trabalhar e criei este layout no photoshop. O projeto atualmente(nesta data do post) está no ar no link Juventude Gospel. Bom para o FrontEnd fiz do zero, utilizei tecnologias inovadoras e de runtime maravilhoso como: LESS, CSS3, HTML5, jQuery. Criei o framework para botoes e etc.. Para o CMS usamos CodeIgniter, framework PHP em alta no mercado e de facilidade excelente, trabalha com MVC,activeRecord e etc.. e também o framework CSS BootStrap feito pelo Twitter. Bom este é … Continuar lendo PORTAL DE NOTICIAS – JUVENTUDE GOSPEL

Especificação CSS4 W3C

“..melhor um browser desatualizado , do que um desenvolvedor desatualizado..” , não sei bem onde eu ouvi esta frase, mas pra mim faz muito sentido! Se você trabalha com desenvolvimento web não costuma se atualizar, pesquisar tendências , novas especificações , novos métodos de trabalho e novos frameworks, bibliotecas e etc.. precisa urgentemente mudar essa situação. Não é uma novidade que o W3C venha implementando aos poucos o CSS3 nos browsers , e como percebemos que aconteceu com HTML e outras linguagens, mas sai do forno um level de seletores e ja entra outro em seguida, isso aconteceu com HTML5 … Continuar lendo Especificação CSS4 W3C

Novo Layout LifeSites Agência Digital

Missão LifeSites.. Bom, recebi ontem no final do dia, uma missão que iria fazer minha vida de designer mudar rsrs.. zuera galera, como designers sabemos que todo projeto é uma missão, é claro quando se trata de “profissionais que se preocupam com o final do projeto”, bem continuando a resenha o chefe pediu que eu fizesse uma novo site para agência.. Bom até ai tudo bem, mas quando ele falou, “eu quero simples, clean, moderno, e que mostre nosso portfolio logo de cara, poucos links..” bom o resultado está ai embaixo!! A ideia foi criar algo como ‘pinterest’, utilizando a … Continuar lendo Novo Layout LifeSites Agência Digital

Certificado Microsoft Virtual Academy

HTML5 Homologado pelo W3C! Como todo bom Front-End não paro nunca de procurar coisas novas para aprimorar meu conhecimento, rodando pelo ‘network’ me deparei com o  MVA(Microsoft Virtual Academy) ,onde encontrei vários cursos grátis para desenvolvedores.. Primeiramente fiz o de HTML5 e agora estou fazendo o de  Developing in HTML5 with JavaScript and CSS3 Jump Start , ótimo curso para quem quer melhorar suas técnicas de front-end. Ao finalizar o curso de HTML5 recebi um certificado com meu nome , confirmando o termino do curso.. O Curso que tem como conteúdo, Canvas , SVG , as Tags HTML5 e etc.. foi muito proveitoso … Continuar lendo Certificado Microsoft Virtual Academy