Aula 01- web designer

167 visualizações

Publicada em

introdução a web designer

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
167
No SlideShare
0
A partir de incorporações
0
Número de incorporações
129
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 01- web designer

  1. 1. www.profroneysousa.blogspot.com.br WEB DESIGNER Introdução ao conteúdo • software • codigos
  2. 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. 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. 4. O que vamos aprender? • Hospedagem de site • HTML 5 • CSS 3 • Jquery • PHP programado (Introdução)
  5. 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. 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. 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. 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. 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. 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. 11. JQuery • O jQuery é uma biblioteca de Javascript “leve”, fácil de utilizar no sentido “escrever menos, fazer mais”.
  12. 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. 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. 14. Vamos iniciar!?
  15. 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. 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. 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. 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.

×