Vocês já ouviram falar sobre o Initializr! ?

Ele é um gerador de código que ajuda você a começar seu projeto em HTML5. Ele é baseado no Boilerplate e foi criado por Jonathan Verrecchia (@verekia) com o objetivo de ampliar o uso do HTML5.

Em contato com o Jonathan, combinei com ele de traduzir a documentação oficial do Initializr do francês para o português, para ajudar a divulgar ainda mais essa tremenda ferramenta e quem sabe com isso ver o uso do HTML5 mais e mais em novos projetos.

Segue a tradução da documentação abaixo.
Você encontra a versão original em francês no seguinte link: http://www.html5-css3.fr/html5/initializr-generateur-template-html5-boilerplate.

Conheça esses projetos e começe já a trabalhar com HTML5!
Grande Abraço!

Initializr – Um gerador baseado nos templates Boilerplate HTML5

Initializr permite a você gerar um template baseado no Boilerplate, montando um rascunho de um HTML5 funcional em segundos.

Você pode customizar seus templates como precisar, para evitar começar um projeto com um código muito pesado. Todo o processo do projeto de design e as opções disponíveis estão detalhadas neste artigo.

Se você está começando agora com HTML5 e quer ter uma geral do que tem por trás dessa tecnologia, eu recomendo que você leia uma introdução ao HTML5 antes de seguir em frente.

Boilerplate HTML5

Boilerplate é uma poderosa e confiável ferramenta de templates criada e mantida por Paul Irish (Google) e Divya Manian.

Boilerplate consiste de um grupo de arquivos HTML, CSS e JavaScript, usados para iniciar com o pé direito em um projeto HTML5.

Ele também inclui ferramentas muito úteis, como o Modernizr, JQuery, e um reset CSS.

Também inclui outras ferramentas não tão necessárias como um Profiling JQuery, Código Google Analytics, Funções Javascript para loggin,

um arquivo de configuração para Flash cross domain, Configuração IIS server e Nginx, Páginas de teste, scripts ANT… Bem, quando você for iniciar seu projeto com Boilerplate, você vai precisar de algum tempo para selecionar as partes que você quer e não quer no seu projeto.

Initializr – Um Boilerplate leve e personalizável

A proposta com o initializr é ter o Boilerplate sem essas ferramentas raramente usadas com HTML5 para poder começar um projeto rápido e tão confiável quanto o Boilerplate. O código gerado pelo Initializr é totalmente baseado no Boilerplate, que tem uma força inegável. Initializr oferece diferentes opções para customizar seu template. Aqui estão os detalhes:

HTML / CSS

Por padrão, o Boilerplate entrega a você uma página em branco. Initializr permite a você gerear um conteúdo inicial como base, para te ajudar a começar rapidamente. A página exemplo trás o tema do site da Initializr, com uma página estruturada com um clássico cabeçalho, um rodapé, um menu para navegação, um bloco lateral, e uma estrutura similar a um blog com alguns posts.

Javascript

O Boilerplate inclui a excelente biblioteca de Javascript jQuery. E no Initializr nós também encontramos essa biblioteca, disponível em forma minimizada ou não. Ou também o direito de não incluir ela, ou não incluir nenhum Javascript. Vamos atentar para um ponto: Estamos falando do seu Javascript. Nada no Modernizr ou no HTML5shiv vai garantir uma compatibilidade 100% com todos os navegadores. Então não esqueça de testar isso posteriormente.

Compatibilidade

Html5Shiv

Navegadores modernos suportam totalmente as novas tags do HTML5. Mas versões do Internet Explorer 8, e anteriores a ele, precisam de uma ajudinha para exibir essas novas tags, que por padrão não são reconhecidas. Esta pequena ajuda é chamada HTML5shiv. Ele é um pequeno arquivo javascript que vai permitir ao Internet Explorer reconhecer essas tags graças a uma função createElement():

document.createElement("header");

Todos os novos itens são automaticamente criados antes do conteúdo da página ser completamente exibido. Isso torna obrigatório colocar o HTML5shiv no Head da sua página ao invés de colocar no rodapé, que é o recomendado para todos os outros javascripts.

Modernizr

O Modernizr, é um sensor de suporte das funcionalidades HTML5 e CSS3, que inclui o HTML5shiv. Ele é um arquivo javascript que irá criar um objeto contendo propriedades modernizr para cada funcionalidade, indicando se ela funciona ou não no seu navegador.

if (Modernizr.geolocation){
  // A geolocalização é suportada
}
else {
  // A geolocalização não é suportada
}

Modernizr também adiciona classes CSS para o HTML, para que você possa facilmente indicar um estilo alternativo se certas propiedades CSS3 não forem suportadas.

.multiplebgs header {
  /* Backgrounds múltiplos são suportados */
}
.no-multiplebgs header {
  /* Backgrounds múltiplos não são suportados */
}

