Inglês: Frequently Asked Questions

Português: Perguntas mais Frequentes

 


Curso completo e gratuito de HTML5, CSS3 e jQuery em vídeo aulas

Perguntas e respostas sobre o HTML5, CSS3 e jQuery em um curso completo e com acesso gratuito, mostrando passo a passo como criar um site em HTML 5 e CSS 3 do início ao fim.

Página Inicial / Grandes Resumos

O que vou encontrar nesta FAQ?

Um curso de HTML, CSS e jQuery, mostrando como criar um site do começo ao fim através do recurso de videoaulas explicativas e passo a passo.

Como e por que criar uma página modelo para o site?

O ideal é criar dois arquivos, sendo um deles em HTML que servirá de modelo para o site e o segundo em CSS que será usado como o arquivo padrão de formatação de todo o site.

No primeiro vídeo mostrei como criar uma página que servirá de modelo para a criação das demais páginas do site. Isto é importante para evitar retrabalho ou ter páginas com padrões diferentes, portanto focar seu trabalho na criação de um modelo será útil para você ganhar tempo durante o desenvolvimento e ainda manter um padrão aceitável no site todo.

No HTML:

A estrutura básica de uma página em HTML 5. Embora seja HTML o arquivo criado será em extensão PHP, pois precisaremos usar um recurso desta linguagem.

A div site que servirá de base para a criação de todo o conteúdo do site. Esta div será usada, por exemplo, para determinar a largura do site e o alinhamento dele também.

No CSS:

O CSS Reset que é uma técnica para neutralizar a formatação que muitas tags assumem por padrão e que os diferentes navegadores divergem na forma de usá-las. Desta forma, o melhor e zerar tudo e começar com a nossa própria formatação.

Formatação da tag body colocando uma imagem e cor de fundo da página e definindo a fonte padrão que será usada em todo o site, bem como o tamanho e cor da letra.

Faremos ainda a formatação da div site, colocando ele centralizado com uma técnica muito simples e finalmente criaremos a formatação dos links do site, definindo o comportamento padrão de os links e o evento hover que ocorre quando você passar o mouse sobre ele.

Como criar o topo do site?

No segundo vídeo, mostrei como criar o topo do site com uma imagem de fundo e um menu horizontal.

Como criar o menu vertical do site?

No próximo vídeo será mostrado coma fazer a criação do arquivo navegação.html que servirá para colocar o menu vertical do site com duas caixas adicionais, uma para abrigar um texto explicativo do site e outra para colocar o widget do Facebook com a lista de seguidores e opção de curtir a página.

Nesta página aprenderemos como usar o recurso de cantos arredondados do CSS 3 e como usá-lo corretamente para manter a compatibilidade com os diversos navegadores.

No HTML:

Será criado o arquivo navegação.html e assim como no topo ela será incluído no nosso modelo mostrado na videoaula 1;

Neste arquivo de navegação será criado o menu vertical ou lateral do site usando lista não ordenada, assim como já foi feito no topo;

Criaremos ainda um Box para a colocação de um texto sobre o site, por exemplo e também um widget do Facebook com a lista de seguidores da página nesta rede social.

No CSS:

Formatação da div navegação que é a principal deste arquivo e também do menu lateral;

Formatação do Box do site e ainda a aplicação de cantos arredondados com CSS 3, mostrando inclusive os cuidados que precisam ser tomados para que este recurso seja reconhecido em todos os navegadores.

Usaremos o conceito de classe em CSS e a sua aplicação no HTML.

Como fazer a formatação do Conteúdo e Rodapé?

Na video 4 aprenderemos a usar um conceito importante que é colocar duas divs lado a lado formando a ideia de colunas no site. Além disso criaremos a página rodapé e faremos a inclusão dela no modelo, assim como foi feito como o topo e menu lateral e mostrado nas videoaulas anteriores do nosso curso de HTML 5, CSS 3 e jQuery. Este último recurso será usado nas videoaulas futuras.

No HTML:

Voltando ao arquivo modelo, será criado a div conteúdo onde colocaremos nas páginas do site o conteúdo de cada uma delas.

Criaremos também o arquivo rodapé.html e nele quatro divs, sendo: rodape que é a principal, rodapeInterno que será usada para alinhamento, rodapeE e rodapeD que serão usadas para criar duas colunas. Na primeira coluna colocaremos o endereço da empresa e na segunda os botões das redes sociais.

Aplicaremos alguns ícones para as redes sociais baseados na fonte awesome que também já foi usada no topo e menu lateral do site.

No CSS:

Formatação da div conteúdo usando o conceito de float que permite colocar duas divs ou outras tags lado a lado. Entenda a importância da matemática para você conseguir um resultado preciso neste caso.

Formatação do rodapé e duas divs internas usando também o conceito de float e formatação os ícones das redes sociais.

Usaremos ainda a font awesome como já mostrado nas videoaulas anteriores para fazer o uso de ícones sem imagens e explorar este recurso do CSS 3

