Html & Css
Html5 & Css3
WordPress
Responsive Design
Workshop de LESS Css

~OPORTUNIDADES~ de se tornar um profissional excelente.

Bom, enfim, contudo, os cursos são em formato “especial” como diz a FISAM, ou seja, só abre turma quando completar 10 inscritos, por isso estou propagandeando aqui. Outra coisa, vou ministrar alguns dos cursos de lá, OU SEJA, conhecimento garantido

Os que darei aulas são Html5 & CSS3, WordPress, Responsive Design e o Workshop sobre LESS Css que é uma ferramente excelente e meu companheirão de trabalho.

A sim, preciso agradecer ao José Matias que será cordenador nos cursos e  que ajudou bastante a levar os cursos até a faculdade e também vai ministrar alguns cursos lá, o de HTML & CSS Básico é dele, então galera, inscrevam-se e compartilhem por ae.

E para mais informações sobre o curso veja aqui: http://www.sanmartinbr.com.br/mini_cursos/mini_cursos.php

Duvidas ou sugestões? formulário de comentários logo abaixo do post né e formulário de contato em @mail-me

Nesses cenários surge o KillSwit.ch, iniciativa do !Drop Studio pra solucionar esse problema. A ideia é simples, você freelancer se cadastra lá (ainda estamos em beta) e gerencia todos seus clientes, cadastrando eles e tals, quando terminar de cadastrar seu cliente ele gera um código e você insere esse código no site do seu cliente.

Simples assim? mais e ae o que acontece?

Cliente não pagou? desative o site dele com um clique pelo painel do KillSwit.ch, é prático e você não perde todo trabalho que você fez se o site estiver em total funcionamento.

Cliente resolveu pagar depois de ver o site offline? Ative denovo no painel com apenas um clique.

BANG!

Gostou? se gostou mesmo ajude-nos no Startup Base, clique em [Acreditar] e também participe dos beta tests cadastrando seu email no site.

Hoje posso dizer que sou sou meu proprio patrão, tenho meus clientes, faço meu horário e etc que todos sonhamos. Infelizmente nem tudo é sonho.

Recentemente minha família veio pra Curitiba também pra ganhar a vida e eu tentando economizar uma grana voltei a morar com eles, não foi uma idéia muito boa, eles não sabem o que é trabalhar em casa, não rola a mesma disciplina que levei anos pra conseguir. Tudo bem, já estou pra resolver isso.

Disciplina

Essa é a chave de tudo depois que você conseguiu se tornar seu patrão ou está treinando pra isso

Confesso que meu Home Office costuma ser a cozinha daonde moro, tem uma mesa e é repleta de comida e café.

Separar seu quarto e/ou outro ambiente de circulação livre do seu home office é importante, por que? pra não haver interrupções no meio de algo importante. Exemplo: Você tá lá todo concentrado resolvendo um problema urgente de ultima hora que precisa ser feito JÁ! e sua mãe/esposa/namorada/afins te interrompe pra você…sei lá….falar que o cachorro da vizinha pariu, ou pra você por o lixo pra fora, enfim, tendo essa limitação de espaço o trabalho de disciplinar os outros membros residentes se torna bem mais facil, você explica pacientemente pra eles que das 8 as 6 ou quando você estiver no escritório, você está trabalhando.

Também é bom ter horários, como em um trabalho normal, faz bem pra saúde essa parte, sanidade principalmente, muitos ficaram loucos virando a noite

Uma coisa que aprendi no !Drop Studio, se um trabalho não pode ser terminado hoje por que acabou o expediente, é porque ele não deveria ser terminado hoje. Sério, pode parecer descaso com o cliente mas não é, pense, vai virar a noite debugando um código e sem entender o porque dos erros? não! dê um descanço pra cabeça, na manhã seguinte você consegue resolver de primeira

Falar em disciplina, eu sei que prometi um video cast sobre lessCSS, porém estou completamente sem tempo pra gravar/editar etc.

Enfim, pra um primeiro post sobre Self Employment acho que está bom, né?

E você? pensa em se tornar seu próprio patrão? já é?

Compartilhe suas experiências com a gente, dizem que leva-se dois anos pra se afirmar como self employer, o que acha disso?
Quanto tempo levou pra você?

Créditos da foto do home office http://www.flickr.com/photos/mkosut/2583927058/

Utilizando lessCSS

Para testes, aconselho usuários Windows a utilizar o javascript disponibilizado na própria página do less, a instalação é simples, veja:

você primeiro adiciona seu arquivo .less que na verdade é seu CSS:

<link rel="stylesheet/less" type="text/css" href="styles.less">

e depois o javascript do lessCSS

