Navegador. Servidor. Apache

Transcrição

1 PROGRAMAÇÃO AVANÇADA PARA WEB Navegador O navegador também conhecido como web browser ou simplesmente browser é um programa que habilita seus usuários a interagirem com documentos hospedados em um servidor Web. Servidor O Servidor web é a máquina responsável pelo armazenamento de dados dos sites bem como seus arquivos, imagens, fotos etc. Geralmente um servidor possui também uma boa capacidade de processamento e memória que fica reservada as atividades do site. Os servidores web são a espinha dorsal da Internet, são eles que hospedam todas as páginas, incluindo os mecanismos de busca (GOOGLE, YAHOO). Servem como base para todo tipo de aplicativo via web, incluindo os webmails. Ao acessar qualquer site, há um servidor por trás daquele endereço responsável por disponibilizar as páginas e todos os demais recursos que você pode acessar. Assim, quando você envia um através de um formulário, coloca uma mensagem em um fórum de discussão, faz uma compra on-line, etc, um servidor Web (ou um conjunto de servidores) é responsável por processar todas essas informações. Apache O Apache é um software livre, o que significa que qualquer um pode estudar ou alterar seu código-fonte, além de poder utilizá-lo gratuitamente. É graças a essa característica que o software foi (e continua sendo) melhorado ao passar dos anos. Graças ao trabalho muitas vezes voluntário de vários desenvolvedores, o Apache é servidor Web mais usado no mundo. Além de estar disponível para o Linux (e para outros sistemas operacionais baseados no Unix), o Apache também conta com versões para o Windows, para o Novell Netware e para o OS/2, o que o torna uma ótima opção para rodar em computadores obsoletos (desde que este atenda aos requisitos mínimos de hardware). O servidor Apache é capaz de executa código e arquivos em HTML, PHP, Perl, Shell Script e até em ASP e pode atuar como servidor FTP, HTTP, entre outros IIS Internet Information Services IIS (Internet Information Services - anteriormente denominado Internet Information Server) é um servidor web criado pela Microsoft para seus sistemas operacionais servidores. Sua primeira versão foi introduzida com o Windows NT Server versão 4, e passou por várias atualizações. É também o sucessor do PWS. Atualmente, a versão mais atual é o IIS 7.5 (disponível apenas no Windows Server 2008 R2 e Windows 7).

2 2 Documentos Estáticos X Documentos Dinâmicos Existem dois tipos de web sites aqueles com conteúdo estático, chamados web sites estáticos, e aqueles com conteúdo gerado dinamicamente chamados web sites dinâmicos. O conteúdo Web é tudo o que aparece em uma página Web: texto, gráficos, campos de formulários, links para outras páginas, botões de navegação, menus,etc. Nos primórdios da Internet, o conteúdo das páginas web era quase que inteiramente formado por código HTML estático e documentos de texto. Um documento estático é simplesmente qualquer página Web que seja salva em disco e repassada através de um browser sem sofrer quaisquer mudanças. Em um web site estático todo o conteúdo das páginas é colocado manualmente por desenvolvedores web. Esse processo é conhecido como construção da página em tempo de projeto, porque as páginas são totalmente construídas enquanto o site está sendo desenvolvido. Em geral, seu custo inicial é menor, porém todas as futuras mudanças têm que ser realizadas por profissionais web. Portanto, um web site estático pode ser mais caro para manter, especialmente quando são necessárias alterações freqüentes nas páginas. As páginas de um web site dinâmico são construídas on the fly, ou seja, no momento em que as mesmas são requisitadas por um Navegador WEB. Sites dinâmicos, embora também sejam desenvolvidos por profissionais, podem ser mantidos diretamente pelo usuário cliente. Seus custos iniciais são mais altos, bem como o tempo de desenvolvimento, mas não é necessário pagar um profissional para fazer as freqüentes alterações necessárias nas páginas. Pode-se dizer que uma página Web dinâmica é qualquer página que tenha seu conteúdo alterado por um programa ou script no momento em que a mesma é requisitada. As linguagens de programação comumente utilizadas para a construção de páginas dinâmicas são PHP e JSP, Java, etc. Exemplos comuns de uma dinâmica são aquelas que permitem a postagem de conteúdo como, por exemplo, os blogs, facebook, Orkut, etc. Outros exemplos de páginas dinâmicas são aquelas que permitem a um usuário configurar preferências com relação ao tipo de informação apresentada. Documentos processados no cliente X Documentos processados no servidor. O navegador web (browser) interpreta apenas documentos HTML. Desta forma, linguagens de programação tais como PHP e ASP são chamadas de linguagens serverside, ou seja, são executadas no servidor web e não no navegador (cliente). Suponhamos que você tenha uma página chamada pesquisa.php que acessa um banco de dados e exibe uma lista de fornecedores no navegador. Se você visualizar o código fonte do resultado exibido no navegador, verá que temos apenas HTML.

