Desenvolvimento Web

...

A ideia do Hipertexto surgiu a partir das enciclopédias digitais que já apresentavam a ideia de leitura não linear.

Principais Conceitos:

Nó: Uma unidade de conteúdo: um documento, um parágrafo do documento, etc.

Elo: Ligação entre dois nós.

Âncora: Ponto do documento onde inicia-se ou termina um elo.

Hipermídia

A hipermídia pode ser considerada uma extensão do Hipertexto, pois, inclui além de textos comuns: Figuras, sons, animações, vídeos

Torna mais rica a experiência de interatividade do usuário

Página WEB

É um documento da WEB baseado em hipertexto e hipermídia.

Geralmente escrito em linguagens de suporte a WEB.

Cada página é identificada por meio de um endereço eletrônico conhecido como URL.

URL

O URL (Localizador de Recursos Universal) é o endereço de um recurso disponível na WEB.

Um recurso pode ser: imagem, vídeo, música, Script PHP, página WEB

Um URL tem a seguinte estrutura: protocolo://servidor/diretório/recurso

http://www.uea.edu.br/turma/alunos.html

Tipos de Páginas WEB

Um sistema WEB é composto por um conjunto de páginas WEB do tipo:

Estáticas

Dinâmicas

Responsivas

Tais páginas podem estar hospedadas em diversos servidores espalhados na Internet.

Páginas WEB Estáticas

São páginas que mostram as mesmas informações cada vez que são acessadas.

Geralmente são previamente criadas por meio de uma ferramenta de autoria.

São gerados um conjunto de arquivos no formato HTML sendo armazenados em um Servidor WEB.

Páginas WEB Dinâmicas

Páginas onde as informações mudam com certa frequência. Toda vez que são acessadas.

Não existem fisicamente armazenadas no servidor por meio de arquivos HTML.

São geradas em tempo real, dinamicamente por meio de programas (Scripts) normalmente integrados com algum banco de dados.

Os programas executam operações como:

Consultar uma tabela de uma base de dados para obter uma lista de registros.

Inserir registros na tabela

Alterar registros

Excluir registros

Programas podem ser implementados em linguagens como PHP, Perl, JAVA, ASP, etc.

Páginas Responsivas

Páginas WEB que se adequam de forma automática a vários dispositivos ou ambientes de visualização.

Criação de Páginas WEB

As páginas têm como base a linguagem Hypertext Markup Languagem (HTML), significa Linguagem de Marcação de Hipertexto.

O HTML é composto por instruções denominadas de TAGS (elementos) que permitem definir estrutura de uma página WEB, e sua formatação.

Existem dois tipos de linguagens para desenvolvemos para WEB:

As linguagens client-site (ou frontend) e as linguagens server-side (ou backend).

As linguagens server-side são linguagens que o SERVIDOR entende.

Isso quer dizer que vai escrever um código onde o servidor vai processá-lo e então vai mandar para o seu navegador a resposta.

Exemplos de linguagens: PHP, ASP, JAVA, Ruby, etc.

Por exemplo: se criarmos um script em linguagem backend que apenas calcula a soma de 2+2, será o servidor (ou back, ou server) que calculará este resultado.

As linguagens client-side são linguagens onde apenas o seu NAVEGADOR vai entender.

Quem vai processar essa linguagem não é o servidor, mas o seu browser.

Exemplos de linguagens: HTML, CSS, JavaScript

Se fizermos esse cálculo em alguma linguagem front-end, como o JavaScript, quem calculará essa conta é o BROWSER do usuário. Por isso o termo cliente ou front.

Assim os profissionais que trabalham na interface do usuário, são chamados de Desenvolvedores front-end

Já aqueles que trabalham no core da aplicação, fazendo uma programação que somente o servidor irá entender são chamados de Desenvolvedores Back-end.

Desenvolvimento por camadas

Existem três separações no desenvolvimento web:

Informação: que fica com o código HTML, onde você vai dar significado à informação.

Formatação: que fica com o CSS, que é como você vai dar estilo a toda informação marcada com HTML.

Comportamento: que é como você vai controlar elementos do HTML com JavaScript e seus frameworks.

O HTML vai servir para marcar sua informação dando significado a ela.

Se você marca uma frase com a tag

, você está dizendo para leitores de telas para cegos, motores de buscas e browsers, que aquela frase se trata de um título importante. Você deu significado à este pedaço de texto.

Logo depois você precisará