Estilizando nossa página com CSS 3 – Parte 1

Fala pessoal, tudo certo?

No último post terminamos de realizar a marcação da nossa página e como venho comentando nos posts o HTML5 passou a dar preferência apenas para a marcação do site, deixando a parte de estilização para o CSS.

“Mas o que é CSS?”

Para quem ainda não conhece o CSS ou Cascade Style Sheet (traduzindo para o português fica Folha de Estilo em Cascata), é um mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web.

Agora que sabemos o que é, vamos falar um pouco de como incluir CSS em nossa página.

Existem basicamente três formas de fazer isso: inline, em bloco ou em arquivo.

Vamos começar pelo CSS inline:

Neste exemplo criamos um parágrafo com o texto “Olá Mundo”, com fundo preto (background-color: black) e texto branco (color: white), desta forma:

Agora vamos fazer o mesmo exemplo, utilizando o css em bloco:

Na linha 1 temos o nosso parágrafo somente com o texto. Da linha 2 até a linha 7 temos o bloco de CSS, definido através da tag <style>. Entre as tags, temos o p, que nada mais é do que um seletor, que determina que todos os parágrafos da nossa página (tag <p>) devem ter o estilo definido dentro das chaves.

Por último temos a utilização através de um arquivo de folha de estilo, chamado de estilo.css.

Na página HTML temos a seguinte marcação:

E no arquivo estilo.css, basta incluir o que estava entre as tags <style> da nossa página HTML.

Consegui uma parceria com a DankiCode e consegui vários curso com preços especiais. Um deles é o curso WebMaster Front-End Completo, que é um dos melhores cursos pra você que deseja se especializar em desenvolvimento de páginas web.

Além de ser um curso bastante completo, você também leva 30 dias de garantia, onde você pode solicitar o seu dinheiro de volta à qualquer momento, que será prontamente devolvido sem nenhum questionamento por parte da empresa.

Clique aqui e garanta já sua inscrição no curso, com acesso vitalício de qualquer dispositivo.

Espero que tenha gostado deste pequeno artigo.

Nos vemos em breve!

Forte abraço e bons estudos.

Novas tags do HTML5 – Parte 2

Continuando o post anterior, fiz a marcação da página utilizando algumas das novas tags do HTML5.

Como pode observar, a marcação continua sendo feita normalmente como na versão anterior, porém, as tags novas agora tem uma missão bem semântica, pois há uma indicação via tags de cada parte do site. Utilizei exatamente as mesmas tags do esboço feito post anterior, incluindo além disso um pouco de texto para o menu superior e links do menu lateral, bem como textos de exemplo para posts da página.

Observe a seguir o resultado final da marcação da nossa página:

Observe na imagem a seguir, eu destaquei a tag <meta name=”viewport”>, que deve ser incluída no nosso site para que possamos trabalhar com corretamente design responsivo. Nela definimos que a largura da página será a largura do dispositivo e a escala inicial será de 1 para 1, conforme podemos ler no atributo “content”:

Continuando a página, dentro da tag <body>, eu comecei fazendo a marcação do cabeçalho da página, através da tag <header>. Dentro dela foi incluída uma tag <nav> para identificar um menu de navegação do nosso site.

Eu costumo marcar uma página sempre de cima para baixo, da esquerda para a direita. Por isso, logo abaixo da tag <header> eu começo criando a o menu lateral utilizando a tag <aside>. Dentro dela, eu incluí uma lista que irá representar um menu lateral, onde podemos colocar links para outros artigos ou outras páginas de temas ou categorias do site.

Em seguida, temos a tag <main>, onde eu coloco o conteúdo principal do site e dentro dela eu exemplifiquei colocando vários formatos da tag <section>. Podemos observar que é possível utilizá-la com ou sem as tags <header> e <footer>, ou seja, estas tags podem definir tanto o cabeçalho/rodapé da página, como o cabeçalho/rodapé de um post no site.

Ao final eu encerro a marcação com a tag <footer>, onde defino o rodapé da minha página.

A seguir podemos observar o resultado final da marcação realizada:

Podemos visualizar que a nossa página HTML ainda não possui o formato que definimos no esboço, apesar de ter sido codificada para tal. Isso acontece pois, como já foi dito antes, as novas tags são apenas semânticas, ou seja, servem apenas para facilitar os motores de busca na hora de pesquisar palavras chaves no seu site, identificar quais a sessões e quais os links navegáveis dentro dele.

