Conheça Google Web Designer - Uma Ferramenta para Animações e Anúncios com HTML5 e CSS3

Google lança ferramenta de desenvolvimento em HTML5 e CSS3 gratuita que promete impulsionar o desenvolvimento de sistemas web e a apresentação de anúncios independente do tamanho da tela onde será exibida.

Trata-se de uma ferramenta essencialmente visual, que permite focar no design do que está sendo criado, mas também possui a liberdade para manipular diretamente o código, o que atrai a atenção de desenvolvedores como eu.

Já não é de hoje que a web vem seguindo uma tendência de padronização, onde o objetivo é estar cada vez mais acessível ao publico e por isso tecnologias obsoletas começaram a ser substituídas pelas tecnologias do HTML5 e CSS3.

Neste cenário o Google Web Designer já começa sendo apresentado com a seguinte frase: “It doesn’t matter how brilliant your work is if people can’t see it” (Não importa quão brilhante é o seu trabalho se as pessoas não podem vê-lo.) com a intenção de tornar essa criação de sistemas acessíveis, ainda mais simples.

A ferramenta permite criar animações, efeitos 3D, ilustrações e claro, anúncios, o que é um dos mais importantes serviços do Google.

A ferramenta encontra-se em fase beta, porém como todo produto Google deve ser encarado como em aprimoramento constante e não apenas como uma ferramenta em testes. Ou seja, uma vez apresentado, uma ferramenta como esta dificilmente sairá do mercado.

Para conferir as funcionalidades da ferramenta e utiliza-la, basta acessar http://www.google.com/webdesigner/ e baixar, é gratuito portanto vá fundo conheça e aproveite.

0

Dica – Icones para sites e sistemas

A dica de hoje consiste em uma lista de sites para encontrar ícones para os mais diversos sistemas, tanto gratuitos como pagos.

Encontrar aquela imagem que encaixe bem com a interface da nossa aplicação nem sempre é fácil e muitas vezes não sabemos por onde começar a procurar. Trago aqui uma solução rápida para boa parte dos seus problemas com ícones.

Os sites abaixo possuem vários ícones tanto gratuitos quanto pagos em diversos tamanhos e formatos e a escolha cabe a sua vontade e necessidade.

https://www.iconfinder.com/

http://findicons.com/

http://icones.pro/

http://www.iconesbr.net/

http://www.iconarchive.com/

http://www.iconspedia.com/

Aproveite e deixe suas criações ainda mais profissionais.

Obrigado!!

0

Dicas e Boas Práticas – CSS

Separe sempre suas classes CSS por conteúdo ao qual ela está referenciando.

Você pode fazer isto de várias formas contanto que fique intuitivo para você e para seus colegas de trabalho. As minhas recomendações são as seguintes:

1. Coloque seus estilos CSS em um diretório devidamente organizado dentro do seu projeto.
2. Divida-as em arquivos por contexto. Por exemplo, tenha um arquivo para todas as classes referentes a formatações de cores de fundos, outro para formatações de texto, outro para imagens e tantos outros quantos julgar necessário, mas claro sem exageros.
3. Dentro de cada arquivo defina nomes intuitivos e que possam identificar tanto o que a classe faz quanto em qual arquivo aquela classe está localizada, isso facilita na hora de realizar manutenções. Alguns exemplos de nome seriam:
• .fundo-cor-principal{} – referenciando todos os componentes que devem ter como cor de preenchimento a cor definida como principal.
• .text-titulo{} – referenciando a todos os textos referentes a títulos de conteúdo da sua página.
• .img-largura-100-porcento{} – referenciando a todas as imagens que devem ocupar 100% da largura de seu componente pai.
4. Utilize sempre letras minúsculas, ou algum outro padrão de capitalização que você esteja habituado a utilizar para definir os nomes das classes, desta forma você não precisa quebrar a cabeça ou verificar os arquivos todas as vezes que precisar utilizar uma classe.

Nestas horas fala sempre mais alto o bom senso, pois exageros e minimalismos normalmente são desnecessários e podem reduzir sua qualidade.

Um abraço a todos e obrigado pela atenção!!

0

Tutorial – Utilizando Bordas CSS Sem Estragar o Layout da Página

Se você já desenvolveu alguma página para internet, você pode ter enfrentado alguns problemas ao colocar bordas em seus itens e ter um layout completamente distorcido.

Isto ocorre por que os navegadores entendem que as bordas no box model padrão do CSS são algo extra ao conteúdo e, portanto deve ser adicionada como algo a mais, sendo somados ao valor de largura e altura definido.

Assim se você possui uma div com largura de 200 pixels e adiciona uma borda de 10 pixels, esta div passa a ter uma largura total de 220 pixels (200 do conteúdo e 10 de cada lado para cada borda).

O resultado exibido é uma página desfigurada conforme a tela a seguir:

Para solucionar este problema, existe a propriedade CSS3 chamada box-sizing. Esta propriedade define como a caixa de conteúdo definida pelo componente em uso entenderá os valores de padding, margin, border e o próprio conteúdo.

Assim a mesma div com largura de 200 pixels ao ter adicionada uma borda de 10 pixels, esta div continua a ter uma largura total de 200 pixels, porém o conteúdo é reajustado em uma área menor, ou seja, dos 200 pixels do conteúdo são subtraídos os 10 pixels de cada lado para cada borda, deixando uma área de 180 pixels de largura para o conteúdo.

Para isto é apenas necessário definir a seguinte propriedade nos elementos aos quais for adicionar uma borda.

box-sizing:border-box;

