Atividade PPSI I

Iae galera, vou postar o primeiro tópico da matéria de Padrões em Projetos de Sítios de Internet I

1 - A história da internet

A internet surgiu de pesquisas militares na década de 60, período da guerra fria, onde Estados Unidos e Rússia estavam em uma corrida tecnológica. O projeto inicial, desenvolvido pela A.R.P.A (Advanced Research Projects Agency), era o de descentralizar as informações contidas nas bases militares dos E.U.A, bem como permitir que essas bases pudessem se comunicar sem que houvesse uma central de comunicação para esse fim.

Mapa lógico da ARPANET de 1977

A mensagem era enviada por pequenos pacotes de dados que continham o endereço do computador destinatário e informações que permitiam a remontagem da mensagem.
A guerra em si nunca aconteceu e os E.U.A haviam criado o maior meio de comunicação já criado. 
Depois disso o governo dos Estados Unidos permitiu que universidades pudessem fazer parte da rede. Tendo problemas para administrar o crescente número de localidades que estavam entrando na rede, o governo então decidiu dividir a rede em duas: a MILNET, que estariam somente os locais militares, e a nova ARPANET, que comportaria as demais localidades. Com essa "liberdade" as universidades, entusiasmadas, somaram esforços para expandir e melhorar a rede.
Com o aumento exponencial de computadores que entravam na rede, e a criação de protocolos como o IP(internet protocol) o governo dos Estados Unidos se viu obrigado a investir em backbones( poderosos computadores conectados por linhas que tem a capacidade de dar vazão a grandes fluxos de dados, como 
canais de fibra óptica, elos de satélite e elos de transmissão por rádio). Além desses, existem também os backbones de empresas particulares, que conectam a internet redes menores quase anárquicas, permitindo que a internet não tenha dono.

Em 1992, o cientista Físico Tim Berners-Lee, do CERN, criou a World Wide Web.

Tim Berners Lee

Como era muito complicado acessar os arquivos na internet, já que a pessoa precisava saber comandos específicos para isso, Tim Berners Lee teve a ideia de criar um meio de hipertexto, onde a pessoa podia acessar os arquivos apenas através de cliques.


2 - Linguagem de Marcação versus Linguagem de Programação

Com sua ideia, Tim Berners Lee teve que teve quer criar um tipo específico de programa que interpretasse os hipertextos e os exibisse de maneira adequada ao usuário, sendo assim ele criou o HTML, Hiper Text Markup Language, que rodava em um navegador.
Considera-se que a grande virada da WWW começou com a introdução do Mosaic em 1993, um navegador gráfico desenvolvido por um time de desenvolvedores universitários. Antes de seu lançamento, os gráficos não eram frequentemente misturados com texto em páginas web.

Screenshot do Mosaic

Diferentemente das linguagens de programação, o HTML não possui comandos de decisão, tais como IF, ELSE e também não possui estruturas de laço de repetição, como FOR, WHILE, etc.
Portanto não é possível criar um programa com o HTML, mas sim, criar páginas que contenham informações.
No início somente era possível inserir textos nessas páginas, mas com o passar do tempo foi possível inserir fotos, áudio e vídeo, e com essas novas implementações foi necessário a criação de uma linguagem que ajudasse a dispor todas as informações sem que tudo ficasse bagunçado, foi ai que surgiu o CSS - Cascading Style Sheets.


3 - HTML

HTML significa: HyperText Markup Language, ou, Linguagem de marcação de hipertexto. Essa linguagem surgiu nas décadas de 80/90, quando Tim Berners Lee precisava de uma ferramenta para compartilhar acessar de forma simples as pesquisas de seu grupo de estudos.

a) Características:

Como dito anteriormente, o HTML não é uma linguagem de programação, ou seja não é possível criar um programa com ela mas é possível criar páginas para sites. Houve 4 versões antes da atual e muitas mudanças foram feitas para melhor, com a ajuda do W3C concomitantemente com o próprio Tim Berners Lee, então mostrarei as tags e os exemplos em HTML 5. Para criar uma página deve-se seguir uma estrutura básica com os comandos do HTML, esses comandos são chamados de "Tag's" abaixo está um exemplo simples dessa estrutura.

