Aplicações para Internet

Aplicações para

Internet

Material Teórico

Responsável pelo Conteúdo:

Prof. Ms. Alexander Gobbato Paulino Albuquerque Revisão Textual:

Profa. Ms. Fátima Furlan

• Conceitos Básicos de HTML • Introdução as Tags de HTML

• Explicação do Conceito de Cliente/Servidor • Ferramentas disponíveis

Conhecer:

· Conceitos Básicos de Internet e sua História;

· Tecnologias atuais e emergentes para desenvolvimento de aplica-ções para Internet;

· Conceitos básicos da arquitetura cliente-servidor. · O que é o HTML? · O W3C e suas especificações · Estruturação e conteúdo · Corpo básico

OBJETIVO DE APRENDIZADO

Conceitos Básicos do HTML

Orientações de estudo

Para que o conteúdo desta Disciplina seja bem aproveitado e haja uma maior aplicabilidade na sua formação acadêmica e atuação profissional, siga algumas recomendações básicas:

Assim:

Organize seus estudos de maneira que passem a fazer parte da sua rotina. Por exemplo, você poderá determinar um dia e horário fixos como o seu “momento do estudo”.

Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma alimentação saudável pode proporcionar melhor aproveitamento do estudo.

No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua interpretação e auxiliarão no pleno entendimento dos temas abordados.

Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem. Organize seus estudos de maneira que passem a fazer parte

Mantenha o foco!

Evite se distrair com

as redes sociais.

Mantenha o foco!

Evite se distrair com

as redes sociais.

Determine um

horário fixo

para estudar.

Aproveite as

indicações

de Material

Complementar.

Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma

Não se esqueça

de se alimentar

e se manter

hidratado.

Aproveite as

Conserve seu

material e local de

estudos sempre

organizados.

Procure manter

contato com seus

colegas e tutores

para trocar ideias!

Isso amplia a

aprendizagem.

Seja original!

Nunca plagie

UNIDADE

Conceitos Básicos do HTML

Introdução

O que preciso saber para desenvolver aplicações para a WEB?

• Entender o funcionamento básico da execução dessa aplicação

• Conhecer as linguagens que são executadas na máquina cliente (HTML, CSS, JavaScript) • Conhecer alguma linguagem que rode no servidor para aplicações mais robustas (PHP,

ASPX, JSP, etc)

• Saber trabalhar com banco de dados (MySQL, Oracle, SQLServer, etc)

• Ter um pouco de criatividade para se trabalhar com os layouts das suas aplicações

Explor

A Evolução da WEB: https://goo.gl/F09OS

Explor

Ambiente Cliente/Servidor

Pensando nos elementos básicos para fornecer informação através da Web, temos:

Cliente Servidor

Conexão

Servidor Web Protocolo HTTP Figura 1

Quando falamos em desenvolvimento web podemos ter duas vertentes, podemos programar client side e/ou server side.

Client Side ou “Lado Cliente” são programas executados na máquina cliente, ou seja, os browsers são os responsáveis pela execução/interpretação das linguagens.

Cliente

HTML, CSS, Javascript e XML

Figura 2

9 Server Side ou “Lado Servidor” são programas e instruções executadas em

uma máquina servidor, é necessário um servidor, por exemplo, IIS da Microsoft, GlassFish e Apache que suportem os tipos de linguagens utilizadas, como ASPX, JSP e PHP. Essas linguagens são compiladas e gerados arquivos que somente os computadores podem interpretar. No servidor ainda podemos ter os bancos de dados que são softwares responsáveis por todo armazenamento de informações em estrutura de tabelas e relacionadas entre si.

Servidor

PHP, JSP, ASPX e Banco de Dados

(MySQL, Oracle, SQLServer)

Figura 3

Então em resumo, podemos trabalhar tanto com programações cliente e/ou programações no servidor.

O que é HTML?

O HTML (Hypertext Markup Language) é conhecido como uma Linguagem de Marcação de Hipertexto. O HTML é uma linguagem que se propõe em distribuir informação globalmente e pode ser entendido por diversos meios de acesso, ele foi desenvolvimento por Tim Bernes-Lee .

Um documento HTML é um documento texto que pode ser produzido utilizando qualquer editor de texto. O conteúdo HTML de uma página é processado por um Navegador (Internet Explorer, Chrome etc.)

