Programao web
Aula 1
introduo
Navegador : grande tradutor
Cdigo: base em html associado a outras
linguagem prprias para desenvolvimento
web
Linguagens populares
Esta uma pesquisa da codeeval
[Link]
Esta uma pesquisa do IEE
[Link]
Linguagens
O que o mercado busca?
Em 2014 em um endereo de vagas para profissionais de programao, houve cerca de 4 mil vagas oferecidas,
a distribuio das vagas foi a seguinte:
974 so destinadas a especialistas na linguagem Java
716 para programador WEB
626 para .NET
325 vagas para PHP
150 vagas para Delphi
127 para C
121 vagas para C#
70 vagas para c++
69 vagas para Android
37 vagas Ruby
27 vagas para Asp e [Link]
21 vagas Python
18 vagas HTML
17 vagas para Javascript
13 para Visual Basic
4 vagas Css
1 vaga Perl
e as demais para programadores sem especificao de linguagem.
Ento qual linguagem escolher?
Verificar custo benefcio: avaliar qual o custo de
desenvolvimento, manuteno e disponibilizao
Leia mais em: E agora, qual linguagem de Programao
escolher? [Link]
Focar em uma mas expandir para outras
linguagens PHP, C#, Java script, Html, Virtual Basic e
Java...
Ver java script: [Link]
Ver html: [Link]
Ver php: [Link]
Veja o cdigo
Veja a pgina web
Html
Hypertext Markup Language - linguagem de marcao para hipertexto
HTML derivada da linguagem pioneira de marcao SGML (Standard
Generalized Markup Language) e foi criada por Tim Berners Lee (o idealizador da
WWW) especficamente para a composio e apresentao de documentos na
Web. A evoluo cronolgica dessas linguagens foi a seguinte:
SGML HTML 1.0 HTML xx XML HTML 4.01 XHTML.
Um documento HTML um conjunto (mais precisamente uma hierarquia) de
elementos :
Um elemento demarcado (usualmente) por 2 tags:
"tag inicial", no formato: <nome-do-elemento atributos(opcional) >
"tag final", no formato: </nome-do-elemento>
"elementos vazios". Por exemplo: <br>, <hr>, <img>
Atributo: um atributo define uma caracterstica ou propriedade de um elemento
<img src="[Link]" alt="sunburst graphic" width="32" height="21" align="left">
Html responsvel pela estrutura da pag web, j a exibio fica por conta do CSS
que estilizar a apresentao
Html
As pginas devem sempre possuir um
elemento HTML em conjunto com um
elemento <head> e um elemento <body>
As informaes sobre a pgina ficam no
elemento <head>
O que colocado no elemento <body> o que
ser visto no browser
O CSS adicionado dentro do elemento
<style>
Principais tags
<Html> inicio do texto em html finaliza com </html>
<head> inicio de cabealho <title>...</title> inicio do ttulo da pgina
<style type= text/css> adoo de estilo
</style>....</head>
<body>.....</body> Envolve o corpo (texto e tags) do documento html
<script> </script> uso de linguagem script
<hn> </hn> - Cabealho nvel n para n de 1 a 6
<p> </p> paragrafo
<q>...</q> referencia curta
<blockquote> ...</blockquote> referencia longa
<br> quebra de linha
<li>...</li> listas usa-se junto com <ol> ou <ul>
<ol>...</ol> listas ordenadas <ul>...</ul> listas no ordenadas
Veja tutoria [Link]
mais
Links <a> </a>
Cria um link e inclui atributos em comum
href O URL do documento que ser vinculado a este. Para e-mail: mailto e
link externo: http
name O nome da ncora
target Identifica a janela ou local em que o link dever ser aberto: blank, self,
top, parent
rel Define os tipos de link que avanam
rev Define os tipos de link que revertem a ao
acesskey Atribui uma tecla de atalho para este elemento
shape Para uso com formas de objeto
coords Para uso com formas de objeto
tabindex Determina a ordem das guias
onclick um evento JavaScript
onmouseover um evento JavaScript
onmouseout um evento JavaScript
atributos
Maneira de especificar informaes, detalhar
Personalizar um elemento
Devem ser escritos da seguinte forma:
<a href = [Link]>Informaes sobre o arquivo</a>
href hipertext reference
Legenda
Destino
O que voc escreve em HTNL
Legal ou no?
[Link]
<a href =[Link]>Legal ou no?</a>
Curriculo
[Link]
[Link]
Veja meu mini
Vamos jogar
<a href =_________>Muito bonitinho!</a>
[Link]
<a href =[Link]>____________</a>
exerccio
Comente para que serve cada linha de cdigo
html que segue:
Vamos comear?
Voc sabe verificar o cdigo de pginas em seu navegador? Ctrl + u
(chrome, monzila, IE...)
Primerio veremos como criar arquivos Html
Editor de texto
Escreva: Meu primeiro teste
<h3>Seria este um programa</h3>
Salve o arquivo m_pag.html melhor criar uma pasta para voce e salvar o
arquivo dentro dela
Um arquivo HTML nos permite no apenas apresentar informaes que
foram colocadas dentro dele. Podemos realizar operaes, pedir
informaes e executar comandos.
A pgina, por enquanto, s exibe textos fixos (chamados de contedo
esttico). Podemos alter-la para exibir informaes diferentes, usando
tags - atravs das tags realizamos marcas (markups) no texto para
enriquec-lo, para mudar a forma com que os dados so representados.
Abra novamente seu arquivo html.
continuando
Meu primeiro teste!
<h3>Seria isso um programa?</h3>
<strong>No</strong> consigo fazer nada alm de mostrar contedo
fixo?
Salve o arquivo e abra novamente a pgina (se ela j estiver aberta,
basta clicar em atualizar no seu navegador)
Continuando no texto html : adicionar um link
Conhea o site da nossa faculdade:
<a href="[Link]
aqui</a>!
Salve o arquivo com essas duas novas linhas e abra a pgina no seu
navegador.
Tag <br> - pular linha
Usando java script
Acrescente este cdigo ao final de seu texto
<script>
alert("podemos fazer mais com JavaScript!");
</script>
problemas
A acentuao no est funcionando corretamente
Use: <meta charset="UTF-8">
Isto utilizado para o navegador se adequar
Verifique a sintaxe o navegador utilizado pode lhe
auxiliar neste trabalho, alguns erros no aparecem
como se escrever alert "chamando sem parenteses";
Chrome Ferramentas console JavaScript
Monzila - menu Ferramentas (Tools), Web Developer e
depois Console Web
Lembre de sempre organizar suas pastas por
significado e colocar as imagens em um local nico de
preferencia
Exerccio
1) Edite o seu arquivo e adicione mais um alert. Alm da mensagem
podemos fazer mais com JavaScript!, coloque um outro alert
escrevendo a data que voc comeou a programar. Lembre-se de
salvar o arquivo e abri-lo no navegador. Caso seu navegador j esteja
aberto com a sua pgina, basta atualiz-la.
2) Realize outros testes. Voc pode ter mais de uma seo com a tag
<script> e </script>, colocando outros alert l? importante ser
curioso com seu prprio programa, ir alm do que foi sugerido,
explorando as outras possibilidades e limites.
Voc pode realizar esses testes em outros arquivos, para no misturar
com os exerccios que j esto como voc quer. Para isso, basta criar
um novo arquivo, com outro nome, como meus_testes.html. Lembrese de evitar a tentao de copiar e colar um cdigo que voc j fez.
importante que voc pratique escrever seus cdigos.
Comunicando-se
O alert a primeira forma de comunicao com o usurio.
Como podemos fazer para enviar duas mensagens? Basta executarmos duas vezes
essa instruo. Crie um novo arquivo, que ser gravado
comecando_javascript.html, e coloque o seguinte contedo:
<script>
alert("ol mundo!");
alert("esse meu segundo programa");
</script>
Verifique o resultado
Crie um novo arquivo, o [Link] com o seguinte cdigo:
<script>
[Link]("ol mundo! <br>");
[Link]("esse meu segundo programa");
</script>
Observe [Link]("25" + "25"); diferente de [Link](25+ 25);
O que ocorre?
mais
Crie um arquivo testando_idades.html e vamos revisar o
que j aprendemos.
Coloque o cdigo que calcula a mdia das idades:
<script>
[Link]("Minha idade : " + 25);
[Link]("A soma das nossas idades : ");
[Link](25 + 32 + 26);
[Link]("A mdia das nossas idades : " +
((25 + 32 + 26) / 3));
</script>
Coloque o <br> no final de cada linha para separar o texto
[Link]("Minha idade : " + 25 + "<br>");
variaveis
Exemplo
var ano = 2012;
[Link]("Eu nasci em : " + (ano - 25) + "<br>");
[Link]("Adriano nasceu em : " + (ano - 26) +
"<br>");
[Link]("Paulo nasceu em : " + (ano - 32) +
"<br>");
Var palavras-chave de JavaScript
var ano = 2012;
[Link]("ano");
[Link](ano);
variveis
<script>
var eu = 25;
var adriano = 26;
var paulo = 32;
var total = eu + adriano + paulo;
var media = total / 3;
[Link]("A mdia de idade " + media);
</script>
[Link]("A mdia de idade " + med);
Substitua a ultima linha por
[Link]("A mdia de idade " + [Link](media));
[Link] arredondar o numero com casa decimais