b) Estrutura básica de uma página

Para fazer uma página em HTML você só precisa de um editor de texto, para digitar as tags - óbvio - e um navegador para ver o resultado - também óbvio.
Eis um exemplo simples de estrutura básica em HTML 5:


<!DOCTYPE HTML>

<html>

<head><title>uma pagina HTML</title></head>

<body>




Olá mundo! ( ¬¬' profissionais em TI não tem criatividade para inventar outra frase para ser usada em exemplos, ou talvez seja uma tradição, vai saber...)




</body>

</html>
As tags são dispostas entre < >, sinal de maior e menor, as usadas acima são básicas - mas nem por isso devem ser ignoradas. 
A tag <html> marca o início da página, tudo o que irá aparecer deve obrigatoriamente estar dentro de <html>"seu conteudo aqui"</html>. Experimente fazer o exemplo acima no bloco de notas e salve como: xuxu.html (sim, o nome não importa e sim a extensão, exceto no Linux, mas isso é outra história)

c) Metadados: head, title, link, meta, style

A tag <head></head> é o cabeçalho onde você pode colocar tags específicas, tais como:

<title>,<style>,<base>,<link>,<meta>,<script> e <noscript>.

A tag <title></title> serve para você dar um título para sua página, esse título aparece na parte superior do navegador e é muito importante para os buscadores, pois através dela é possível identificar o conteúdo principal da página - quando você faz um título coerente sobre o assunto, claro.

<link>, essa tag serve para "puxar" outros arquivos a serem usados nessa página, um exemplo disso é quando precisamos importar um arquivo CSS (Cascading Style Sheets) para ser utilizado na formatação da página, como no exemplo abaixo:



<link rel="stylesheet" type="text/css" href="theme.css">




Tag <meta>, as informações que você colocar na tag <meta> não vão aparecer na página, mas os buscadores vão adorar, ela deixa seu site mais "encontrável". Alguns exemplos são mostrados abaixo:




<head>

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="Jefferson Kleber">

<meta charset="UTF-8">

</head>

até esse buscador encontrará sua página mais facilmente!

São muitas informações sobre sua página que irão aumentar a relevância dela nos motores de busca como o da google, sua página vai subir no ranking de pesquisa, pois é pois é pois é.

Tag <style>, essa serve para você colocar comandos em CSS nela, os comandos devem estar entre 
<style> </style>. Com isso você pode formatar os elementos da sua página na própria página (prática não recomendada, o melhor mesmo é importar um arquivo css)

d) Seções (sim, com Ç, que significa divisão, repartição), body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address

<body>, nela deverá conter tudo o que aparecerá no navegador, ou seja, onde ficará a parte visível
<article>, nessa tag deve conter um artigo com sentido próprio, ou seja, deve fazer sentido sem que se precise ver outra coisa do site. Exemplos:

• post de Fórum
• blog
• notícia
• comentário

<section>, define seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.

<nav>, deve conter o menu de navegação do site. Não se deve colocar todos os links na tag nav, mas sim apenas o(s) menu(s) de navegação mais importante(s).

<aside>, define um conteúdo além do conteúdo em que ela é colocada, por exemplo: coloca-se um <aside> do lado de um <article> para conter informações adicionais.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, definem tamanhos diferentes para fonte(usado em algo que se queira chamar atenção, como um título), onde <h1> é o maior e <h6> é o menor. A tag <hgroup> serve para agrupar diversos conteúdos que estiverem entre <h1>,<h2>... etc.

<header>, especifica um cabeçalho de um documento ou seção, nela deve conter um conteúdo introdutório às informações que a seguem, por exemplo um resumo de uma notícia antes da notícia em si. Pode-se ter vários <header> em um documento. A tag <header> não pode ser colocada dentro de um <rodapé>, <address> ou outro elemento <header>.