3 3 O servidor web se encarrega de processar o código e enviar somente o que pode ser formatado e exibido pelo browser. Desta análise você chega à conclusão que os usuários de suas páginas nunca verão seus códigos php ou asp, mas sempre html. Veja na figura abaixo como um servidor responde as requisições dos navegadores. HTTP (Hypertext Transfer Protocol) O HTTP é Protocolo de Transferência de Hipertexto, que define padrões e regras de comunicação entre clientes e servidores para transferência de arquivos e paginas que são requisitadas por navegadores. WWW (World Wide Web) O WWW é presença constante no dia-dia de todos nós, colocado antes do endereço de web sites, essas três letras passam por muitas vezes despercebidas, sem que as pessoas saibam o que elas significam. A World Wide Web que em português significa "Rede de alcance mundial também conhecida como WWW e Web é um sistema de documentos que são interligados e executados na Internet. Os documentos podem estar em forma de vídeos, sons, hipertextos e figuras.

4 4 HTML HTML também chamado de HyperText Markup Language, é uma ferramenta utilizada para desenvolver páginas na internet, existem outras linguagens mais avançadas porém dificilmente você verá um site que não utilize HTML, portanto um dos primeiros passos para desenvolver qualquer coisa na internet é aprender HTML. Um documento HTML é um arquivo de texto comum que pode ser escrito através de qualquer editor de textos como, por exemplo, o Bloco de Notas e tem a terminação (extensão).htm ou.html. Tags"? Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />. A estrutura de um documento HTML <html> <head> <title> Titulo do Documento </title> </head> <body> texto, imagem, links, etc... </body> </html>

5 5 Comentários Cabeçalhos  <H1> Este é um cabeçalho de nível 1 </H1> <H2> Este é um cabeçalho de nível 2 </H2> <H3> Este é um cabeçalho de nível 3 </H3> <H4> Este é um cabeçalho de nível 4 </H4> <H5> Este é um cabeçalho de nível 5 </H5> <H6> Este é um cabeçalho de nível 6 </H6> Itálico <i>texto em itálico</i> Negrito <b>texto em Negrito</b> Sublinhado <u>texto em sublinhado</u> Parágrafos <p> Parágrafo sem Alinhamento </p> <p align="center">parágrafo alinhado ao centro</p> <p align="right">parágrafo alinhado à direita</p> <p align="left">parágrafo alinhado à esquerda</p> <p align="justify">parágrafo Justificado</p> Quebra de linha Quando queremos mudar de linha, usamos o elemento <BR/>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto. Linha horizontal Imagem <hr/> <img src="imagem.jpg"/>

6 6 Listas não numeradas <ul> </ul> <li>item </li> <li>item</li> <li>item </li> Listas numeradas <ol> </ol> <li>item </li> <li>item</li> <li>item </li> Tabelas: <table width="595" border="0"> <tr> <td>coluna 1</td> <td>coluna 2</td> <td>coluna 3</td> </tr> <tr> <td>coluna 1</td> <td>coluna 2</td> <td>coluna 3</td> </tr> </table>

7 7 Exercícios 1) Crie uma pagina HTML que contenha o seu nome escrito com a tag de cabeçalho <h1><h2><h3><h4><h5><h6>. 2) Crie uma pagina HTML que contenha o seu nome completo. Cada letra de seu nome deve estar seqüencialmente em negrito, itálico e sublinhado. 3) Crie uma pagina HTML que contenha o seu nome completo. Cada palavra de seu nome deve estar seqüencialmente em negrito, itálico e sublinhado. 4) Crie uma pagina HTML que contenha o seu nome completo em negrito, itálico e sublinhado. 5) Crie uma pagina HTML com listas não numeradas de: 10 filmes, 10 músicas, 10 Animais, 10 amigos e 10 Cidades. Cada item da lista deve estar seqüencialmente em negrito e itálico. 6) Crie uma pagina HTML com as listas numeradas de: 10 filmes, 10 músicas, 10 animais, 10 amigos e 10 Cidades. Cada item da lista deve estar seqüencialmente em negrito, itálico e sublinhado. 7) Crie uma tabela de preços de produtos de um supermercado. A tabela deve conter 10 produtos e seus preços. 8) Crie uma Pagina HTML que contenha seu nome Completo alinhado a direita utilizando a tag H1, pule duas linhas e acrescente uma foto sua. 9) Crie uma pagina HTML com uma foto sua alinhada no centro da pagina, pule uma linha e abaixo digite uma descrição da foto em itálico e negrito, a descrição da foto deve estar alinhada a direita. 10) Crie uma pagina HTML que contenha: seu nome em negrito alinhado a direita, pule duas linhas, escreva seu nome em itálico alinhado ao centro. 11) Crie uma pagina que explique o que é um navegador, um servidor, http, WWW e HTML. Utilize todas as tags apresentadas para formatar sua pagina da melhor forma possível, utilize imagens de demonstração.

