Programação Web

Programao web
Aula 1
Josu Froner
introduo
Navegador : grande tradutor
Cdigo: base em html associado a
outras linguagem prprias para
desenvolvimento web
Linguagens populares
Esta uma pesquisa da codeeval
http://blog.codeeval.com/2014#.VNEcr53F98H
=
Esta uma pesquisa do IEE

http://spectrum.ieee.org/static/interactivethe-top-programming-languages
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 Asp.net
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?
http://www.devmedia.com.br/e-agora-qual-linguagemde-programacao-escolher/15444#ixzz3Rfbppd71
Focar em uma mas expandir para outras
linguagens PHP, C#, Java script, Html, Virtual Basic e
Java...
Ver java script: http://www.oficinadanet.com.br/secao/javascript
Ver html: http://www.oficinadanet.com.br/secao/html
Ver php: http://www.oficinadanet.com.br/secao/php
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="sun.jpg" 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 html.pdf
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 = arquivo.html>Informaes sobre o
arquivo</a>
href hipertext reference
Legenda
Destino
O que voc escreve em HTNL
Legal ou
no?
Legal.html
<a href =Legal.html>Legal ou no?

</a>
Curriculo
cv.html
Bonitinho.htm <a href =_________>Muito bonitinho!
</a>
l
Veja meu
mini
Minicooper.html
<a href
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="http://www.lasalle.edu.br/faculdade/manaus/">Clique
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. Lembre-se 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 programa.html com o seguinte cdigo:
<script>
document.write("ol mundo! <br>");
document.write("esse meu segundo programa");
</script>
Observe document.write("25" + "25"); diferente de document.write(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>
document.write("Minha idade : " + 25);
document.write("A soma das nossas idades : ");
document.write(25 + 32 + 26);
document.write("A mdia das nossas idades : " +
((25 + 32 + 26) / 3));
</script>
Coloque o <br> no final de cada linha para separar o texto
document.write("Minha idade : " + 25 + "<br>");
variaveis
Exemplo
var ano = 2012;
document.write("Eu nasci em : " + (ano - 25) + "<br>");
document.write("Adriano nasceu em : " + (ano - 26) +
"<br>");
document.write("Paulo nasceu em : " + (ano - 32) +
"<br>");
Var palavras-chave de JavaScript

var ano = 2012;
document.write("ano");
document.write(ano);
variveis
<script>
var eu = 25;
var adriano = 26;
var paulo = 32;
var total = eu + adriano + paulo;
var media = total / 3;
document.write("A mdia de idade " + media);
</script>
document.write("A mdia de idade " + med);
Substitua a ultima linha por
Document.write("A mdia de idade " + Math.round(media));
Math.round arredondar o numero com casa decimais

Programação Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programação Web

Uploaded by

Copyright:

Available Formats

Programao web

Esta uma pesquisa do IEE

O que o mercado busca?

Ento qual linguagem

Veja a pgina web

<Html> inicio do texto em html finaliza com </html>

O que voc escreve em HTNL

<a href =Legal.html>Legal ou no?

Um arquivo HTML nos permite no apenas apresentar informaes

Usando java script

Verifique a sintaxe o navegador utilizado pode lhe

Var palavras-chave de JavaScript

You might also like