A parte visual do nosso site só foi modificada em algumas tags, como a tag <ul>, utilizada para a criação de listas de links do nosso menu superior e menu lateral. Ela alterou o visual incluindo um marcador no texto (bullet), definindo em forma de lista de tópicos. Ainda nesta lista, utilizei a tag <a> que serve para incluir links em nosso site. Esta tag altera a formatação do texto incluindo um sublinhado abaixo dos links.

Outras tags que alteram o visual do site são <h1> e <h2>, que servem para definir títulos (ou cabeçalhos) e subtítulos. Além deles, temos ainda <h3>, <h4>, <h5> e <h6>, onde o <h1> é com a maior fonte e <h6> a menor fonte.

Bom, podemos concluir que neste caso específico o HTML 5 não trouxe nenhuma novidade visual, porém, trouxe algumas melhorias no que diz respeito à formulários, pois foram introduzidos alguns tipos de componentes diferentes e muito fáceis de utilizar, como o campo de data, o campo de cor, o campo de texto com lista suspensa, entre outros. Foram incluídos ainda as tags <audio> e <video>, que facilitaram bastante a inclusão de músicas e vídeos em nossos websites. 

Para deixar nosso site parecido com o esboço, vamos utilizar o CSS (Cascading Style Sheets, ou folha de estilo em cascatas). A partir de algumas mudanças no HTML 5, tornou-se uma boa prática utilizar apenas o CSS para definir o layout do site, ou seja, não é recomendado utilizar atributos de tags para formatar texto ou definir os tamanhos de componentes na tela. Deste modo, o HTML do seu site fica mais limpo e mais fácil de ser interpretado pelos motores de sites de busca. Além disso, facilita na separação de contextos, onde sua página HTML é a casca responsável por mostrar o conteúdo “cru” do seu site e a folha de estilo (CSS), responsável por formatar este conteúdo para melhor apresentá-lo ao usuário.

Para entender melhor e ter acesso à um curso completo de Front-End (HTML, CSS e JavaScript), bem como aulas de web-design e design responsivo e muito mais, eu indico pra vocês o curso Desenvolvedor FullStack do meu amigo Guilherme Grillo, por ser o curso mais completo do mercado de software do brasil.

Aproveite agora que ele está com um preço muito atraente para novos alunos e além disso ele dá uma garantia de incríveis 30 dias. Caso não goste do curso ou não encontre o que estava procurando, você poderá pedir seu dinheiro de volta, que será prontamente atendido sem nenhum questionamento. 

Clique aqui e garanta já o sua inscrição neste excelente curso.

Novas tags do HTML5 – Parte 1

Olá pessoal, tudo certo com vocês?

Como prometido no último artigo, começaremos agora o desenvolvimento de uma página simples, utilizando algumas das novas tags introduzidas no HTML5 para que possamos nos familiarizar com a linguagem.

Para iniciar um site, eu costumo fazer um pequeno esboço de como serão divididas as sessões da página. Para isso eu utilizo qualquer editor de imagens. Se você tiver utilizando qualquer versão do Windows, você pode fazer utilizando o Paint. Caso esteja usando alguma distribuição Linux, indico utilizar o Gimp. Este editor é muito mais poderoso que o Paint e além de ser um software livre, você também pode utilizá-lo no Windows.

A seguir seguem dois exemplos de esboço:

Como podemos observar, os exemplos acima são apenas esboços mesmo, como forma de facilitar a codificação eu já inclui as tags que vou utilizar em cada parte da página.

A partir do próximo artigo iremos começar codificar os dois modelos, porém incluindo algumas imagens e textos para melhorar a experiência no desenvolvimento da página.

Caso queira um curso completo para se tornar um desenvolvedor Full Stack, com mais de 80 projetos práticos e mais de 1000 aulas gravadas e constantemente atualizadas, que inclusive tem um módulo específico que trata sobre o HTML5, basta clicar aqui e adquiri-lo por um excelente preço promocional, que estará disponível por pouco tempo. 

Abraços e até a próxima.

A linguagem de marcação HTML

Neste artigo gostaria de falar um pouco sobre 

Podemos dizer que o desenvolvimento web pode ser realizado com qualquer editor de texto simples, como o próprio bloco de notas do Windows, pois a linguagem de marcação HTML é um formada por tags, onde cada um tem sua função específica e não há necessidade de realizar o processo de “compilação”, como acontece em linguagens de programação como .NET, JAVA, Visual Basic, Pascal, etc. 

