1.
Sites para a Web, ou seria <ul><ul><li>Thiago Fernandes Oliveira de Lima </li></ul></ul>

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.
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.
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>

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>

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>

8.
WEB 2.0

9.
WEB 2.0

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

28.
Desenvolvimento – Estrutura <ul><li>Separando conteúdo, interatividade e apresentação ... o que ganho com isso? </li></ul>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

44.
Testes, testes e mais testes

45.
Testes, testes e mais testes

46.
Testes, testes e mais testes

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>

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>

49.
[email_address]