Programacao Web Inicio

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
http://blog.codeeval.com/2014#.VNEcr53F98H=
Esta uma pesquisa do IEE

http://spectrum.ieee.org/static/interactive-the-topprogramming-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-quallinguagem-de-programacaoescolher/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.html
Veja meu mini

Vamos jogar
<a href =_________>Muito bonitinho!</a>
Mini-cooper.html
<a href =megasena.html>____________</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="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. 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 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

Programacao Web Inicio

Enviado por

Direitos autorais:

Formatos disponíveis

Programacao Web Inicio

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programacao Web Inicio

Enviado por

Direitos autorais:

Formatos disponíveis

Programao web

Esta uma pesquisa do IEE

O que o mercado busca?

Ento qual linguagem escolher?

Veja a pgina web

Hypertext Markup Language - linguagem de marcao para hipertexto

Um elemento demarcado (usualmente) por 2 tags:

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

O que voc escreve em HTNL

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

Veja meu mini

<a href =_________>Muito bonitinho!</a>

Um arquivo HTML nos permite no apenas apresentar informaes que

Usando java script

Acrescente este cdigo ao final de seu texto

Verifique a sintaxe o navegador utilizado pode lhe

O alert a primeira forma de comunicao com o usurio.

Var palavras-chave de JavaScript

Você também pode gostar