<footer>, é o rodapé do documento, nele geralmente se encontram informações sobre copyright, autor do documento, contato etc.

<address>, é usada para relacionar informações de contato do autor do documento ou de um artigo. Se a tag <address> for colocada dentro de um <article> ela serve somente para aquele <article>, mas se ela for usada dentro do <body> ela serve para o documento todo.

e) Comentário HTML

O comentário, tanto em html quanto em outras linguagens é importante para explicar o conteúdo a um outro desenvolvedor e para você mesmo, futuramente. Abaixo temos um exemplo de comentário:

<!DOCTYPE html>

<html>

<body>

<!--Isso é um comentário. Comentários não aparecem no navegador :) -->

<p>Isso é um parágrafo.</p>

</body>

</html>

f)Elementos de agrupamento: <p>,<hr>,<blockquote>,<ol>,<ul>,<li>,<dl>,<dt>,<dd>,<div>.

<p>, define um parágrafo em uma página, acrescenta uma margem entre o texto que está em <p> e os demais textos.

<hr>, mostra uma quebra temática no texto da página, geralmente mostra uma linha horizontal usada para separar os textos.

<blockquote>, deve ser usado toda vez que você usar um texto que venha de outra fonte, como um site. Ele deixa esse conteúdo separado do resto do texto com espaço entre eles.

<ol>, define uma lista ordenada, nela pode-se usar números ou letras, temos um exemplo abaixo:

<!DOCTYPE html>

<html>

<body>

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

</body>

</html>

E aqui, como a lista aparecerá:

1. Coffee
2. Tea
3. Milk

50. Coffee
51. Tea
52. Milk

<ul> É usado como <ol>, porém esta será uma lista não ordenada, ou seja, em vez de números ou letras, aparecerão bolinhas, quadradinhos e etc. Para separar os elementos.

<li> Define cada elemento dentro de uma lista (<ol> ou <ul>).

<dl>, <dt> e <dd> definem uma lista de definições onde; <dl></dl> define onde começa e onde acaba essa lista, <dt></dt> define um elemento na lista e <dd></dd> mostra a definição do elemento. Abaixo temos um exemplo:

<!DOCTYPE html>

<html>

<body>

<dl>

  <dt>Café</dt>

  <dd>Bebida preta e quente</dd>

  <dt>Leite</dt>

  <dd>Bebida branca e fria</dd>

</dl>

</body>

</html>

E abaixo como ela aparecerá no navegador:

Café

Bebida preta e quente

Leite

Bebida branca e fria

<div> define uma divisão em uma seção de uma página, para que seja estilizada por CSS. Essa tag é muito útil para separar e dispor qualquer elemento nas páginas HTML.

g) Elementos de texto semânticos: a, abbr, span, strong, em, br

<a>, define um hiperlink, a base do html abaixo temos um exemplo de como usá-lo:

<a href="http://www.w3schools.com">visite o  W3Schools!</a>

E no navegador aparecerá assim:

visite o W3Schools!

<abbr>, define uma abreviatura e colocando se title="", definindo o significado da abreviatura entre as aspas, quem usa sintetizadores de voz conseguirão saber o que a sigla significa.

A tag <span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Essa tag não fornece um efeito visual, para isso deve-se utilizar CSS.

<strong> dá destaque ao texto e o define como importante, geralmente o texto entre <strong> fica em negrito.
<em> dá ênfase a um texto, geralmente o texto fica em itálico.

<br> pula de linha, simples assim.

<img> coloca uma imagem na página. É importante usar o atributo alt="", onde você deve colocar o que é essa imagem entre as aspas, para que pessoas com deficiência visual possam saber o que essa imagem é. Abaixo temos um exemplo de como usar essa tag:
<img src="smiley.gif" alt="Carinha feliz" height="42" width="42">
 



Ufa... A prof caprichou no conteúdo hein...