Modernizr é bem abrangente na detecção de suporte a HTML5 e CSS3, mas é importante entender que ele não adiciona nenhuma característica faltante (como faz o HTML5shiv em relação as tags). Ele é a ferramenta selecionada por padrão para compatibilidade do Initializr.

A configuração do servidor

O Initializr traz um arquivo de configuração para o servidor, também gerado pelo Boilerplate. Portanto é possível selecionar um arquivo .htaccess para servidores Apache, web.config para Microsoft IIS, ou nginx.conf para Servidores NGinx. É importante notar que por padrão, esses arquivos vão re-escrever a URL da página, removendo o “www” para montar URLs curtas.

Se você preferir manter o seu “www”, você pode remover as seguintes linhas no caso do .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

É apenas um clique no botão!

Após fazer suas escolhas com relação a configuração, um simples clique no botão Download! fará o download de seus arquivos.

Se você manter as configurações padrão, você terá uma estrutura de projeto completa e pronta para uso, como a mostrada abaixo:

Uma rápida olhada no arquivo index.html e você pode ver que o código traz muita coisa do Boilerplate:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <title>Your website name</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="css/style.css?v=2">

  <script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>

<!-- Código da página exemplo do Initializr -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
  <script src="js/script.js"></script>
  <!--[if lt IE 7 ]>
  <script src="js/libs/dd_belatedpng.js"></script>
  <script> DD_belatedPNG.fix('img, .png_bg');</script>
  <![endif]-->
</body>
</html>

O arquivo style.css traz em torno de 200 linhas, os primeiros 3 quartos disso um CSS Reset. Se você estiver procurando onde colocar os seus estilos no meio desse código CSS, role o arquivo para baixo até você encontrar o seguinte comentário:

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

Por último, o arquivo script.js contém um simples teste para ver se a biblioteca JQuery está sendo carregada. Nesse arquivo você pode escrever seu código JavaScript.

TODO.txt

Um arquivo todo.txt também é incluído para te mostrar que tarefas você tem de fazer para começar seu projeto e como usar alguns truques de HTML5 presentes no Boilerplate. Por exemplo, você e lembrado para não esquecer de substituir a linguagem se sua página não estiver em inglês, ou para criar uma  página 404.html no seu arquivo se configuração do servidor para fazer um redirecionamento em erros 404.

Indo mais longe

A versão do Boilerplate que vem no Initializr é mais leve que a original. Se você precisa de um entendimento mais profundo do template ou de informações mais detalhadas de todos os arquivos, você pode ver a explicação oficial do Boilerplate em um vídeo feito por Paul Irish em inglês:

Eu também lhe convido a visitar o site oficial do Boilerplate, onde você vai encontrar algumas dicas para melhorar seu site , dicas de compatibilidade e performance.

Sexta pela manhã, foi minha primeira tarefa do dia. Achei que seria algo bobo. Realmente era, mas levei 4 horas para descobrir.

Comecei pelos arquivos de JavaScript vendo se estava tudo ok.
Os retornos via ajax do banco estavam ok.
Parti para os controllers que gravam a sessão no browser.
Comentei a biblioteca que faz verificação da sessão para deixar eu acessar livremente a aplicação. Dei um print no valor da sessão, que pelo codeIgniter se verifica assim:

//Não esqueça de chamar o helper session
// Login é o valor que eu estava gravando na sessão
print($this->session->userdata('login'));

// A tradicional global session não funcionará no codeIgniter
print($_SESSION['login']);

No Firefox tudo ok. No Internet Explorer em branco. Que beleza, o Internet Explorer não está deixando escrever na sessão…

Navegando pelo segundo cérebro não tive nenhuma resposta conclusiva. As soluções propostas não se encaixavam para mim. Atualizar versão do apache, tirar Underlines da url, tirar números do nome do servidor, nada disso fez sentido pra mim.

Sem idéias, me juntei ao meu amigo Ronie e ao Rafael que também faz parte da minha equipe nesse projeto para caçar uma solução.

Tiramos o redirecionamento do Login, para manter na mesma página. E demos ali também um print, dessa vez em todos os valores da sessão

//Print_r por se tratar de array
print_r($this->session->userdata);

Os valores estavam ali, o problema estava no redirecionamento então.

Quebramos a cabeça demais, e como antes estava funcionando no IE, resolvemos rever tudo de brusco que mudamos no sistema.
Verificamos rotas, Jquery e seus plugins, Verificações de nível de acesso, nada.
Até que me lembrei que havia mudado a configuração da sessão, para expirar em meia hora (1800 segundos) tirando do padrão de duas horas (7200 segundos) que vem no CodeIgniter. Esses valores são alterados no config.php, ali você dá de encontro com outras configurações para sua sessão, como nome dela e etc.