Para solucionar possíveis problemas com os navegadores antigos ou que ainda não suportam a propriedade padrão do CSS3, existem as variantes específicas de cada navegador, e que funcionam da mesma forma que a propriedade nativa  (para saber qual a compatibilidade da propriedade com os navegadores acesse http://caniuse.com/#feat=css3-boxsizing):

-moz-box-sizing

-webkit-box-sizing

Sendo assim a classe CSS para o procedimento mais abrangente ficaria da seguinte forma:

.box-model-fix

{

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box;

}

E consequentemente o resultado gerado seria a figura a seguir:

Assim, utilizando desta simples propriedade, podemos utilizar as propriedades de margens sem medo algum e tornar nossos sites ainda mais completos e bonitos.

Obrigado!!

0

Dica – Os Links Favoritos Ideais para um Desenvolvedor

Muitas vezes levamos muito tempo procurando onde está a informação que precisamos na internet, apesar de hoje em dia tudo ser muito fácil de ser encontrado através do nosso amigo quase omnisciente chamado Google, não custa nada ter um truque na manga e guardar em algum lugar nossos links importantes que já encontramos e sabemos que serão necessários outras vezes.

Por este motivo aqui está uma lista com meus 11 links mais utilizados enquanto estou desenvolvendo sites e pesquisando tecnologias para colocar em meus trabalhos:

http://caniuse.com/ - Permite verificar compatibilidade de padrões web com os navegadores mais utilizados.

http://stackoverflow.com/ - Grande fórum de discussão dos mais diversos conteúdos, nos quais costumo manter o foco nos tópicos relacionados a desenvolvimento e tecnologia.

http://www.responsinator.com/ - Site que permite pré visualizar sites de acordo com o tamanho de telas dos dispositivos mais comuns atualmente, permitindo que sejam testados layouts responsivos e verificar a visualização do seu site nos mais diversos aparelhos.

http://jquery.com/ - Site oficial da API javascript jQuery

http://jqueryui.com/ - Site oficial da API javascript jQueryUI (User Interface)

http://jsfiddle.net/ -Site que permite a postagem e teste de porções de código em javascript.

http://www.w3.org/ - Site da comunidade responsável pela definição dos padrões da internet atual.

http://validator.w3.org/ - Validador de Linguagem de Marcação.

http://www.w3schools.com/ - Site de tutoriais, dicas e demais referências a desenvolvimento para internet.

https://kuler.adobe.com/create/color-wheel/ - Seletor de cores da Adobe.

http://www.maujor.com/ - Site com conteúdo diverso relacionado à utilização de CSS, um site que recentemente foi aparentemente redesenhado e me atraiu bastante a atenção para completar a lista de sugestões.

Esta lista vale a pena você pedir para seu chefe tirar do filtro de Proxy que bloqueia a rede do seu trabalho, pois são de extrema utilidade para maioria dos desenvolvedores e profissionais da área de tecnologia.

Boa sorte!!

Abraços!!

0

Tutorial – Criando layout tabular com a tag div e com a propriedade CSS display:table

Esta é uma dica que eu estava devendo há meses para meu amigo Sérgio Sansevero, e como ele já me pediu uma referencia que pudesse guardar para a explicação de alguns conteúdos, estou começando a postar com este tutorial, para que a referencia que ele precisa passe efetivamente a existir.

Hoje em dia é completamente fora dos padrões da web utilizar tabelas (<table></table>) para a criação de layouts de páginas, por definição tabelas somente devem ser utilizadas para conteúdo que sejam tabulares, enquanto div deve ser utilizada para construção de layouts.

Desta forma, a fim de ajudar os desenvolvedores a se livrarem do hábito de utilizar tabelas para construção de layouts, devido a facilidade de manipular alguns conteúdos em seu interior, venho mostrar a propriedade CSS display:table.

Com ela, é possível fazer com que um conjunto de divs seja renderizado pelo navegador como se fossem tabelas, permitindo que layouts sejam criados com div mantendo a aparência tabular desejada. O único cuidado que se deve ter é para não colocar conteúdo tabular que deveria estar de fato em uma tabela (<table>) dentro de um conjunto de divs aninhadas.

O código a seguir ilustra o procedimento de criar botões centralizados em uma div com display:table contendo duas divs internas com propriedade display:table-cell.

O HTML ficaria assim:

<div class="container ">

    <div class="table">

        <div class="cell-enviar"><input type="button" value="Enviar"></div>

        <div class="cell-limpar""><input type="button" value="Limpar"></div>

    </div>

</div>

E os estilos css utilizados são os seguintes:

.container

{

margin:auto auto; width:50%;

}

.table

{

display: table;

background-color:red;

width:100%;

border:2px solid gray;

}

.cell-enviar

{

display: table-cell;

background-color:#aaa;

width:50%;

text-align:center;

}

.cell-limpar

{

display: table-cell;

background-color:#ccc;

width:50%;

text-align:center;

}

Desta forma o navegador entende que a div pai deve ser renderizada como uma tabela enquanto suas divs filhas devem ser renderizadas como células da “tabela”.

O resultado final é o apresentado abaixo:

Obrigado pela atenção e bom trabalho!!

0

Boas Vindas a Todos!!

Sejam bem vindos ao blog oficial do site Código Franco (http://www.codigofranco.com.br), aqui você encontrará tutorias, dicas, conteúdo relacionado à tecnologia, internet, desenvolvimento de sistemas, criação de páginas, padrões web e muito mais!!

Para conhecer mais acesse também: https://www.facebook.com/codigofrancosolucoes

Em breve muito conteúdo para você!!

Obrigado!!

0