Curso de Web Design | Como Criar uma Tabela Dinâmica: Html5, Css3 e Javascript

Web Design

Nas últimas postagens mostrei como criar uma tabela dinâmica com html5, css3 e javascript começando-a do zero tendo como base uma ilustração feita num software de desenho vetorial.

E, aqui neste artigo estarei deixando os vídeos das 3 aulas, as quais estão mais abaixo, aonde mostro o passo a passo para a construção da tabela dinâmica e estarei abordando outros pontos os quais não falei nos artigos anteriores.

Vou aproveitar também, e deixarei listado aqui o link para os outros 3 artigos, pois dei explicações importantes neles, as quais te ajudarão na compreensão do contexto do projeto.

• Como criar uma Tabela Dinâmica – Parte 01 - O Html5
• Como criar uma Tabela Dinâmica – Parte 02 - O Css3
• Como criar uma Tabela Dinâmica – Parte 03 - O Javascript

O que é Código Estático e o que é Código Dinâmico?

Para começar o ensino aqui, falarei primeiro sobre a questão do estático e do dinâmico. Mas o que seria isso propriamente?

Quando trabalhamos com o desenvolvimento de sites, de programas acabamos por ver duas palavras: estático e dinâmico.

Para nós da área de TI (tecnologia da informação) essas palavras geralmente referem-se, ao fato do conteúdo ser inserido direto no código ou não.

Exemplo, ao criar uma página html, o programador, o webdesigner insere todo o texto ali direto no código html, e com isso cria-se uma página estática.

Estática? Sim, dizemos que é uma página estática, pois, caso os desenvolvedor deseje alterar o código dela terá que abrir o arquivo e mudar manualmente o seu conteúdo.

Mas, se ao invés de criar uma página html, o webdesigner criar uma página php, por exemplo, estará caminhando para a criação de um conteúdo dinâmico.

Sendo o html é uma linguagem apenas de marcação de conteúdo, lembra “HyperText Markup Language” (linguagem de marcação de hipertexto), não se consegue usando só este criar conteúdos dinâmico, é preciso usar linguagens mais robustas.

E, neste exemplo, o php se encaixa bem, já é uma linguagem de programação robusta, o qual te permite, por exemplo, conectar com um banco de dados e obter todas as informações pertinentes ao conteúdo que deseja-se inserir na página e assim trazer de maneira automática esta informação para a mesma. E, é aqui que surge o dinamismo.

A partir do momento que, o webdesigner fica isento de estar inserindo conteúdo nos arquivos para que o site tenha mais informação, aí surge o dinâmico. Pois, agora o responsável por inserir conteúdo na página é a própria linguagem de programação e não mais uma pessoa.

Aqui neste artigo e nos vídeos, não veremos php e nem banco de dados (mysql), contudo com javascript já conseguiremos criar nossa tabela dinâmica.

Caso deseje aprender php te convido a ver o meu curso de webdesign aonde você aprenderá html5, css3, javascript, php e mysql. Clique e Veja o Cronograma das Aulas!

Qual a Diferença entre uma Tabela “Estática” e uma Tabela “Dinâmica”?

Ao criar uma tabela usando apenas html5 estaríamos criando algo estático, pois a cada modificação será necessário que, o webdesigner, desenvolvedor do site abra o arquivo html e altere o conteúdo.

Qual o problema em ter arquivos estáticos? O problema em si não é grave, mas imaginemos que sua equipe é você (programador web) e mais duas pessoas que conhecem o básico de informática.

O que aconteceria caso fosse preciso acrescentar mais 1 único item a tabela e você, por um motivo qualquer, não o pudesse fazê-lo?

Provavelmente, não aconteceria nada, pois os outros dois membros da equipe não fariam esta modificaçao, seja por receio ou por falta de conhecimento.

Afinal, para quem nunca mexeu com sites, com programação, até um simples arquivo html assusta.

Mas, imaginemos, que todo o conteúdo estive no formato de um array js, como o abaixo, provavelmente, só com uso do pensamento lógico, e talvez, com uma simples explicação, qualquer pessoa com conhecimento básico de informática conseguiria mexer certo?

let dadosProdutos = [
    ['maçã', '1.85'],
    ['pêra', '2.30'],
    ['abacaxi', '3.70']
];

Todavia, o foco aqui, não é dar “poderes” aos membros da equipe sem conhecimento de criação de site, e sim, mostrar que você pode usar o javascript para criar, inserir elemento no dom (document object model) quando e aonde precisar.

No exemplo acima falei de um arquivo com um array, mas você poderia ter um arquivo xml ou json envolvido neste processo, o qual pode ser gerado pelo sistema de controle de estoque da empresa, que pode ter sido feito em java, c, c++, c#, delphi etc.

O que é Document Object Model (Dom) e para que serve?

Dom é a sigla de document object model, ou seja, modelo do objeto documento, o qual é uma “árvore” cheia de nós (nodes) que compõe a página html.

Muita Calma, relaxa, bastante tranquilidade, pois farei uma breve explicação para que você possa entender melhor.

Não estarei entrando no mérito da programação orientada a objetos, mas, quando o navegador processa a página html, ele lê toda as informações e monta um objeto modelo para o documento (“arquivo”, “página”) o qual lhe permitirá obter, manipular, tratar as informações relacionadas a este.

E, ao fazer isso, ele cria um objeto que permite ao navegador e nós webdesigners trabalharmos com as informações e estrutura da página via programação. O que é muito legal!

