Programao web

Programao webAula 1Josu FronerintroduoNavegador : grande tradutorCdigo: base em html associado a outras linguagem prprias para desenvolvimento web

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

Esta uma pesquisa do IEE http://spectrum.ieee.org/static/interactive-the-top-programming-languagesLinguagens

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 Java716 para programador WEB626 para .NET325 vagas para PHP150 vagas para Delphi127 para C121 vagas para C#70 vagas para c++69 vagas para Android37 vagas Ruby27 vagas para Asp e Asp.net21 vagas Python18 vagas HTML17 vagas para Javascript13 para Visual Basic4 vagas Css1 vaga Perle as demais para programadores sem especificao de linguagem.

Ento qual linguagem escolher?Verificar custo benefcio: avaliar qual o custo de desenvolvimento, manuteno e disponibilizaoLeia mais em: E agora, qual linguagem de Programao escolher? http://www.devmedia.com.br/e-agora-qual-linguagem-de-programacao-escolher/15444#ixzz3Rfbppd71Focar em uma mas expandir para outraslinguagens 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/htmlVer php: http://www.oficinadanet.com.br/secao/phpVeja o cdigo

Veja a pgina web

HtmlHypertext Markup Language - linguagem de marcao para hipertextoHTML 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 apresentaoHtmlAs 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 browserO 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

1. ou

1. ...

listas ordenadas

...

listas no ordenadasVeja tutoria html.pdf

maisLinks Cria um link e inclui atributos em comumhref O URL do documento que ser vinculado a este. Para e-mail: mailto e link externo: httpname O nome da ncoratarget Identifica a janela ou local em que o link dever ser aberto: blank, self, top, parentrel Define os tipos de link que avanamrev Define os tipos de link que revertem a aoacesskey Atribui uma tecla de atalho para este elementoshape Para uso com formas de objetocoords Para uso com formas de objetotabindex Determina a ordem das guiasonclick um evento JavaScriptonmouseover um evento JavaScriptonmouseout um evento JavaScriptatributosManeira de especificar informaes, detalharPersonalizar um elementoDevem ser escritos da seguinte forma:Informaes sobre o arquivohref hipertext referenceLegendaDestinoO que voc escreve em HTNLLegal ou no?Legal.htmlLegal ou no?Curriculocv.htmlBonitinho.htmlMuito bonitinho!Veja meu miniMini-cooper.htmlVamos jogar____________exerccioComente 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 HtmlEditor de texto Escreva: Meu primeiro testeSeria este um programaSalve o arquivo m_pag.html melhor criar uma pasta para voce e salvar o arquivo dentro delaUm 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.

continuandoMeu 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 linhaMeu primeiro teste!Seria isso um programa?No consigo fazer nada alm de mostrar contedofixo?Conhea o site da nossa editora:Clique aqui!

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

16Usando java scriptAcrescente este cdigo ao final de seu texto

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

problemasA acentuao no est funcionando corretamenteUse: Isto utilizado para o navegador se adequarVerifique a sintaxe o navegador utilizado pode lhe auxiliar neste trabalho, alguns erros no aparecem como se escrever alert "chamando sem parenteses";Chrome Ferramentas console JavaScriptMonzila - 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 preferenciaExerccio1) 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 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-seO 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 resultadoCrie 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?

maisCrie 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 textodocument.write("Minha idade : " + 25 + "
");variaveisExemplovar 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