Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Template HTML5 | Initializr – Inicie um Projeto HTML5 em segundos | SW9

Template HTML5 | Initializr – Inicie um Projeto HTML5 em segundos | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)

Daremos início a uma MEGA Série para falar sobre HTML5.  O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.

Para esta MEGA Série, vou precisar do apoio de vocês.  A ideia é avançar na série com base na audiência, curtidas e compartilhamentos de vocês.  Vocês serão o meu termômetro para determinar se prossigo com a série ou direciono os meus esforços para outros temas.  Afinal de contas, este blog e canal foram construídos para o meu público e a comunidade de desenvolvedores que cresce a cada dia.

O que veremos?

Para iniciar a nossa série, em primeiro lugar vamos precisar criar o nosso projeto. Usaremos um projeto padrão HTML5.  Com o projeto criado, teremos condições de, nos próximos posts/vídeos, incluir os recursos que serão apresentados daqui para frente.  Como resultado final, ao término da série teremos um único projeto com todos os recursos implementados durante a série.

Bom, esclarecido este ponto, vou mostrar hoje como criaremos o nosso projeto padrão HTML5.  Para atingirmos o nosso objetivo utilizaremos a ferramenta chamada INITIALIZR.

Neste vídeo eu vou mostrar passo a passo como usar o INITIALIZR, gerar o código fonte, mostrar a estrutura de diretórios e o objetivo de cada parte do projeto (template padrão).

INITIALIZR? Para que Serve?

INITIALIZR é uma ferramenta de geração de template seguindo os padrões HTML5.  Com esta ferramenta será possível criar o nosso projeto padrão em poucos segundos, e o melhor, contendo todos os recursos necessários sem precisarmos reinventar a roda.

Parte da base do INITIALIZR foi construída usando o projeto chamado HTML5 BOILERPLATE. Mas a ferramenta vai mais além, a partir dela conseguimos gerar um template escolhendo entre [Classic H5PB], [Responsive] e [Bootstrap].

Mas o que seria o Boilerplate? Qual a diferença entre Template e Boilerplate?

Boilerplates são similares aos templates, porém um pouco mais úteis.  O projeto gerado contém muito mais do que um simples layout. Um Boilerplate em HTML representa um conjunto de arquivos para download, fornecendo o essencial para qualquer projeto HTML5 que você deseja criar.

Benefícios

Como o INITIALIZR foi construído com base no HTML5 BOILERPLTE (que conta com a participação de uma comunidade de desenvolvedores experientes no projeto), você pode tranquilamente usar o código gerado como base para os seus projetos.  Isso vai acelerar as coisas e garantir que o básico do seu site seja sólido e padronizado.

Outras Alternativas

Apesar do próprio site http://www.initializr.com informar que a ferramenta está em processo de descontinuação, muita gente ainda a utiliza. Justamente por este motivo irei utilizá-la para gerar o nosso projeto padrão (contendo o essencial para avançarmos em nossa série).  Vale destacar que além do INITIALIZR, existem outras alternativas disponíveis e, com certeza, vale a pena destacá-las.  São elas:

1- O próprio HTML5 Boilerplate

2- Web Starter Kit

3- Skeleton

Obs: Os links estão disponíveis no final do Post

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

No Post de hoje, demos início na Mega série sobre HTML 5.  Conforme comentei, conto com o apoio de vocês, já que a continuidade da série depende da audiência, compartilhamentos e engajamento do meu público. Neste primeiro Post, vimos uma ferramenta para geração de template HTML 5 chamada INITIALIZR.  A partir desta ferramenta, foi possível gerar o nosso projeto padrão que usaremos ao longo da série.

Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.  Dentro da minha área de Downloads, procure pela pasta HTML5.  O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

INITIALIZRhttp://www.initializr.com/

HTML5 Boilerplate: https://html5boilerplate.com/

Web starter Kit: https://developers.google.com/web/starter-kit/

Skeleton: http://getskeleton.com/

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

Link do vídeo: https://youtu.be/6q-BqAE3Sqk

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?