Programao web

Aula 1

introduo

Navegador : grande tradutor

Cdigo: base em html associado a outras linguagem prprias para desenvolvimento web

Linguagens popularesEsta uma pesquisa da codeevalhttp://blog.codeeval.com/2014#.VNEcr53F98H=

Esta uma pesquisa do IEE http://spectrum.ieee.org/static/interactive-the-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-linguagem-de-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: "tag final", no formato: "elementos vazios". Por exemplo: , , Atributo: um atributo define uma caracterstica ou propriedade de um elemento

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 e um elemento

As informaes sobre a pgina ficam no elemento

O que colocado no elemento o que ser visto no browser

O CSS adicionado dentro do elemento

Principais tags

inicio do texto em html finaliza com inicio de cabealho ... inicio do ttulo da pgina adoo de estilo .... ..... Envolve o corpo (texto e tags) do documento html uso de linguagem script - Cabealho nvel n para n de 1 a 6 paragrafo ... referencia curta ... referencia longa quebra de linha ... listas usa-se junto com ou ... listas ordenadas ... listas no ordenadas Veja tutoria html.pdf

mais

Links 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:

Informaes sobre o arquivo

href hipertext reference

Legenda Destino O que voc escreve em HTNL

Legal ou no? Legal.html Legal ou no?

Curriculo cv.html

Bonitinho.html Muito bonitinho!

Veja meu mini Mini-cooper.html

Vamos jogar ____________

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 Seria este um programa 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 queforam colocadas dentro dele. Podemos realizar operaes, pedirinformaes e executar comandos.

A pgina, por enquanto, s exibe textos fixos (chamados de contedoesttico). Podemos alter-la para exibir informaes diferentes, usandotags - atravs das tags realizamos marcas (markups) no texto paraenriquec-lo, para mudar a forma com que os dados so representados.Abra novamente seu arquivo html.

continuando

Meu primeiro teste!Seria isso um programa?No 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 linkConhea o site da nossa faculdade:Clique aqui! Salve o arquivo com essas duas novas linhas e abra a pgina no seu

navegador. Tag - pular linha

Usando java script

Acrescente este cdigo ao final de seu texto

alert("podemos fazer mais com JavaScript!");

problemas

A acentuao no est funcionando corretamente Use: 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 alertescrevendo 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 e , 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:

alert("ol mundo!");alert("esse meu segundo programa");

Verifique o resultado Crie um novo arquivo, o programa.html com o seguinte cdigo:

document.write("ol mundo! ");document.write("esse meu segundo programa");

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:

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));

Coloque o no final de cada linha para separar o texto document.write("Minha idade : " + 25 + "");

variaveis

Exemplovar ano = 2012;document.write("Eu nasci em : " + (ano - 25) + "");document.write("Adriano nasceu em : " + (ano - 26) + "");document.write("Paulo nasceu em : " + (ano - 32) + "");

Var palavras-chave de JavaScriptvar ano = 2012;document.write("ano");document.write(ano);

variveis

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);

document.write("A mdia de idade " + med);Substitua a ultima linha porDocument.write("A mdia de idade " + Math.round(media));Math.round arredondar o numero com casa decimais