E, Sim, era isso. Voltamos ao default do codeIgniter e tudo voltou a funcionar. Me lembro de ter tido uns problemas similares trabalhando com PHP sem frameworks, mas nem suspeitava. Fomos testando para ver o mínimo que o IE iria aceitar de tempo de expiração. Chegamos no valor de 3835 segundos. Mesmo assim continuou muita instável, e setamos em 4000 segundos.

Problema resolvido após 4 horas de Prints, Alerts, Pesquisa, Palpites e Indignação…

Valeu..
Abraços !!!

Muitas vezes algumas coisas por serem tão naturais para nós, faz parecer que todo mundo conhece aquilo.

A maioria de programadores e desenvolvedores gostam de Firefox, fato!
Talvez em primeiro lugar para ir de encontro com a Microsoft. Segundo porque o Firefox geralmente obedece o que está no seu código, e terceiro, porque ele ajuda muito quando você tem umas ferramentas bacanas adicionadas a ele.

Para adionar complementos no seu firefox duas opções:
- Você pode ir no Menu: Ferramentas >> Complementos e procurar por ele na aba Adicionar.
- Ou ir direto no site de plugins da Mozilla, e baixá-los para sua máquina. Para posteriormente instalar as extensões que você baixou, vá no Menu: Arquivo>>Abrir Arquivo.

Eis alguns complemetos que uso:
WEB DEVELOPER

A web developer é uma barra de ferramentas com várias coisas que vão te auxiliar. Logo que você reinicia o firefox após instalar a extensão, ela vem aparecendo abaixo da barra de navegação. Existem muitas coisa legais na web developer onde só mexendo você vai descobrindo. Vou mostrar as que mais uso.

Cache - Quem nunca ficou de cara com o cache de browser e aquele alert ou print que não aparecia ? Pois é. Resolva esse problema indo em Disable >> Disable Cache.

CSS – Quer ver como a página que está visitando fica sem o css ? Vá na Aba CSS >> Disable Styles >> All Styles

IMAGES - Quer limpar as imagens do site ? Images>> Disable Images >> All Images
INFORMATION – Quer ver como está a divisão do site ? Information >> Display Block Size

São inúmeras coisas que você pode fazer, basta vasculhar a barra. Desabilitar javaScripts e MetaTags, Limpar os cookies ou todos os dados gravados, Manipular a dimensão do browser, Mostrar campos hidden de formulários, Validar css, Validar Html…

Enjoy Yourself…Have a fun….

Você pode desabilitar a barra caso queira indo no menu do firefox: Exibir >> Barra de ferramentas >> Web Developer >> ToolBar

FIREBUG

O firebug é uma ferramenta para facilitar o debug de scripts e códigos web em geral.
Após instalar essa extensão e reiniciar o seu Firefox, Você vê uma pequena barata no canto inferior direito, ao clicar nela um painel se abre.

Logo ao lado do ícone da barata no painel, você tem a ferramenta Inspecionar. Com ela você pode achar Objetos Html facilmente pelos sites.
Basta clicar em inspecionar e depois partir para cima do site. Experimente!

Abaixo, no console, geralmente aparecem os erros de javaScript, e você também pode ver algumas informações quando está trabalhando com ajax.
Veja abaixo um exemplo de retorno via ajax de uma consulta no banco aparecendo no console…

Na aba HTML, você pode editar o html e o css, fazendo assim uma prévia do que você precisa alterar nos seus arquivos para deixar as coisas como você quer.
No exemplo abaixo adicionei a cor vermelha no body do google pelo firebug.

O resultado

Descubra as maravilhas do Firebug, onde por exemplo, você pode ver um mapa completo dos elementos HTML para pegá-los via JavaScript na Aba DOM

Para finalizar duas extensões simples e fáceis de usar.

MEASURE IT

A measure It é uma régua, que ajuda quando você quer medir espaçamentos ou coisas do gênero.
Logo após instalar, ela aparece no canto inferior esquerdo. Basta Clicar e usar.

COLORZILLA

A colorzilla funciona meio que da mesma maneira. Ela serve para caçar o RGB ou o Hexadecimal daquelas cores que você gostou internet a fora.
Ela também aparece no canto inferior esquerdo após ser instalada.

Clique na ferramenta. Clica na cor que você quer. Depois selecione uma das opções no painel da ferramenta, clicando com o botão de opções do mouse (vulgo botão direito) no ícone dela.

DICA

Essas duas últimas extensões, a measure It e a ColorZilla, eu usei muito quando transformava PSD’s em HTML e CSS.
Eu exportava um arquivo JPG do Photoshop. Abria com o Firefox. E então media os containers e pegava as cores certinhas do Layout.

CONCLUSÃO
Esses são os Complementos do Firefox que mais uso para programar, debugar e desenvolver.
Claro, não listei aqui tudo que se pode fazer com elas, cabe a você ir experimentando e estudando.

Alguns outros Browsers também disponibilizam complementos, alguns que até são similares aos vistos aqui, dê uma pesquisada.

Hoje é isso.
Valeu !
Até mais !
Qualquer coisa estamos na área !