Como fazer a criação da Página Empresa do site?

Depois de criado a página modelo que servirá de base para a criação das demais páginas do site, nosso curso de HTML 5, CSS 3 e jquery entra na fase de produção das páginas internas. Começando com a página empresa.php que será composta de textos, imagens e listas não ordenadas. Faremos a formatação em CSS para melhor diagramação dos textos, imagens e listas usadas no HTML.

No HTML:

Será criado a página empresa.php e ela é baseada no modelo que foi criado nas primeiras videoaulas deste curso de HTMl 5, CSS 3 e também de jQuery. Nesta página teremos um texto com algumas imagens intercaladas e ainda a presença de algumas listas não ordenadas para especificar a missão, visão e valores da empresa.

Será aplicado no título da página ou na tag h1 um ícone da fonte awesome para ajusar a ilustrar melhor o conteúdo dela.

No CSS:

Importaremos uma nova fonte para ser usada nos títulos das páginas. Usaremos uma fonte do Google Fontes que é um diretório público de fontes que podem ser usadas através do recurso de import do CSS.

Será criado também a formatação das imagens que ficarão no meio do texto, permitindo que o texto contorne essas imagens e as mesmas possam ser alinhadas a direita ou a esquerda.

Faremos também a formatação da lista que está dentro do conteúdo. Aqui há um importante ponto a observar, visto que usamos listas no topo, no menu lateral e agora no meio do texto. Cada uma dessas listas precisa de uma formatação especial.

Será formatado ainda a tag p que é usada nos parágrafos de texto e sua correta formatação é importante para gerar um resultado mais agradável na visualização do mesmo.

Como criar a página de clientes?

No sexto vídeo veremos como aplicar a página modelo que foi criada nas aulas anteriores para dar continuidade a montagem das páginas internas do site. A primeira delas que fizemos foi a página empresa e agora criaremos a página para mostrar a listagem de clientes, com uma imagem padrão que pode ser usada para simbolizar o logotipo do cliente e um link apontado para o site da empresa dele.

No HTML:

Criaremos a página clientes baseada no modelo que foi feito nas primeiras aulas;

Neste arquivo criaremos uma tabela em HTML onde serão colocadas as imagens que saremos para representar os logotipos das empresas clientes. Cada imagem estará associada com um link externo;

Veremos ainda o uso do atributo ALT nas imagens e a importância deste recurso.

No CSS:

Será formatada a tabela para que ela possa ter a aparência correta para este tipo de exibição. Aprenda como formatar uma tabela e colocar bordas nela via CSS com extrema facilidade.

Como criar a página de serviços?

Na nossa sétima aula estudaremos como é feito a criação de uma página para representar os serviços da empresa. Para isso veremos os conceitos de divisão da página com subtítulos e listas em HTML para relacionar os serviços da empresa. Usaremos a fonte awesome através do CSS 3 para criarmos ícones ilustrativos que podem ser usados em HTML 5 e outras versões do HTML para melhor aparência visual da página.

No HTML:

Criaremos a página de serviços baseado no arquivo modelo que foi criado nas primeiras videoaulas;

Neste arquivo criaremos a página com textos, listas relacionando com os serviços que a empresa presta e a inclusão de ícones para ilustrar estes serviços.

Veremos como fazer a divisão dos serviços usando o conceito de subtítulos ou seções dentro da página. Este é um recurso importante em HTML.

No CSS:

A formatação da página de serviços incluindo a formatação do texto e dos subtítulos;

Criaremos uma formatação especial em CSS 3 para criar os ícones arredondados ou em formato de bola. Esta será certamente uma dica bastante útil e m pouco inovadora, utilizando o border-radius que permite múltiplos níveis de arredondamento de cantos de objetos HTML.

Como criar a página de portifólio ou galeria?

Nesta videoaula estudaremos um pouco sobre o jQuery através de um plugin para ampliar as imagens da galeria de fotos que usaremos como portfólio do site. A aula mostrará qual o plugin será usado, onde encontrá-lo e como integrá-lo com a nossa página, fazendo a ativação dele sob certas circunstâncias.

Aprenda como usar o jQuery a partir do site do Google sem a necessidade de fazer o download dele. Aprenda os conceitos básicos de javascript.

No HTML:

Criaremos a página de portifólio da empresa, sempre baseado no nosso modelo que criamos anteriormente;

Será criado nesta página uma galeria de imagens e para fazer o processo dinâmico de visualização das imagens, usaremos um plugin em jQuery que permite ampliar as imagens quando estas são clicadas;

Mostrarei qual é o plugin que usaremos e como integrá-lo com a nossa página, bem como linkar o arquivo do jQuery diretamente do Google, que é necessário neste caso;

Aprenderemos um pouco sobre o conceito de javascript que é a base para o jQuery.

No CSS:

Primeiro veremos como incluir o arquivo de CSS do plugin do jQuery;

Depois faremos a formatação da galeria que será usada como portifólio, formatando os links e as imagens da galeria. Estes últimos receberão bordas para permitir um efeito mais interessante nas imagens.