<script src="less.js" type="text/javascript"></script>

po, simples assim? SIM

E para produção? como faço?

Sendo bem honesto com vocês, não testei o modo produção citado no site do lessCSS, que pede para instalar o npm e seguir instruções.

Fiz da seguinte maneira, com ruby instalado no computador fiz um simples gem install less e sempre que precisei compilar o arquivo .less para .css utilizei less arquivo.less e me retornava o arquivo .css pronto

Mas né, na época windows isso.

Usuários Mac OSX aconselho o download do lessAPP que faz a parte desenvolvimento e produção ao mesmo tempo, sem precisar carregar nenhum javascript a mais na página. Simples como tem que ser, você indica onde está seu arquivo .less e aonde será criado seu arquivo .css e cada vez que você salvar seu arquivo .less o App fica responsavel em compilar seu .css.

Tela do compilador

Tela de preferências, dando a possibilidade de minificar seu CSS.

No proximo post explicarei como utiliza-lo, se der tempo até faço um video.

Sua vez

Você já utiliza o lessCSS? como foi sua linha de aprendizagem?

Desde muito tempo existe o famoso Filter no CSS e rola que a Microsoft foi boazinha o suficiente pra manter a parte de degradê com filter, tá que você vai perder toda a validação do seu CSS e tals, mais idai? você já perdeu mesmo adicionando CSS3

Então vamos lá, como fazer?

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’Cor de Inicio’, endColorstr=’Cor Final’);

As cores devem estar em Hexadecimal, ou seja #CDCDCD, #000000, #FFFFFF, #EE0000 e afins

e o filter deve vir após background, onde vem o seu -moz-linear-gradient e -webkit-gradient que não vem ao caso explicar agora como funciona, sendo que existem trilhões de tutoriais pela internet.

Problemas ou não

Uma invialibidade do Filter é que ele não oferece ponto de início e fim fixo como nas versões para -moz e -webkit.

Sua vez

Enfim, é isso, espero que tenham gostado deixem suas dicas nos comentários e/ou experiências

Então certaente você já se perguntou, como inserir um Dummy Data para testar seu Theme, ou pelo menos uma maneira de inserir algum conteudo rapidamente, com tudo que você precisa pra verificar seu Theme, tenho duas soluções rapidas pra você:
Um Plugin e Um XML.

O Plugin:

WP-Dummy Content

http://wordpress.org/extend/plugins/wp-dummy-content/

Com ele é possivel criar páginas, sub-páginas, posts etc.

O XML:

WP-XML Test Data Import

http://designwoop.com/2008/09/wordpress-xml-import-download/

É este um faz a mesma coisa, só que ao invez de você ter que instalar plugins ativar configurar etc, você simplesmente irá na ferramenta de Import da sua instalação e importará esse XML, simples assim.

Nele já vem 10 posts, 2 deles com UL e OL, 11 categorias, 5 páginas e outras coisas, veja mais no site deles .

Para adicionar a tradução ao plugin acesse a pasta do plugin em wp-content/plugins/registerplus e só colar lá.

E como ando muito longe aqui do blog vou disponibilizar isso para download se tiverem sugestões de melhora na tradução porque fiz correndo, não exite em comentar aqui ou me mandar um email que eu adiciono lá.

Download

Abordaremos Sprites, Minimizando Javascript e CSS, a escolha correta do seu Document Type, vamos lá?

Sprites

Esta técnica consiste em reunir varias pequenas imagens, como action buttons e outros pequenos detalhes, em uma única imagem, e depois por meio de CSS recorta-la utilizando background-position, fazendo isso diminuiria os HTTP Requests e com isso o consumo de banda.

Só não saia por ai fazendo Sprites de tudo quanto é imagem do seu site, porque senão elas ficam pesadas e mesmo com a diminuição do HTTP Request, você aumentará o consumo de banda e de nada adiantou

Minimizando Javascript e CSS

Minimizar ou Minificar scripts e styles nem sempre é uma técnica bem vinda, pro dificultar manutenção e etc. Eu particularmente não a utilizo, porém sei que é necessária para alguns sites grandes onde cada kb é precioso.

Pense que você fez todo seus styles e scripts e no final tudo deu pro volta de 20kb certo? agora imagine bilhões de usuarios acessando esta página e faça as contas no final do dia o consumo de banda do site foi pro espaço.

Agora Minimizando o Minificando né seus scripts e styles, de 20kb eles caem pra 1~7kb diminuiu bem não é?

Booom, e pra facilitar o seu trabalho na hora de minificar, existem alguns sites muito bons que fazem o serviço, e de graça . Meu preferido é o http://www.reneschmidt.de/tools/index.php/minify/. Simples funcional, claro que contém alguns erros, principalmente para minificar javascript, mais idaí, é free.

