O documento fornece uma introdução sobre web designers e conceitos relacionados ao desenvolvimento front-end de páginas da web. Explica o que é um web designer, front-end, back-end e ferramentas como HTML5, CSS3, jQuery, PHP, Bootstrap e CMS. Também discute como hospedar um site na internet e terminações de domínio comuns.

1. www.profroneysousa.blogspot.com.br
WEB DESIGNER
Introdução ao conteúdo • software • codigos

2. O que é um WEB DESIGNER
• O web designer é o profissional que desenvolve front-end de páginas
web.
• É o responsável pela beleza, harmonia, suavidade, diagramação, entre
outros artigos gráficos disponíveis.

3. O que é Front-end?
• Em programação existem dois termos principais, BACK-END e FRONT-
END.
• Front-END, é o visual enxergado pelos usuários e clientes, ou seja a
frente do site, é a parte de aparência do site.
• O BACK-END, é o código desenvolvido pelo programador para o site
ter uma função, fazer alguma coisa, é a parte pensante do site.

4. O que vamos aprender?
• Hospedagem de site
• HTML 5
• CSS 3
• Jquery
• PHP programado (Introdução)

5. Como ter o site na internet
• Para ter um site na internet, On-line, precisamos ter um Domínio, e
um servidor de hospedagem(HOST).
• Domínio é o endereço do site:
• www.domínio.com.br
• O WWW. Quer dizer WORD WIDE WEB, Rede de alcance mundial.
• O domínio é o nome do site.
• Domínio não pode conter acentos ou caracteres especiais.
• Existem alguns domínios especiais como o, .gov, .edu, .mil, que são
para sites governamentais, esses domínios não podem ser comprados
por qualquer pessoa.

6. Terminações
TERMINAÇÃO ENTIDADE
.AERO EMPRESA DE TRANSPORTE AERO
.BIZ BUSINESS NEGOCIO
.COM COMERCIAL, COMUNICAÇÃO
.EDU EDUCAÇÃO
.GOV GOVERNAMENTAL
.INFO INFORMAÇÃO
.JUS PODER JUDICIARIO
.MIL FORÇAS ARMADAS
.NET PROVEDOR DE INTERNET
.ORG ORGANIZAÇÃO SEM FINS LUCRATIVOS

7. HOST - HOSPEDAGEM
• A hospedagem é o local onde seu site fica hospedado.
Kkkk.
• É um espaço em um disco rígido de um computador
alugado ou comprado por você para armazena todos os
arquivos/dados do seu site.
• Muitas empresas alugam esses espaços, mas temos que
tomar cuidado e procurar com cuidado.
• Siga o link abaixo desse slide, ele te levara para um dos
melhores sites de hospedagens.

8. HTML 5
• O HTML não é linguagem de programação e sim uma linguagem
de marcação de hipertexto.
• Ou seja, o HTML é composto por TAG, que indicam Início e fim
de uma área onde vamos marcar alguma coisa..
• Por exemplo, na versão 5, existe uma tag para marcar a cabeça
do site, chama-se HEAD, existe uma para marcar o corpo
chamada BODY. Entre outras que vamos aprender.
• O HTML já foi uma linguagem para marcação e formatação, mas
isso hoje em dia não existe mais, agora usamos um folha de
estilos.

9. CSS
• O CSS, ou Cascade Style Sheet, ou folha de estilho em cascata, ou
ainda folha de estilho, serve para estilizar o código HTML.
• Com a invenção do CSS ficou muito mais leve e fácil criar o seu site,
pois o CSS usa um documento separado para estilizar ou formatar
seu site.
• Ou seja, o documento de marcação informando onde vai ficar cada
coisa fica em um documento, e as cores, fonte, dimensões, ficam
em outro documento.
• No CSS 3 além de formatar, também aplica-se alguns “Especiais”.
• Também é com o CSS3 que fazemos os sites RESPONSIVOS, sites
que adaptam a qualquer dispositivos.

10. ??Bootstrap??
• Bootstrap é um framework front-end que facilita a vida dos
desenvolvedores web a criar sites com tecnologia mobile (responsivo)
sem ter que digitar uma linha de CSS para “fazer e acontecer”.
• Não é a toa que o termo “Bootstrap” em inglês significa “inicialização”,
algo que possui um ponto de partida..
• Além disso, o Bootstrap possui uma diversidade de componentes
(plugins) em JavaScript (jQuery) que auxiliam o designer a
implementar: tootlip, menu-dropdown, modal, carousel, slideshow,
entre outros sem a menor dificuldade, apenas acrescentando algumas
configurações no código, sem a necessidade de criar scripts e mais
scripts.

11. JQuery
• O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no
sentido “escrever menos, fazer mais”.

12. PHP- o elefante azul
• O PHP é uma linguagem de programação, ou seja é o BACK-END do
site.
• O Php pode ser PHP estruturado ou Orientado Objeto.
• Não pense que essa linguagem é apenas para construir sites, mas sim
para a construção de sistemas inteligentes, e com o uso de banco de
dados.

13. CMS - Custom Management System
• CMS Sistema de Gerenciamento de Conteúdo, são sistemas prontos, e pré-
montados, para gerenciamentos de sites.
• Normalmente consegue-se montar um site sem ajuda de um web designer,
o que tem derrubado muito a credibilidade dos profissionais, pois tem
muitos criando sites com CMS muito inferior aos preços de mercado.
• Mas lembre-se, para fazer modificações mais avançadas, é necessário o
conhecimento de HTML e CSS.

14. Vamos iniciar!?

15. Softwares necessários
• Para Criar arquivos em HTML, CSS ou Jquery, você vai precisar apenas
de um editor de textos simples e um navegador de internet.
• Então nessa primeira aula vamos utilizar o bloco de notas do
Windows, ou equivalente, e o Google Chrome, ou algum navegador
atualizado, como nosso navegador padrão.

16. Iniciando
• Crie uma pasta com o nome “Primeira aula”, iremos salvar nossos arquivos da
aula de hoje dentro da mesma.
• Abra o bloco de notas e vamos salvar seguindo os passos abaixo.
• O nome do arquivo deve ser index.html, sempre a primeira página deve carregar
esse nome.
1
2
3
4 5 6

17. Conhecendo TAG’s
TAG’s Utilização
<doctype html> Informa o tipo do documento, nesse caso HTML 5
<html>...</html> Abertura e fechamento do documento HTML
<head> ... </head> A tag que marca o espaço para informações do site
<title> ... </title> Tag para o título do site.
<body> ... </body> Tag para o corpo do site.

18. Digite
• A tag <meta charset=“UTF-8”>
serve para especificar o uso de
caracteres especiais, como
acentos.
• Aperte Ctrl+S.
• Vá até a pasta e abra o arquivo
em algum navegador.