O HTML define um conjunto de elementos para a marcação de uma página Web: cabeçalho, parágrafo, lista, tabelas, entre outros. Cada elemento possui sua função específica e são comumente chamados de tag (marca ou marcadores).

Ferramentas:

Para testar nossos arquivos:

Figura 4

UNIDADE

Conceitos Básicos do HTML

Para criar nossos códigos podemos utilizar qualquer editor de texto puro ou algumas ferramentas próprias para o desenvolvimento Web

· Microsoft Expression Web 4 ou · Brackets ou

· Bloco de notas ou · NetBeans ou · Notepad++

Brackets

Esta ferramenta é gratuita (desenvolvida pela Adobe), para baixar acesse o link http://brackets.io/ (existe uma versão portable)

Figura 5

Notepad ++

Esta ferramenta é gratuita, para baixar acesse o link http://notepad-plus-plus. org/ (existe uma versão portable)

Figura 6 10

11

Bloco de Notas

Ferramenta que já vem com o sistema Windows, muito simples de utilizar mas não ajuda em nada a criação do código.

Figura 7

Versões

A versão mais significativa para nossa realidade foi o HTML 4.01 que foi publicado como uma recomendação do W3C em 1999.

» HTML 5 - sua especificação começou em 2008 e está praticamente finali-zada, porém a W3C ainda está analisando algumas tags.

W3C Brasil: https://goo.gl/VHQ5n

Explor

Sobre a W3C

O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.

Para mais informações, contate: https://goo.gl/5JL1jK

Explor

UNIDADE

Conceitos Básicos do HTML

Marcas (tags)

Todo documento HTML possui marcadores, conhecidos e chamados como tags , que são palavras inseridas entre os parênteses angulares (< e >), esses marcadores são os comandos de formatação da linguagem. Um elemento é formado por um nome de marcador (tag), atributos, valores e filhos.

Exemplo de elemento único: <hr />

Exemplo de elemento composto:

<a href=”http://www.cruzeirodosul.edu.br/”>Universidade Cruzeiro do Sul</a> » <a> é o marcador de abertura

» </a> é o marcador de fechamento

» href é o atributo onde está definido para qual página será direcionado ao receber o evento do clique.

Estrutura Básica de um Documento

A estrutura básica de um documento HTML possui as seguintes informações:

Figura 8

Os marcadores HTML não são case sensitive, o que isso quer dizer?

Quer dizer que tanto faz escrevermos em maiúscula ou minúscula que o navegador irá “entender”; <HTML>, <Html>, <html> ou <HtMl>.

13 Existem vários marcadores, mas para se construir uma página é essencial e

recomendado que as seguintes tags estejam inseridas no documento.

Os marcadores básicos são:

» <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.

» <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.

» <body>: define o conteúdo principal, o corpo do documento. Esta é a par-te do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.

Cabeçalho

» <title>: define o título da página, que é exibido na barra de título de qual-quer navegador.

» <style type=”text/css”>: define formatação, para isso se utilizada marcado-res de estilos chamado de css ou folha de estio

» <script type=”text/javascript”>: define programação de certas funções em página com scripts.

» <link>: define ligações da página com outros arquivos.

» <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor etc.

Corpo

Dentro do corpo podemos encontrar outros vários marcadores que irão estruturar o documento, todo elemento que será exibido no browser deve ser inserido na tag <body> por exemplo, vejamos algumas tags.

» <br />: quebra de linha.

» <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>, já os cabeçalhos das colunas são criados com os marcadores <Thead><TH> e os rodapés com <TFooter><TR><TD>).

» <div>: determina uma divisão na página a qual pode possuir variadas for-matações.

» <img />: imagem.

» <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.

» <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter ou-tros códigos a serem distribuídos.

UNIDADE

Conceitos Básicos do HTML

Estrutura de um Documento utilizando Tags do HTML5

Figura 9

» <!DOCTYPE html>: Especifica quais são as regras para a linguagem de marcação, para que os navegadores processem o conteúdo corretamente. Nesse caso estamos informando que utilizaremos uma marcação para hmtl5 Observem que dentro das tags <head> temos as tags <title>, <meta>, <link> e <script>

