Introducao desenvolvimento-web
-
Upload
marciomota -
Category
Documents
-
view
116 -
download
1
description
Transcript of Introducao desenvolvimento-web
![Page 1: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/1.jpg)
AULA 01
UMA VISÃO GERAL DO DESENVOLVIMENTO
WEB
domingo, 15 de setembro de 13
![Page 2: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/2.jpg)
CONCEITOS QUE FUNDAMENTAM A WEB
• O que é WEB 2.0
• Ciclos da WEB
• Abrangência
• WEB 2.0 hoje
domingo, 15 de setembro de 13
![Page 3: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/3.jpg)
O QUE É ISSO
• Informação a qualquer hora
• Rápidos resultados
• Portabilidade absoluta
• Manutenção facilitada
domingo, 15 de setembro de 13
![Page 4: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/4.jpg)
O QUE É WEB 2.0 ?
• Voltar ao tempo para entender o termo
• A evolução da web
• Ciclo
domingo, 15 de setembro de 13
![Page 5: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/5.jpg)
1º CICLO: 1994 - 1996
• Conteúdo: estático e atualizado pelos webmasters
• Tecnologia: escassa e limitada
• Desenvolvimento: Praticamente artesanal
• Serviços: Apenas uma vitrine, nenhuma interação com o usuário
domingo, 15 de setembro de 13
![Page 6: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/6.jpg)
2º CICLO: 1997 - 2000
• Conteúdo: A publicação de artigos e notícias se torna automático
• Tecnologia: Evolução das tecnologias e surgimento de outras
• Desenvolvimento: Surgem softwares que ajudam em algumas partes do processo
• Serviços: Surgem as primeiras aplicações comerciais, os usuários já tem alguma interatividade. Inicio dos “Webmails”
domingo, 15 de setembro de 13
![Page 7: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/7.jpg)
3º CICLO: 2001 - 2004• Conteúdo: Ainda mais dinâmico, mais customizável e mais abrangente
(músicas, vídeos e animações).
• Tecnologia: Tecnologia começa a se tornar padrão com (xHTML, CSS, XML). A era do flash. Os navegadores alcançam níveis satisfatórios de recursos
• Desenvolvimento: Surgem NOVOS softwares que ajudam em algumas partes do processo
• Serviços: Deixam de ser vitrines e se tornam aplicações profissionais. O usuário confia um pouco mais na web e começa a comprar pela internet
domingo, 15 de setembro de 13
![Page 8: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/8.jpg)
4º CICLO: 2004 - ? ? ? ?• Conteúdo: Em sua grande maioria livre. Os usuários
• Tecnologia: Padrões muito mais próximos ao W3C; Surgimento do AJAX, consolidação do padrão XML
• Desenvolvimento: Mais automatizado, mais ferramentas de desenvolvimento, muito mais produtivo. Seja no cliente ou no Servidor.
• Serviços: O uso de recursos como o Ajax, deixam os sites com aparência de aplicações. Os usuários tem muito mais interação com os sites, conquistam mais poder e liberdade
domingo, 15 de setembro de 13
![Page 9: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/9.jpg)
ENTENDENDO O DESENVOLVIMENTO WEB
domingo, 15 de setembro de 13
![Page 10: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/10.jpg)
VANTAGENS
• Informação a qualquer hora, em qualquer lugar
• Rápidos resultados
• Portabilidade absoluta
• Manutenção facilitada
domingo, 15 de setembro de 13
![Page 11: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/11.jpg)
COMO FUNCIONA ?
• Visualização de dados sem comunicação externa (conteúdo estático)
• A partir da troca de dados, entre um cliente e um servidor (conteúdo dinâmico)
• Arquitetura client-server : requisição - resposta
domingo, 15 de setembro de 13
![Page 12: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/12.jpg)
COMO FUNCIONA ?
domingo, 15 de setembro de 13
![Page 13: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/13.jpg)
DEFINIÇÃO
• Desenvolver pra web resume-se, então, em:"criar interfaces (páginas) que dão acesso a um conteúdo local ou externo, sendo este através de requisições e respostas (troca de dados)."
domingo, 15 de setembro de 13
![Page 14: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/14.jpg)
DESENVOLVIMENTO FRON-END
desenvolvimento em CAMADAS
domingo, 15 de setembro de 13
![Page 15: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/15.jpg)
CAMADAS ?
• Uma página web constitui-se de três camadas:• Conteúdo• Apresentação• Comportamento
• A divisão em camadas, além de ser uma boa prática, facilita o nosso trabalho e nos oferece mais performance ao projeto.
domingo, 15 de setembro de 13
![Page 16: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/16.jpg)
CAMADAS ?
domingo, 15 de setembro de 13
![Page 17: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/17.jpg)
CAMADA DE CONTEÚDO
• Camada fundamental, a mais importante.
• Na maioria das vezes, HTML / xHTML – hoje evoluído para HTML5.
domingo, 15 de setembro de 13
![Page 18: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/18.jpg)
CAMADA DE CONTEÚDO
• XHTML É a linguagem responsável por exibir e estruturar os dados.
• Teoria muito simples, fácil entendida quando bem usada
• Deve ser sempre o mesmo código, independentemente do dispositivo / programa que acessa a página.
domingo, 15 de setembro de 13
![Page 19: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/19.jpg)
CAMADA DE APRESENTAÇÃO• Basicamente, é a formatação, o design da página.
• Deve ser construída a partir de uma linguagem chamada CSS (Cascading Style Sheet – Folha de estilos encadeados).
• CSS é a parte do código que cuida do layout, design e formatação da página e seus componentes;
• Uso simples, intuitivo;
• Pode mudar de acordo com o dispositivo ou programa que está acessando a página, ou até mesmo com as preferências do usuário.
domingo, 15 de setembro de 13
![Page 20: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/20.jpg)
E AGORA ?
• Até agora, temos pouca interação com o usuário.
• Tem conteúdo, é bonito. Mas é sem graça.
• O usuário precisa interagir mais com a página, e a página precisa reagir a comandos do usuário! A página precisa de comportamento!
domingo, 15 de setembro de 13
![Page 21: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/21.jpg)
CAMADA DE COMPORTAMENTO
• É a camada que permite melhorar a interação do usuário com a página
• É composta principalmente por uma outra linguagem, chamada JavaScript. Muitas vezes essa camada fica restrita a determinados dispositivos / programas
domingo, 15 de setembro de 13
![Page 22: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/22.jpg)
JAVASCRIPT
• Uma poderosíssima linguagem de programação, mais voltada para a Web, que nos oferece inúmeros recursos para uma página
• Recursos mais avançados da linguagem, às vezes, requerem um navegador mais aprimorado
domingo, 15 de setembro de 13
![Page 23: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/23.jpg)
RESUMINDO...
domingo, 15 de setembro de 13
![Page 24: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/24.jpg)
DESENVOLVIMENTO BACK-END
domingo, 15 de setembro de 13
![Page 25: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/25.jpg)
ENTENDENDO...
Servidores Web, BD Internet
Terceirizável Manutenção Mínima,
Tempo Zero de ConfiguraçãoAplicação
Cliente com Web Browser
domingo, 15 de setembro de 13
![Page 26: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/26.jpg)
ALGUMAS TECNOLOGIAS
domingo, 15 de setembro de 13
![Page 27: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/27.jpg)
PADRÕES WEBfazendo certo
domingo, 15 de setembro de 13
![Page 28: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/28.jpg)
PADRÕES WEB ?
• É um conjunto de normas e recomendações para o desenvolvimento web que visam padronizar e, assim, facilitar a programação e acesso.
domingo, 15 de setembro de 13
![Page 29: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/29.jpg)
QUEM CRIA ?
• Um consórcio chamado W3C (World Wide Web Consortium), que foi criado para tornar a Web "universal", criando padrões
• É composto por empresas na área de tecnologias pra Web
domingo, 15 de setembro de 13
![Page 30: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/30.jpg)
PADRÕES WEB
• O maior problema que enfrentamos hoje, quando estamos desenvolvendo uma aplicação web, é a incompatibilidade de nossos projetos entre navegadores.
• Quando a Web surgiu, navegadores começaram a adicionar recursos que apenas ele possuíam, no intuito de atrair desenvolvedores
• O problema era que todos os navegadores eram usados. E o usuário tem direito a ter acesso onde ele quiser
domingo, 15 de setembro de 13
![Page 31: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/31.jpg)
PADRÕES WEB
• Internet Explorer e Netscape Navigator, os mais usados na época, travaram uma verdadeira "guerra"
• O resultado foi que cada site tinha que ter uma versão para cada navegador
• E quem era mais prejudicado? Isso. Nós. Desenvolvedores
domingo, 15 de setembro de 13
![Page 32: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/32.jpg)
NAVEGADORES
• Então entramos na briga e agora apoiamos completamente os padrões web.
• E agora os navegadores estão cada vez mais se aprimorando neste aspecto.
• Próxima geração (mais usados)
domingo, 15 de setembro de 13
![Page 33: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/33.jpg)
QUAIS AS ÁREAS DE TRABALHO ?
domingo, 15 de setembro de 13
![Page 34: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/34.jpg)
ÁREAS DE TRABALHO• Desenvolvedor back-end
• JAVA,php, ruby, django (python), asp;
• Desenvolvedor front-end
• Html 5, CSS3, javascript, Usabilidade / Acessibilidade
• Arquitetura web
• SOA, Web-Services, API
• Segurança web
domingo, 15 de setembro de 13
![Page 35: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/35.jpg)
AULA 02
SISTEMAS GERENCIADORES DE
CONTEÚDO
domingo, 15 de setembro de 13
![Page 36: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/36.jpg)
O DESENVOLVIMENTO DO CMS
• A história do gerenciamento de conteúdos
• Papiros
• Livros
• Bibliotecas
• Prensa de Gutenberg
• Catalogação
domingo, 15 de setembro de 13
![Page 37: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/37.jpg)
O QUE É GERENCIAMENTO DE CONTEÚDO ?
• O gerenciamento de conteúdo pode ser descrito como a solução do problema geral para o produtor de conteúdo bem como para a entrega desse conteúdo para o consumidor final seja essa informação de forma impressa ou digital.
domingo, 15 de setembro de 13
![Page 38: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/38.jpg)
CARACTERÍSTICAS DE UM CMS
• O que é conteúdo ?
• O que é um gerenciador ?
• O que é um gerenciador de conteúdos ?
domingo, 15 de setembro de 13
![Page 39: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/39.jpg)
CARACTERÍSTICAS DE UM CMS
• Criação de Conteúdo - Essa fase pode ser dividida em Aquisição de conteúdo, Agregação de conteúdo Distribuído e Criação / Autoria de novos conteúdos propriamente ditos.
• Gerenciamento Adequado de Conteúdo - Inclui Design da Informação (o que pode ser relevante para cada plataforma em que o conteúdo será aplicado), Workflow, Metadados, Aprovações, Repositório, Transformações, localização, servidor de teste, garantia de qualidade, etc.
• Entrega do Conteúdo - Aqui dividi-se em servidor de entrega, Publicação em multi-canais e Distribuição (RSS, Web Services)
domingo, 15 de setembro de 13
![Page 40: Introducao desenvolvimento-web](https://reader034.fdocuments.net/reader034/viewer/2022050720/5495c196b479597e6a8b60b4/html5/thumbnails/40.jpg)
SELECIONANDO UM CMS• Funcionalidade Principal
• O editor de textos
• Gerenciamento de recursos (imagens, videos)
• Buscas
• Personalização
• Interação com o usuário
• Acessos e Permissões
• Versionamento de conteúdos
domingo, 15 de setembro de 13