Escolhendo o Document Type correto

Document Type, não é tão ligado assim a velocidade do site tão menos ao consumo de banda. Porém , dizer ao browser o doctype certo avisa-o como proceder com certas coisas, e ele pode tirar o maximo potencial disso.

Alguns tipos:

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitiona//EN” “http://www.w3.org/TR/html41/loose.dtd”>

E por incrivel que pareça no HTML 5 ficaria assim:

<!DOCTYPE html>

É isso espero ter sido útil novamente, qualquer dúvida já sabem né tem os comentários ai e a página de contato ali em cima

1. Um WordPress 2.9.x
2. Seu Theme atual
3. Saber editar o Function.php do seu Theme
4. Saber editar talvez o index.php ou aonde você quer que o thumbnail apareça

Mais tão simples assim? SIM! super simples

Primeiro começamos com seu Function.php adicionando uma simples linha, ou duas caso você goste de adicionar comentários.

// Habilita post-thumbnails
add_theme_support(‘post-thumbnails’);

Pronto, agora já está habilitado os posts-thumbnails, mais calma que não é só isso, esta parte só habilita na pagina de Add New post a opção de adicionar um thumbnail:

Mostrando o Thumbnail no post

Agora sim, a parte divertida, e claro como quase tudo no wordpress, outra parte simples da nossa receita.
Basta adicionar a seguinte linha, dentro do seu Loop aonde você gostaria que sua thumbnail aparecesse, da seguinte maneira:

<?php the_post_thumbnail(); ?>

Acabou? não, quando você adiciona esse simples codigo ao seu Loop, ele(o wordpress) automáticamente atribui as seguintes classes attachment-post-thumbnail e wp-post-image a tag de imagem, tornando simples o trabalho de atribuição de valores atraves de CSS.

OKAY! Configurando o tamanho padrão do Thumbnail

Temos agora todas configurações prontas, falta dizer pro wordpress que eu quero que todos thumbnails do meu site sigam determinado tamanho, e claro ele irá redimensionar essas imagens pra gente logo após o upload, genial não é?!

Acesse então em Settings > Media dentro do seu painel admin e encontre em Image Size a opção Thumbnail Size. Lá modifique conforme suas preferências.

Show, sua receita agora está pronta.

Vantagens de se usar o Post-Thumbnail ao inves de Get-Post-Meta(Custom Fields)

Confesso que aqui no Persocon utilizo ainda o Get-Post-Meta(Custom Fields) para os thumbnails, por preguiça, porém acho bem mais simples a criação, configuração e utilização do Post-Thumbnail.

A maior vantagem de todas do post-thumbnail, é a diminuição no MySql Queries, porque o post-thumbnail é salvo na tabela wp_post, que é normalmente chamada quando você abre um post. Enquanto com Get-Post-Meta(Custom Fields) o wordpress é obrigado a buscar na tabela wp_postmeta os dados necessários.

Conclusão

Receita pronta para saborear tudo que há de bom no WordPress 2.9.x, e espero que você tenha gostado do artigo e que tenha sido bastante útil para você aprender o básico da função post-thumbnail.
Espero que você tenha aprendido algo novo e que se tiver alguma duvida ou sugestão, não hesite em comentar

O Reset.CSS zera todos atributos, certo? e você tem que adicionar atributos novamente, padding, margin, font-size e etc, imagine seu navegador fazendo isso, lê o reset e zera tudo, lê seu style.css e atribui tudo denovo, consome banda, o load aumenta certo? certo!

Como funciona o Base.CSS, é bem simples a principio, ele te dá todos atributos necessarios já preenchidos, paddings, margins, font-sizes, conserta bugs, não só bugs do IE, todo navegador tem probleminhas e ele conserta alguns, e etc.

Como usar?
Você precisa copiar o codigo daqui:

http://tjkdesign.com/ez-css/css/base.css

Para um arquivos base.css ou o nome que você quiser dar.

Por favor, não inclua o link direto no seu html, por motivos de segurança, salve o base.css no seu diretorio de trabalho, e utilize-o de lá, modifique-o claro, nem todos atributos podem estar do jeito que você gosta, fontes, sizes e afins.

Então, como inclui-lo?
Assim:

<link rel="stylesheet" type="text/css" href="base.css" />

Fato interessante sobre o base.css, eu percebi enquanto usava, que não precisei mais de Clearfix para consertar algumas divs que não se alinhavam verticalmente. Ele corrige varios Bugs provenientes do IE6 e seus irmãozinhos.

Qualquer duvida, estamos ae