Figura 10

» <title>: define o título da página, que é exibido na barra de título de qual-quer navegador.

» <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor etc. O atributo name=”description” e content são utilizados para adicionarmos informações pertinentes a página, essas informações podem ser utilizados pelos mecanismos de busca para então retornar o resultado de pesquisa. O atributo charset é utilizado para a confi-guração de caractere, muitos países não possuem caracteres especiais como acento agudo, circunflexo. O UTF-8 trata justamente esses itens, ou seja, se a sua página for acessada no Japão, os caracteres com acentos não serão trocadas por outra letra qualquer.

15

» <link>: define ligações da página com outros arquivos. Nesse caso, a página html está fazendo um ligação com outra página de formatação de estrutura, conhecida com css.

» <script>: define programação de certas funções em página com scripts. No caso desse exemplo, estamos fazendo uma chamado para um arquivo somente com programação javascript que será executada na página html do navegador.

Figura 11

» <body>: todo elemento que será exibido no browser deve ser inserido nessa tag.

» <header>:O elemento <header>representa um contêiner para a introdução de um conteúdo ou para um conjunto de itens de navegação, geralmente são acompanhadas das tags <h1> ... <h6>.

» <article>:A tag <article> especifica conteúdo independente e autônomo. Um <article> deve fazer sentido por conta própria e deve ser possível distri-buí-lo de forma independente do resto do site.

» <footer>: A marca <footer> define um rodapé para um documento ou seção.

UNIDADE

Conceitos Básicos do HTML

Quando abrimos uma página HTML em um navegador, o navegador irá interpretar as tags, ou seja, irá fazer uma análise sintática, definindo como cada parte do texto será apresentada. Um problema comum no desenvolvimento de páginas HTML desde o seu surgimento e outras tecnologias como CSS, é a compatibilidade entre os navegadores, ou seja, uma página desenvolvida em HTML5 pode rodar somente no Chrome, por exemplo, ou aparecer de um jeito no Internet Explorer e de outro no Firefox, também temos que tomar cuidado quando falamos em dispositivos ou sistemas diferentes, como visualizar nossa página em um celular. Nem todos os aparelhos estão aptos a rodar os códigos atuais.

Motores de renderização é o mecanismo utilizado pelos navegadores para processar o código das páginas web, os principais motores dos principais navegadores são:

» Webkit (é o mais compatível com HTML 5) – Safari, Chrome

» Gecko – Firefox

» Trident – Internet Explorer

Devemos sempre procurar deixar nossos códigos compatíveis com esses motores para que possamos atingir o maior número possível de usuários.

O WebKit é uma ferramenta utilizada nos navegadores Safari e Chrome. O WebKit é um motor de renderização.

Gecko é um motor de layout desenvolvido pelo Projeto Mozilla. Trata-se de um motor com código aberto utilizado em aplicações construídas pela Mozilla Foundation e pela Mozilla Corporation, como o navegador mundialmente conhecido Firefox e o SeaMonkey.

Explor

Vejam um exemplo de utilização de motor de renderização. div{ -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height:50px; width: 150px; text-align:center; background-color: green; }

Observe que para cada browser devemos utilizar o renderizador para que o efeito final seja o mesmo. Essa codificação deve ser feita utilizando o css, isso não é um tag html.

17 Figura 12

Resultado no Internet Explorer

Figura 13 Resultado no Google Chrome

Figura 14

UNIDADE

Conceitos Básicos do HTML

Resultado no Firefox

Figura 15

Todo desenvolvedor web deve se preocupar com essa formatação a fim de garantir que o resultado do site seja igual independente do browser

Explor

19

Material Complementar

Indicações para saber mais sobre os assuntos abordados nesta Unidade:

Sites HTML5 - Tutorial https://goo.gl/N0ra HTML5 - Training https://goo.gl/vHV69g Vídeos HTML5

Curso de HTML (aula 1) Iniciantes / básico - Introdução e estrutura do html

https://youtu.be/5YdekrQOskM

UNIDADE

Conceitos Básicos do HTML

Referências

SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. São Paulo: Novatec, 2008.

SILVA, M. S. HTML 5: a linguagem de marcação que revolucionou a web. São Paulo: Novatec, 2011.