8 8 HYPERLINKS Hiperlinks, ou simplesmente links, são a alma de uma página da internet. São eles que permitem o acesso fácil entre as diversas páginas (navegação) e mesmo a movimentação rápida dentro de um texto longo. <a href="caminho" target="destino">imagem ou Texto</a> O QUE É CSS? CSS é a abreviatura para Cascading Style Sheets(Folha de Estilos em Cascata). CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos. QUAL É A DIFERENÇA ENTRE CSS E HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. A SINTAXE BÁSICA DO CSS.

9 9 ENTENDENDO AS CORES RGB A expressão RGB vem de "red green blue", ou seja, "vermelho verde azul". As cores serão definidas pela quantidade de vermelho, de verde e de azul que adicionarmos. Um dos extremos é quando adicionarmos o máximo de cada cor que equivale ao branco. Por outro lado, se não acrescentarmos nenhuma cor teremos a cor preta. Veja agora o "segredo" para entender as cores. Dois dígitos representam apenas o componente de uma das cores, ou vermelho ou verde ou azul. Assim, os dois primeiros dígitos representam a quantidade de vermelho, os dois próximos a quantidade de verde, e os dois últimos a quantidade de azul. Como exemplo, veja a cor #cc6600. Você sempre começa com o caractere #. Depois, o componente vermelho está em cc, o componente verde está em 66 e o componente azul está em 00. a = 10 b = 11 c = 12 d = 13 e = 14 f = 15 Traduzindo: quando vemos o dígito c na verdade ele significa o nosso velho e conhecido 12. Se você lembrar que no sistema hexadecimal usamos os dígitos de 0 a F, ficará mais fácil.

10 10 COR DA LETRA E COR DO FUNDO FAMÍLIA DE FONTES [font-family] A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada. ESTILO DA FONTE [font-style] A propriedade font-style define a escolha da fonte em normal, italic ou oblique. PESO DA FONTE [font-weight]

11 11 A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold TAMANHO DA FONTE [font-size] O tamanho da fonte é definido pela propriedade font-size. Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir: EXEMPLO COMPLETO DE FONTE: ALINHAMENTO DE TEXTOS [text-align] Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (center). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.

12 12 FORMATANDO LINKS FUNDOS FUNDO background-color: #00ff00 Cor do Fundo background-image: url("butterfly.gif"); Imagem de Fundo background-repeat: Background-attachment: no-repeat; Background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat Scroll Formas de repetição da imagem de fundo A imagem rola com a página A imagem é fixa Fixed background-position: 2px 2px A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página background-position: 50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo na página background-position: top right A imagem é posicionada no canto superior direito da página AGRUPANDO ELEMENTOS (span e div)

13 13 As TAGs <span> e <div> são usadas para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento. O <span> geralmente é utilizado para formatar elementos únicos. O agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas: O <div> geralmente é utilizado para formatar um conjunto(bloco) de elementos.

14 14

15 15 Exercícios **Obs.: Todas as paginas devem conter formatação de estilo css e devem ser harmônicas visualmente falando. 1. Crie 3 paginas diferentes de e 3 bandas de música que mais goste, cada pagina deve conter: fotos dos artistas, nome das musicas mais famosas, informação sobre os artistas, lista de musicas do ultimo cd lançado. Formate tudo utilizando cores, tamanhos e fontes diferentes. Crie links entre as paginas de forma que qualquer uma das 3 paginas possa ser acessada de quaisquer uma delas. 2. Crie uma pagina HTML que funcione como uma galeria de fotos com 10 fotos suas. Esta pagina deve conter apenas miniaturas, ou seja, imagens pequenas, as fotos originais grandes devem ser abertas por meio de links que serão abertos em paginas ou abas novas. 3. Crie um site com 5 paginas, este site deve falar de você e deve conter os seguintes itens numa barra de menu: Quem sou eu? (que deve incluir uma foto) e algumas informações sobre você, Musicas e Bandas, Lugares (Lugares que gostaria de visitar ou já visitou), Fotos (Galeria de fotos), Contatos. 4. Crie um site com no mínimo 5 paginas para mostrar ao mundo algum assunto que você goste. O site de deve possuir um menu que permita navegar pelas 5 paginas.(caso não tenha idéia, invente uma empresa e crie um site para ela). 5. Crie uma site com paginas que expliquem o que é HTML, o que é um navegador WEB com links para as paginas dos principais navegadores disponíveis no mercado (Chrome, Firefox, Internet Explorer, Opera e Safari), o que é http, o que é WWW e o que é css. Estas paginas devem possuir um menu de navegação.