Apresentação Minas - Desenvolvendo Sites

1.702 visualizações

Publicada em

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

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

Nenhuma nota no slide
  • Apresentação Minas - Desenvolvendo Sites

    1. 1. Sites para a Web, ou seria <ul><ul><li>Thiago Fernandes Oliveira de Lima </li></ul></ul>
    2. 2. Quem sou <ul><li>Técnico em Informática pelo Minas (2002) </li></ul><ul><li>Graduando em Engenharia Industrial Madeireira </li></ul><ul><li>Programador WEB na Câmara de Itapeva </li></ul>
    3. 3. Agenda <ul><li>Rascunho (idéias!) </li></ul><ul><li>Cliente </li></ul><ul><li>Desenvolvimento </li></ul><ul><li>Testes, testes e mais testes </li></ul><ul><li>Manutenção </li></ul>
    4. 4. Rascunho <ul><li>Ferramentas Computacionais ... </li></ul><ul><ul><li>Adobe Illustrator </li></ul></ul><ul><ul><li>Freehand </li></ul></ul><ul><ul><li>Corel Draw </li></ul></ul><ul><ul><li>Inkscape </li></ul></ul><ul><li>... ou o velho papel e caneta? </li></ul>
    5. 6. Cliente <ul><li>Previsão de conclusão, valores ... </li></ul><ul><li>Conheça-o, descubra o que ele quer </li></ul><ul><li>Mantenha sempre contato </li></ul><ul><li>Defina objetivos, planejamento </li></ul><ul><li>Apresente versões do site </li></ul><ul><li>Lembre-se: </li></ul><ul><ul><li>O cliente nunca sabe o que quer ;) </li></ul></ul>
    6. 7. Desenvolvimento – Antes de tudo <ul><li>WEB 2.0 </li></ul><ul><ul><li>Conceitualizado em uma conferência de brainstorming entre a O’Reilly e a MediaLive International em 2004 </li></ul></ul><ul><li>Cloud Computing </li></ul><ul><ul><li>O conceito de computação nas nuvens data de 1960, quando John McCarthy opinou que a “computação um dia poderia ser organizada como serviço de utilidade pública” </li></ul></ul>
    7. 8. WEB 2.0
    8. 9. WEB 2.0
    9. 12. Cloud Computing <ul><li>Internet (grande nuvem – cloud) </li></ul><ul><li>Computação (computing) </li></ul><ul><li>Cloud + Computing = servidores virtuais disponíveis na Internet </li></ul>
    10. 14. Cloud Computing <ul><li>Beneficiados: </li></ul><ul><ul><li>Aquelas que precisam acessar informações em tempo real (real-time information acess) tais como: RFID, sistemas de segurança e de transporte </li></ul></ul><ul><ul><li>Sistemas de pagamento e financial services </li></ul></ul>
    11. 15. Cloud Computing <ul><li>Beneficiados: </li></ul><ul><ul><li>Mundos virtuais (à la Second Life) e as redes sociais </li></ul></ul><ul><ul><li>Todas as aplicações cujos bilhões de dispositivos móveis farão (estão fazendo) uso </li></ul></ul>
    12. 16. Cloud Computing <ul><li>Desafios: </li></ul><ul><ul><li>A infraestrutura precisa melhorar (e muito!), principalmente aqui no Brasil. Como as empresas poderão garantir a disponibilidade dos serviços? </li></ul></ul><ul><ul><li>E se o seu negócio dependesse apenas deste serviço? </li></ul></ul><ul><li>Apesar destas questões, o futuro do processamento corporativo parece ser mesmo a Cloud Computing </li></ul>
    13. 17. Desenvolvimento <ul><li>Antes de tudo ... BACKUP!!!!! </li></ul><ul><li>Lei de Murphy nunca FALHA: </li></ul><ul><ul><li>“se alguma coisa pode dar errado, dará” </li></ul></ul><ul><li>O cliente pediu: </li></ul><ul><ul><li>Site estático: Atualização, manutenção, complica </li></ul></ul><ul><ul><li>Site dinâmico: Facilita a vida, mas depois do serviço concluído ... </li></ul></ul>
    14. 18. Desenvolvimento – Site Estático <ul><li>É o mais simples </li></ul><ul><li>Menor tempo de desenvolvimento </li></ul><ul><li>Conteúdo das páginas dificilmente mudam após a publicação do site </li></ul><ul><li>Menores requisitos técnicos para desenvolvimento e hospedagem </li></ul><ul><li>Substituídos pelos sites dinâmicos a mais de 10 anos </li></ul>
    15. 19. Desenvolvimento – Site Dinâmico <ul><li>Maior complexidade, envolvimento linguagem de programação (script) e banco de dados </li></ul><ul><li>Maior tempo de desenvolvimento </li></ul><ul><li>Frequentemente atualizado </li></ul><ul><li>Maiores requisitos técnicos para hospedagem </li></ul><ul><li>Sites baseados em base de dados com conteúdo dinamicamente gerado </li></ul>
    16. 20. Desenvolvimento – Qual(is) Linguagem(ns)? <ul><li>Linguagem(ns) que: </li></ul><ul><ul><li>atende as necessidades propostas para o funcionamento do site </li></ul></ul><ul><ul><li>é suportada pela plataforma de hospedagem </li></ul></ul><ul><ul><li>possui familiaridade </li></ul></ul><ul><li>Exemplos: </li></ul><ul><ul><li>PHP, ASP.net, ASP, Perl, JSP, Java, CFM </li></ul></ul><ul><ul><li>Java Script, VB Script, Action Script (junto com o Flash) </li></ul></ul>
    17. 21. Desenvolvimento – Linguagens <ul><li><?php //Comentarios ?> </li></ul><ul><li><?php $variavel = &quot;variaveis sempre com $ antes&quot;; ?> </li></ul><ul><li><?php echo &quot;O request retornado de nome é”, $_POST[“nome”]; ?> </li></ul><ul><li><?php </li></ul><ul><li>if ($a == 1) </li></ul><ul><li>{ //tá certo } </li></ul><ul><li>else </li></ul><ul><li>{ //tá errado } </li></ul><ul><li>?> </li></ul><ul><li>ASP </li></ul><ul><li><% 'Comentarios %> </li></ul><ul><li><% variavel = &quot;variaveis com qualquer nome&quot; %> </li></ul><ul><li><% Response.Write &quot;O nome é &quot; & request(&quot;nome&quot;) %> </li></ul><ul><li><% </li></ul><ul><li>if a = 1 then </li></ul><ul><li>'tá certo </li></ul><ul><li>else </li></ul><ul><li>'tá errado </li></ul><ul><li>end if </li></ul><ul><li>%> </li></ul>
    18. 22. Desenvolvimento - Linguagens <ul><li><script runat=&quot;server&quot;> </li></ul><ul><li>Sub Page_Load(Sender As Object,E As EventArgs) </li></ul><ul><li>TimeStamp.Text=now() </li></ul><ul><li>End Sub </li></ul><ul><li></script> </li></ul><ul><li><html> </li></ul><ul><li><body bgcolor=&quot;aqua&quot;> </li></ul><ul><li><h2>Esta é uma página ASP.NET com Evento.</h2> </li></ul><ul><li><asp:label id=&quot;TimeStamp&quot; runat=&quot;server&quot; /> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    19. 23. Desenvolvimento – Banco de Dados <ul><li>MySQL </li></ul><ul><li>PostgreSQL </li></ul><ul><li>SQL Server (Express Edition) </li></ul><ul><li>Firebird </li></ul><ul><li>Oracle </li></ul><ul><li>Interbase </li></ul><ul><li>DB2 </li></ul><ul><li>Access não é um Servidor BD </li></ul>
    20. 24. Desenvolvimento – Banco de Dados <ul><li>MySQL </li></ul><ul><ul><li>Alta compatibilidade com linguagens como PHP, Java, Python, C#, Ruby e C/C++ </li></ul></ul><ul><ul><li>Baixa exigência de processamento (em comparação como outros SGBD) </li></ul></ul><ul><ul><li>Vários sistemas de armazenamento de dados (database engine), como MyISAM , MySQL Cluster, CSV, Merge, InnoDB , Memory entre outros </li></ul></ul><ul><ul><li>Recursos como transactions (transações), conectividade segura, indexação de campos de texto, replicação etc </li></ul></ul>
    21. 25. Desenvolvimento – Banco de Dados <ul><li>PostgreSQL </li></ul><ul><ul><li>Compatibilidade com várias linguagens, entre elas, Java, PHP, Python, Ruby, e C/C++ </li></ul></ul><ul><ul><li>Base de dados de tamanho ilimitado </li></ul></ul><ul><ul><li>Tabelas com tamanho de até 32 TB ( 2 63 bytes no MySQL ) </li></ul></ul><ul><ul><li>Quantidade de linhas de até 1.6 TB ilimitada </li></ul></ul><ul><ul><li>Suporte a recursos como triggers, views, stored procedures, SSL, MVCC, schemas, transactions, savepoints, referential integrity e expressões regulares </li></ul></ul>
    22. 26. Desenvolvimento – Banco de Dados <ul><li>MS SQL Server </li></ul><ul><ul><li>Gerenciamento de Chave Extensível </li></ul></ul><ul><ul><li>Espelhamento de Banco de Dados Avançado </li></ul></ul><ul><ul><li>Recuperação Automática de Páginas de Dados </li></ul></ul><ul><ul><li>Gerenciador de Recursos </li></ul></ul><ul><ul><li>Suporte ao LINQ </li></ul></ul><ul><ul><li>Trigger, Stored Procedure, SQL User Function, Extended Stored Procedure </li></ul></ul>
    23. 27. Desenvolvimento – Estrutura <ul><li>XHTML (conteúdo) </li></ul><ul><ul><li>reformulação da linguagem de marcação HTML baseada em XML. Combina as tags de marcação HTML com regras da XML; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular etc). A intenção é melhorar a acessibilidade </li></ul></ul><ul><li>Java Script (interatividade) </li></ul><ul><li>CSS (apresentação) </li></ul>
    24. 28. Desenvolvimento – Estrutura <ul><li>Separando conteúdo, interatividade e apresentação ... o que ganho com isso? </li></ul>
    25. 29. Desenvolvimento – Estrutura <ul><li>Performance </li></ul><ul><ul><li>Arquivos externos como .css e .js ficarão armazenados no cache do navegador do usuário depois do primeiro carregamento da página, reduzindo em consequência drasticamente o tempo de carregamento </li></ul></ul>
    26. 30. Desenvolvimento – Estrutura <ul><li>Visão geral </li></ul><ul><ul><li>Você saberá exatamente onde procurar um código. Cada camada de código com seu propósito </li></ul></ul>
    27. 31. Desenvolvimento – Estrutura <ul><li>(Re)uso do Código </li></ul><ul><ul><li>Fica fácil usar o mesmo código em diferentes partes do site </li></ul></ul><ul><li>Exemplos </li></ul><ul><li><script type=”text/javascript” src=”arquivo.js”></script> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;arquivo.css&quot; /> </li></ul>
    28. 32. Desenvolvimento – Estrutura <ul><li>Manutenção </li></ul><ul><ul><li>O código fica centralizado em um lugar controlando apresentação e interatividade em todo o site </li></ul></ul>
    29. 33. Desenvolvimento – Estrutura <ul><li>Web Standards </li></ul><ul><ul><li>Suas páginas carregarão mais rápido </li></ul></ul><ul><ul><li>Os custos de hospedagem serão reduzidos </li></ul></ul><ul><ul><li>Os redesigns dos seus sites serão mais eficientes e mais baratos </li></ul></ul><ul><ul><li>Será mais fácil manter a consistência visual entre todos seus sites </li></ul></ul>
    30. 34. Desenvolvimento – Estrutura <ul><li>Web Standards </li></ul><ul><ul><li>Melhores resultados das ferramentas de busca </li></ul></ul><ul><ul><li>O seu site se tornará mais acessível para todos os visualizadores e browsers </li></ul></ul><ul><ul><li>E lhe proporcionará mais competitividade (isto é, estabilidade no mercado) enquanto todo o Mundo começa a usar os padrões </li></ul></ul><ul><li>W3C - desenvolve padrões para a criação e a interpretação dos conteúdos para a Web </li></ul>
    31. 35. Desenvolvimento – Estrutura <ul><li>Web Standards </li></ul><ul><ul><li>Esqueça, de uma vez por todas: </li></ul></ul><ul><ul><ul><li><font>, <b>, <i>, <u> ... </li></ul></ul></ul><ul><ul><li>Marcação Estrutural (Semântica) </li></ul></ul><ul><ul><ul><li><h1> - utilizar para a manchete </li></ul></ul></ul><ul><ul><ul><li><h2> - utilizar para sub-títulos </li></ul></ul></ul><ul><ul><ul><li><p> - parágrafos </li></ul></ul></ul><ul><ul><ul><li><ul> - são usados para lista (até mesmo menu) </li></ul></ul></ul><ul><ul><ul><li><div>? </li></ul></ul></ul>
    32. 36. Desenvolvimento – Estrutura <ul><li>Tableless </li></ul><ul><ul><li>Tabelas misturam o conteúdo da formatação, deixando os sites desnecessariamente grandes </li></ul></ul><ul><ul><li>Banda de transferência não é grátis </li></ul></ul><ul><ul><li>Redesign de sites de conteúdo extenso ser um trabalho intenso (e caro) </li></ul></ul>
    33. 37. Desenvolvimento – Estrutura <ul><li>Tableless </li></ul><ul><ul><li>Extremamente difícil manter a consistência visual do site </li></ul></ul><ul><ul><li>páginas baseadas em tabelas são também muito menos acessíveis para usuários com deficiências e para aqueles que usam celulares e PDAs </li></ul></ul>
    34. 38. Desenvolvimento – Estrutura <ul><ul><li>Tabelas existem para </li></ul></ul><ul><ul><li>exibirem dados tabulados </li></ul></ul><ul><ul><li>Tableless <> Padrões WEB </li></ul></ul>
    35. 39. Desenvolvimento – Estrutura <ul><li>CSS Zen Garden ( sem CSS ) </li></ul><ul><li>O CSS de Zen Garden </li></ul><ul><ul><li>Versões: </li></ul></ul><ul><ul><ul><li>Burnt Offering </li></ul></ul></ul><ul><ul><ul><li>Make 'em Proud </li></ul></ul></ul><ul><ul><ul><li>Revolution </li></ul></ul></ul><ul><li>http://www.csszengarden.com/ </li></ul>
    36. 40. Desenvolvimento – Estrutura <ul><li>O ESPN consumia 2 Terabytes por dia, que dava um total de 730 Terabytes por ano! </li></ul><ul><li>Eles conseguiram economizar cada um desses bytes redesenhando o site usando Padrões Web </li></ul><ul><li>Com esta mudança, anualmente economizam mais de 700 TB </li></ul>
    37. 41. Desenvolvimento – Acessibilidade <ul><li>Pessoas portadoras de necessidades especiais sejam capazes de usar a Web </li></ul><ul><li>Contempla todo tipo de necessidade especial, incluindo as visuais, auditivas, físicas, de fala, cognitivas e neurológicas </li></ul>
    38. 42. Desenvolvimento – Acessibilidade <ul><li>Uma Web acessível e que permita a participação de pessoas portadoras de necessidades especiais na sociedade é fundamental para proporcionar oportunidades iguais para todos nas diversas áreas </li></ul><ul><li>WCAG </li></ul><ul><li>E-MAG </li></ul><ul><li>http://www.acessobrasil.org.br/ </li></ul>
    39. 43. Testes, testes e mais testes <ul><li>Realize testes em todos os browsers, sistemas operacionais (em diferentes configurações) e em todos os dispositivos existentes </li></ul><ul><li>iPhone revolucionou o acesso à internet móvel </li></ul><ul><li>Peça para um usuário leigo, que não tenha participado do projeto navegue no site </li></ul><ul><li>Verifique todos os links, imagens e formulários </li></ul><ul><li>Faça isso mais de uma vez ;) </li></ul>
    40. 44. Testes, testes e mais testes
    41. 45. Testes, testes e mais testes
    42. 46. Testes, testes e mais testes
    43. 47. Manutenção <ul><li>É necessária? </li></ul><ul><li>Quando é necessária? </li></ul><ul><li>Saber que os visitantes (clientes do seu cliente) pensam </li></ul><ul><li>Acompanhar as estatísticas de acesso </li></ul><ul><li>Saber como chegam ao site </li></ul>
    44. 48. Bom ... <ul><li>Para construir sites, não se deve apenas conhecer todas as ferramentas e sim saber como, quando e onde usá-las </li></ul><ul><li>Geralmente o projeto de um site é em equipe, na maioria dos casos compostas por designers e programadores </li></ul><ul><li>Esteja sempre atento a tudo, visite sites, conhecendo as novas tecnologias </li></ul><ul><li>Não acomode-se, não pare no tempo ;) </li></ul>
    45. 49. [email_address]

    ×