Através do nosso acesso ao objeto document que está agregado ao objeto window, podemos inserir novos elementos (tags) na página, podemos remover os já existentes, podemos alterar valores já definidos e na aula de javascript mostro como isso funciona e é fácil de se fazer.

Bom, já falei bastante, vamos ao conteúdo das aulas, abaixo você verá o exercício dividido em 3 aulas, uma mostrando como criar a estrutura html5, a outra ensinando como criar estilos css, e na seqüência como programar com javascript para criar o efeito dinâmico.

Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 01 – O Html5

Para começar, aqui nesta primeira aula estarei mostrando uma solução, um caminho para se criar a estrutura html da tabela usando como referência a estrutura definida no programa de ilustração vetorial.

Aqui estou mostrando com div, porém, você poderia usar section ou article para ser o elemento container, lembrando que, será a tag table que definirá os limites da tabela.

Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 02 – O Css3

Uma vez já criada a estrutura html, agora criaremos os estilos css3, pois será com eles que daremos o visual desejado a tabela.

Algo a se considerar aqui é, caso opte por montar o estilos do seu jeito é que, o arquivo css3 deve ter coerência, leveza e ausência de redundância. Como assim?

É normal, no começo querermos definir todos os atributos css e nisso o código acaba ficando muito poluído, cheio de coisas que não eram necessárias, por isso, peço-lhe que preste bastante atenção ao criar os seus estilos.

Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 03 – O Javascript

Por fim, para encerrar este assunto, mostro como você popula (insere) conteúdo na tabela de forma dinâmica usando o javascript neste processo através da manipulação do dom.

Neste vídeo você verá como é simples usar o javascript para criar tags html. Tanto que, olhando para o código final dá para pensar “como pode ser tão simples?”. Mas, programação é isso!

Quando você estiver criando os seus próprios códigos lembre-se “se o código estiver complicado, com legibilidade deficitária será que você está fazendo do melhor jeito?”. Fica aqui esta dica.

Abaixo estou deixando o formulário para download dos arquivos utilizados na aula, por isso, baixe-os, pois através deles você poderá analisar o seu código com o meu para ver o que está certo e o que não está funcionando.

Quer Baixar os Arquivos Html5, Css3 e Javascript da Aula?

Para baixar os arquivos html, css e js criados na aula, basta digitar o teu email no campo abaixo e clicar no botão.

Javascript, Google e Pagerank: Código dinâmico nos buscadores!

Usar javascript para criar conteúdo dinâmico é algo que deve ser bem pensado, pois, enquanto dentro de um aplicativo web, isto provavelmente só teria ganhos, dentro de um site instituicional, de um blog ou de uma loja virtual, isso já não seria verdade plena.

Ao usar js para inserir conteúdo na página, o fazemos, geralmente, após o parse da página já ter ocorrido, sendo assim, esta informação na estará presente no arquivo html e nem no parse da página web.

E nisso, certamente, só o usuário final, o que abrirá a página no navegador verá aquela informação. Então, pergunto a você, e como fica o motores de busca?

Como você já deve imaginar, os buscadores (google, bing, yahoo etc) ficarão a ver navio, ou seja, esta informação não te ajudará no pagerank (posicionamento), resumindo menos tráfego orgânico, triste não?

Por que usar Javascript para Ter Conteúdo Dinâmico nas Páginas Web? Porque Ele Aumenta o Pagerank!

Primeiro você fala que perde ranqueamento e agora fala que ganha, decidi-se!

Calma, já vou explicar, então leia com atenção, pois aqui está o pulo do gato!

Antes de criticar e falar “nunca mais uso javascript”, devemos lembrar que, podemos usar o js para trabalhar com as informações que não precisam ser ranqueadas ou que não queremos que sejam posicionadas no buscador.

Por exemplo, os anúncios de um parceiro (vídeo, texto, imagem), o aplicativo gerador de mapas, os botões das redes sociais, formulários (cadastro, orçamento etc), entre outras informações.

Ou seja, em vez de você deixar seu arquivo html pesado no lado do peso em bytes e do carregamento com tudo isso, você pode usar o javascript para carregar todas estas informações num outro momento, o que fará o arquivo ficar mais leve, processando mais rápido na análise dos buscadores, e por fim melhorando o seu pagerank!

Por isso, lembre-se, enquanto o carregamento assíncrono contribui pouco, ou quase nada quando o assunto é conteúdo posicionado no buscador, o aumento, o ganho na velocidade de carregamento da página só tem agregar.

Páginas leves carregam mais rápido o que agrada os buscadores e os leitores do site.

Aqui ressalto algo dito pela Amazon, empresa de comércio de eletrônico, “para cada 100ms (milésimos de segundo) que o site deles fica mais rápido as vendas aumentam em 1%”.

Pois é, 1%, pode não parecer muito a princípio para você, mas já pensou como o seu patrão ficará feliz em vender 1% a mais só porque o site dele ficou leve e rápido?

Dúvidas e Sugestões? Entre em contato!

Vou encerrar aqui, já escrevi bastante, e espero ter ao menos te agradado, e caso tenha alguma dúvida pode entrar em contato pelo chat, pela página de contato ou pelos comentários abaixo. Abraços, e até o próximo artigo!

Quer Ser um Desenvolvedor Front-End e Back-End?

Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 31 Horas de Aulas em Vídeo e mais de 100 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!