Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas.

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br"

Jerónimo Antas Gameiro
8 Há anos
Visualizações:

1 Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas

2 Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

3 Como a coisa funciona O que é a Internet? A Internet é um conjunto de computadores conectados entre si. Alguns deles ficam conectados permanentemente (servidores de empresas, governo, universidades, bibliotecas, provedores de serviços, etc.) enquanto outros se conectam eventualmente, como usuários domésticos por exemplo. Independente de tipo de conexão, uma vez conectados, todos constituem a Internet.

Alguns deles ficam conectados permanentemente (servidores de empresas, governo, universidades,

4 Como a coisa funciona Breve história da Internet A Internet surgiu nos anos 60, em um projeto de defesa norte americano de pesquisa militar. O governo criou uma rede de ampla abrangência territorial, que conectava diversos pontos do território nacional e através da qual se poderia transitar informações. Essa rede se expandiu rapidamente, passando a abranger cientistas e pesquisadores de todo pais e posteriormente abrangendo também as universidades, bibliotecas e empresas.

O governo criou uma rede de ampla abrangência territorial, que conectava diversos pontos do território nacional e

5 Como a coisa funciona World Wide Web, WWW, W3 ou apenas Web Na década de 90, Tim Berners-Lee, o inventor da Web, trabalhava na Seção de Computação do CERN (Organização Européia de Pesquisa Nuclear), sediada em Genebra, na Suíça, quando iniciou pesquisas visando descobrir um método que possibilitasse aos cientistas do mundo inteiro compartilhar eletronicamente seus textos e pesquisas, e que tivesse a funcionalidade de interligar esses documentos. A Web é um conjuntos caleidoscópico de milhões de arquivos de todo o tipo que podem ser acessados via internet: documentos de texto, imagens, vídeos, áudios e principalmente as nossas páginas HTML; Para tanto, Tim Berners-Lee inventou o protocolo HTTP, e linguagem HTML e construiu o primeiro navegador (Nexus);

pesquisas, e que tivesse a funcionalidade de interligar esses documentos.

6 Como a coisa funciona HT... o quê? HTTP (Hiper Text Transfer Protocol) é um protocolo utilizado na Web para distribuir e recuperar informações; O HTML (Hipertext Markup Language) é uma linguagem usada para criar páginas Web, que tem duas características essenciais: hipertexto e universalidade. Hipertexto quer dizer que você pode criar um link (vínculo) em uma página, que conduza a outra página ou a praticamente qualquer outro tipo de arquivo da Web. Significa que a informação pode ser acessada a partir de pontos diferentes. Tim Berners-lee queria que a Web trabalhasse mais como o cérebro de uma pessoa que como uma fonte estática de dados, tal como um livro Universalidade quer dizer que pelo fato dos arquivos HTML serem gravados como do tipo somente texto ou ASCII, podem ser lidos por qualquer computador, isso também faz das páginas HTML arquivos de rápido carregamento.

duas características essenciais: hipertexto e universalidade.

7 Como a coisa funciona O que é uma página Web? Uma página Web é um arquivo do tipo HTML ou escrito em alguma outra linguagem de programação (PHP, ASP,.NET, Java, etc.) que pode conter elementos de texto e TAGS comandos que informam sobre a formatação dos elementos da página, criam vínculos para exibição de imagens, áudios, vídeos, etc. Esse conjunto de texto e TAGS consiste no que chamamos de Código Fonte do arquivo.

8 Como a coisa funciona O que é uma página Web? Para ver o código fonte de uma página HTML basta acessar: Menu principal do navegador > Exibir > Código Fonte.

9 Entendendo a Web

10 Exemplos

11 Exemplos

12 Exemplos

13 Softwares Necessários Navegadores (browsers) Editores de HTML Bloco de Notas (Win) WordPad (Win) Simple Text (Mac) BBEdit (Mac) Dreamweaver (Win/Mac) FrontPage (Win) HTMLKit (editor gratúito/win) CoffeCup Free (editor gratúito/win) Eclipse (Win/Linux/) Cliente FTP Dreamweaver (Win/Mac) FireFTP (FTP gratúito/win) FileZilla (FTP gratúito/win) Smart FTP (Win) Servidor Web Apache IIS TomCat Jboss

CoffeCup Free (editor gratúito/win) Eclipse (Win/Linux/) Cliente FTP Dreamweaver (Win/Mac) FireFTP

14 Linguagens Linguagens de Browser: HTML JavaScript CSS Linguagens do Servidor: PHP ASP Java

15 Servidor de Aplicação Estes servidores oferecem recursos comuns a diferentes aplicações (autenticação, conexão à BDs, suporte a transação, etc) Pensando-se numa arquitetura em camadas, um servidor de aplicação é um servidor que hospeda e oferece serviços para outras aplicações Com isso, espera-se que os desenvolvedores poupem tempo para implementação da lógica do negócio

camadas, um servidor de aplicação é um servidor que hospeda e oferece serviços para outras

16 Servidor de Aplicação Exemplos: Java: JBoss (Red Hat), WebLogic (BEA), WebSphere (IBM), Geronimo (Apache), Sun Application Server (SUN), Glassfish (baseado no da SUN) Microsoft:.NET Framework PHP: Apache

17 Apache Servidor web mais utilizado no mundo atualmente (Fonte: Netcraft) Software Livre Escrito em C Executa diversas linguagens script: PhP, Perl, ASP, etc. Possui suporte nativo ao MySQL Permite definição de módulos para extensão do servidor Exemplo: suporte para JSP Mais adiante, utilizaremos ele ao aprender PHP.

etc. Possui suporte nativo ao MySQL Permite definição de módulos para extensão

18 Web Standards Estatísticas de Browsers:

19 Web Standards Web Standards pode ser traduzido como "Normas para Web". Tem por finalidade a padronização e a criação de uma "Web universal". Conjunto de tecnologias criadas pela W3C. HTML, XHTML, CSS, entre outras. Padronização na exibição (browser); Maior facilidade na manutenção; Ranking de buscas (bem escrito); Otimização de páginas web (performance)

Conjunto de tecnologias criadas pela W3C. HTML, XHTML, CSS, entre outras.

20 Conceitos Básicos HTML (Linguagem de Marcação de Hiper Texto) Documento de texto contendo tags de marcação que informam ao browser como exibir a página. Considerada a base de todas as outras linguagens para o desenvolvimento de projetos Web. XHTML (extensible Markup Language) Versão melhorada do HTML baseada no XML Sintaxe regular e previsível que facilita a leitura e interpretação nos browsers.

Considerada a base de todas as outras linguagens para o desenvolvimento de projetos Web.

Todo página HTML deve começar com a TAG <HTML> e ser encerrado com </HTML>.

21 Estrutura de um documento HTML Uma página HTML é divida em três partes básicas: a estrutura principal, o cabeçalho e o corpo do programa. Todo página HTML deve começar com a TAG <HTML> e ser encerrado com </HTML>. A área do cabeçalho é opcional e é delimitada pelo par de TAGS <HEAD> </HEAD>. A maioria dos comandos serão colocados na área corpo do documento, formado pelas TAGS <BODY> </BODY>

22 TAGS HTML Os Tags consistem do sinal de <, seguida pelo nome da instrução ou comando e fechada por >. Ex: <p> Geralmente as Tags aparecem em pares: Ex: <H1> Título </H1> A Tag com ( / ) significa que está fechando a Tag sem barra.

Criando a primeira página HTML O HTML básico: Chamamos de HTML básico aquele que contém todas as linhas obrigatórias e essenciais para o bom funcionamento de sua página Web.

23 Criando a primeira página HTML O HTML básico: Chamamos de HTML básico aquele que contém todas as linhas obrigatórias e essenciais para o bom funcionamento de sua página Web. Todas as Tags apresentadas aqui aparecem uma única vez em cada arquivo HTML. No Futuro, este conteúdo será estendido, mas em princípio considere aprender as linhas de código abaixo: Abra o bloco de notas, digite o código acima e salve como hello.html, depois execute o arquivo.

24 HTML - Cabeçalhos O HTML básico: São usados para títulos e subtítulos do conteúdo de texto de uma página; A linguagem HTML possui 6 níveis de cabeçalho, numeradas de 1 a 6, sendo o número 1 de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito.

25 HTML - Parágrafos O HTML básico: A marcação <P> é utilizada para definir o fim e início de um bloco de texto (Parágrafo); O HTML não reconhece quebra de linha, colocada com a tecla ENTER do bloco de notas. No HTML utiliza-se da tag <P> para tal recurso.

26 HTML Quebras de linhas O HTML básico: A marcação <br/> provoca uma quebra de linha sem acrescentar a linha extra entre elas, como faz a tag <p>.

27 HTML Listas não enumeradas O HTML básico: A marcação <ul> funciona em blocos e necessitam da tag auxiliar <li> para realizar seu trabalho. Ao abrir o bloco com a tag apropriada você deverá usar uma seqüência de linhas apoiadas pela segunda tag <li>, que complementa a primeira.

28 HTML Listas enumeradas O HTML básico: Uma lista ordenada, ou numerada é semelhante a uma lista não numerada, exceto porque utiliza a marcação <ol> ao invés de <ul>. Vamos ao exemplo:

29 Vamos praticar um pouco? Crie uma página HTML que gere o seguinte conteúdo:

30 HTML Links O HTML básico: Links em HTML são definidas com a tag <a> <a href=" é um link</a> O endereço do link é especificado no atributo href. Os atributos são usados para fornecer informações adicionais sobre os elementos HTML. Outros atributos da tag <a>: Target = _blank : abre o link em outra página

31 HTML Inserindo imagens O HTML básico: Imagens HTML são definidas com a tag <img> O arquivo de origem ( src ), um texto alternativo ( alt ) e tamanho ( largura e altura ) são fornecidos comoatributos : <img src= cruzeiro.jpg" alt= Campeão" width="104" height="142">

32 Vamos praticar um pouco? Crie seu primeiro site com todos os elementos/tags vistas hoje: <h1>...<h5> <p> <br> Links Imagens Listas numeradas e não numeradas

33 Desenvolvimento web Além das ferramentas de desenvolvimento disponíveis, o desenvolvedor deve ser conhecedor dos padrões de desenvolvimento e linguagens utilizadas na web. Conhecimento é tudo, ferramenta só ajuda...

34 Dúvidas? Envie para: Obrigado!

Documentos relacionados

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de