O que é preciso para criar um site: back-end, front-end, hospedagem e mais
•Transferir como PPTX, PDF•
2 gostaram•1,391 visualizações
Este documento fornece uma introdução sobre os principais componentes necessários para criar um site: back-end, front-end, hospedagem e domínio. Detalha as tecnologias HTML, CSS e JavaScript, explicando o que cada uma faz. Avisa que sites podem ser estáticos ou dinâmicos. Fornece links para códigos e vídeos sobre o assunto.
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Destaque (18)
O que é preciso para criar um site: back-end, front-end, hospedagem e mais
- 3. o que é preciso? back-end front-end hospedagem domínio html css javascript
- 5. Hyper Text Markup Language
- 11. separa apresentação do conteúdo controle e formatação animação
- 15. JavaScript
- 16. NÃO É
- 17. manipulação do documento interação com usuário comunicação com servidor
- 20. só isso?
- 22. estático
- 23. dinâmico
- 31. obrigado!! lucas marçal /marcallkz /marcallkz /marcallkz felipe lopes lage /lipelopeslage /lipelopeslage eric andrade /ericAndrade /erictwentyfourseven adam requena /adammacias /adam.requena.macias marco sampaio /MarcoSampaio /marco.sampaio.5059
Notas do Editor
- Apresentação do evento e dos organizadores. Impressões do primeiro codebeer. Deixa pergunta no ar: “o que é necessário para criar e publicar um site?”. Ligação com o próximo slide
- Tecnologias envolvidas no processo. O que é front-end e o que é back-end? Quais as ferramentas/tecnologias envolvidas? – ligação para o próximo slide
- Pilares base para a maioria esmagadora dos sites. Vamos passar por cada um deles.
- Sigla HTML Explicação hyper text (documento com links/referências a outros documentos)
- Descreve/estrutura o conteúdo do documento através de tags Com o html5 a semântica fica mais forte, as tags dão mais valor semântico ao conteúdo. Isso beneficia os buscadores e a acessibilidade do seu site (apesar de não ser apenas isso que facilita o acesso) Suporte a diferentes tipos de mídia (vídeo, foto, texto, audio, telas/canvas etc) e melhorias na forma de usa-las (também por causa do html 5)
- HTML é uma linguagem de marcação (inclusive isso tá no nome “markup language”) e não de programação.
- Exemplo de código. Localizar rapidamente a sessão, os artigos, cabeçalhos e rodapés (semântica)
- Como fica aquele HTML anterior no seu browser. Meio feio. Como melhorar isso? O HTML dá algum suporte pra formatação de conteúdo, mas esse não é o seu foco.
- Esse é o cara que vai formatar o seu conteúdo!
- Separa a camada da apresentação (o visual) do conteúdo. Facilita na organização e na reutilização de pedaços de código. Possui mais opções que o HTML para efeitos visuais, te dá mais controle. Animações para enriquecer experiência do usuário. Algumas animações são aceleradas por hardware (placa de vídeo/GPU).
- Exemplo de código CSS
- HTML com CSS aplicado a ele
- Resultado. Um pouco mais bonito. Mas não é só isso que faz um site.
- Em alguns casos precisamos criar experiências mais interativas, mais ações do usuário.
- Importante frisar que Java não é a mesma coisa que Javascript. Semelhança apenas no nome.
- Manipulação das tags HTML, podendo alterar, criar e remover marcações novas. Controla as APIs para uso de câmera, microfone, geolocalização, audio, vídeo etc. E também pode trocar dados com o servidor (ajax)
- Exemplo de código JS. Adiciona um comportamento a imagem do Homer. Clique abre a imagem em destaque. Foram adicionadas algumas classes a mais no CSS, não vou mostrar pq é pouca coisa e tudo isso estará disponível no github.
- É só isso que monta um site? Não. Tirando a parte de comunicação com servidor que foi falado no JS, o que foi mostrado até aqui cria apenas páginas estáticas.
- A maioria dos sites que acessamos (portais de notícias, redes sociais, blogs) possuem páginas dinâmicas. O conteúdo é sempre o mais atual ou direcionado a preferência do usuário. diferença entre páginas estáticas e dinâmicas.
- servida exatamente da forma como ela está no servidor
- Processamento, linguagem server-side, banco de dados e javascript (ajax)
- Como faço para colocar o meu site online?
- [ ANIMAÇÃO ] preciso de um servidor, essencialmente um computador em algum lugar que tenha acesso a internet, dos arquivos do meu site (seja ele estático ou dinâmico) e preciso colocar esses arquivos no servidor. Servidor web.
- Servidores web mais comuns Receber, tratar e responder aos acessos ao site.
- Domínios Registro BR (servidores dns) Propagação de domínios Apontar domínio para servidor
- Analogia (mostrar o vídeo antes do próximo slide)