Como criar o mapa de localização usando o Google Maps?

Antigamente os mapas eram desenhados no Corel Draw ou outro software de edição vetorial para serem colocados nos sites para indicar ao visitante a correta localização da empresa, mas hoje contamos com recursos mais simples no sentido de inclusão e mais sofisticados no sentido de uso e informações que eles agregam às páginas. Veremos agora como usar o Google Maps para criar uma página com o mapa de localização da empresa e ainda o Google Street View que é o recurso de vista de rua que permite mostrar a fachada do imóvel, a rua e os arredores para melhor localização.

No HTML:

Criaremos a página localização em HTML para que seja incluído os recursos que virão do serviço de mapas do Google.

Localizaremos no Google maps um endereço e mostrei todos os passos necessários para encontrar a rua desejada, fazer a aproximação que melhor será visualizada pelo usuário, como personalizar o mapa para ser incorporado e finalmente como gerar o código HTML que será incorporado à nossa página.

Depois faremos a mesma coisa com o Street View que nos permitirá incluir o serviço de vista de rua do Google no site.

Lembrando que esses recursos não são necessariamente de HTML 5, pois usam a tag iframe que já era usada mesmo em versões anteriores do HTML.No CSS:Não faremos nenhuma formatação especial para esta página, exceto ao que já foi formatado em outras páginas do site.

Como criar o formulário de contato com PHP e Ajax?

Aprenderemos nesta aula do curso de HTML 5, CSS 3 e jQuery, como criar o formulário de contato do site. Nesta página usamos recursos de HTML,CSS, jQuery e ainda de PHP para fazer o envio dos dados do formulário para o e-mail do cliente.

No HTML:

Criaremos a página contato que terá um formulário com os campos em HTML. Veremos como fazer caixa de múltipla escolha e escolha única, caixa de seleção e campo para publicação de textos mais extensos. Aprenderemos ainda como usar a tag de formulário de maneira adequada e o significado dos atributos dela.

No CSS:

Formataremos as classes campo, combo e botão que serão aplicadas às tags do formulário para a melhor visualização dos dados.

No PHP:

Esta página terá uma novidade que é a inclusão do código em PHP pata envio do formulário de contato, uma vez que o HTML 5 ou qualquer outra versão não faz este tipo de envio. Mostrei o código completo usando a função mail() do PHP que enviará os dados do formulário para o email do cliente.

No jQuery:

Em jQuery veremos como fazer uma chamada usando o método Ajax que permitirá fazer a validação e o envio dos dados do formulário de forma assíncrona, isto é, sem recarregar a página. É um conceito bastante usado nos dias atuais para deixar os processos internos da página menos evidentes para os usuários.

Como criar a página de Perguntas Frequentes?

Neste vídeo veremos como criar uma página perguntas e respostas mais frequentes. Esse tipo de página bastante comum para sites que oferece algum tipo de serviço ou queria explicar algum processo quer seja do site, do produto ou serviço que oferece. Geralmente são relacionadas diversas perguntas com respostas curtas e diretas sobre aquele assunto, como a tendência nesse caso é de a página ficar muito extensa, o comum é criar um sistema que permite ir mostrando as perguntas com as respostas na medida em que o usuário clica nela.

No HTML:

Criaremos a página FAQ – Perguntas e respostas frequentes onde será inserido o conteúdo da página;

Incluiremos o conteúdo necessário, aplicando as tags de HTML para o correto funcionamento dos recursos em jQuery que virão depois

No CSS:

Usaremos o arquivo de formatação em CSS do próprio plugin do jQuery.

No jQuery:

Usaremos os recursos jQuery Accordion que é uma espécie de plugin que permite a navegação entre as perguntas criando um efeito animado;

Mostrarei qual código deve ser importado para seu site a fim de que funcione como no exemplo original.

Como criar a página home ou index do site?

Na última videoaula iremos aprender como montar a página inicial do site ou a página home. Nesta página criaremos um banner rotativo o banner slider como é mais conhecido e como novidade não usaremos nenhum plugin do jQuery mas criaremos todos código necessário para incluir imagens de fazer o processo de transição.

No HTML:

Criaremos a página home do site com o nome índex.php, a escolha deste nome não é por acaso, afinal o nome índex é reconhecido automaticamente pelos servidores como sendo a página inicial do site.

Em seguida iremos criar a parte de HTML do banner slider que criaremos nesta página home e serão incluído as imagens do banner.

Criaremos também as chamadas para as páginas internas do site.

No CSS:

Formataremos as divs das imagens e dos botões que farão parte da visualização e controle de exibição.

Formataremos as divs que servirão para mostrar o resumo das páginas internas.

No jQuery:

Importaremos o jQuery do site do Google como já foi feito em outras videoaulas do curso.

Criaremos o código em jQuery que fará a transição dos slides sempre que o botão for clicado.


 
 

Veja também

 


© 2017   |   FAQ: Perguntas e Respostas Frequentes