O HTML é uma linguagem que é interpretada pelo navegador web, como o Chrome, o Firefox ou o mais odiado deles, o Internet Explorer. A partir da sua versão 5, o HTML melhorou tags antigas e incluiu algumas novas tags e começou propor uma forma diferente de trabalho, focando mais na semântica, focando mais na marcação do texto do que na determinação de formatação.

Neste sentido, após a marcação das nossas páginas, devemos priorizar o uso do CSS para definição do layout dos componentes e textos do nosso site ou sistema.

Existem no bibliotecas gratuitas que facilitam a estilização de um site, sendo o mais conhecido o framework criado pelo twitter, o Bootstrap. Com ele teremos à nossa mão, vários componentes e estilos para facilitar o desenvolvimento de sistemas web e também de web sites. Futuramente irei escrever um artigo mostrando algumas das suas funcionalidades.

Outro framework que tem crescido bastante é o bulma, que tem como proposta melhorar e facilitar a estilização de site, concorrente com o Bootstrap. Na data que escrevo este artigo, ele está na versão 0.7 e possui, assim como o Bootstrap, vários componentes e estilos pré-definidos e de fácil utilização.

Voltando ao assunto inicial, gostaria apresentar pra vocês as novas tags criadas para melhorar a semântica de marcação de páginas HTML5.

TagDescrição
<article>Define um artigo dentro do documento.
<aside>Define um conteúdo lateral para o conteúdo da página.
<bdi>Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele.
<details>Define detalhes adicionais que o usuário pode ou não visualizar.
<dialog>Define uma caixa de diálogo ou janela.
<figcaption>Define um texto para o elemento <figure>
<figure>Define um contexto de imagem dentro do documento.
<footer>Define o rodapé do documento ou da sessão.
<header>Define o cabeçalho do documento ou da sessão.
<main>Define o conteúdo principal do documento.
<mark>Define um texto marcado.
<meter>Define uma medida escalar dentro de um intervalo conhecido (um medidor).
<nav>Define a navegação de links do site.
<progress>Representa o progresso de uma tarefa.
<rp>Define o que mostrar em navegadores que não suportam anotações em ruby.
<rt>Define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)
<ruby>Define uma anotação rubi (para tipografia do leste asiático).
<section>Define uma sessão no documento.
<summary>Define um título visível para um elemento <details>
<time>Define uma data/hora.
<wbr>Defines a possible line-break

Fonte: https://www.w3schools.com/html/html5_new_elements.asp

Apesar de terem introduzido novas tags, é importante salientar que, como foi digo antes, no HTML5 devemos priorizar apenas a semântica da marcação de documentos, portanto, nenhuma das novas tags possuem qualquer tipo de formatação, sendo esta parte feita através do CSS.

No próximo artigo da série, vamos falar um pouco mais sobre estas novas tags e criar um pequeno site ilustrando algumas destas novas tags.

Um forte abraço e até breve!

Por onde começar

Uma pergunta recorrente feita por quem deseja aprender a desenvolver sistemas é:

“Por onde eu devo começar?”

Essa pergunta é feita por todos que tem o desejo de aprender a desenvolver software, principalmente quem nunca fez um curso na área ou que deseja aprender a programar sozinho.

Eu já vi alguns casos de pessoas que aprenderam sozinhos a programar, pesquisando na internet e fazendo acontecer.

Inicialmente, para você aprender a desenvolver software, costumo dizer que você precisa ser uma pessoa bastante curiosa, visto que com o tempo e a experiência, sua caminhada vai se tornando mais suave e você irá perceber que a curiosidade será sua aliada e após dominar a primeira linguagem de programação você verá que aprender qualquer outra tecnologia será bem mais fácil, pois seu cérebro estará pronto e programado para entender a tão famosa lógica de programação.

Existe um e-book que eu li e recomendo muito, escrito pelo desenvolvedor Guilherme Cherem Grillo, lista passo-a-passo o que você precisa fazer para se tornar um desenvolvedor.

Clique aqui para baixar o e-book.

Esse e-book é um guia completo para quem deseja se tornar um desenvolvedor de software Full-Stack.

Aí você me pergunta:

O que é ser um desenvolvedor Full-Stack?

Este termo é muito conhecido pela comunidade e significa que ao se tornar um desenvolvedor Full-Stack indica que você domina tanto as tecnologias de Front-End (Interface com o usuário – lado do cliente), quanto as tecnologias de Back-End (linguagem de programação – do lado do servidor).

Um forte abraço e nos vemos em breve.