Desenvolvimento WEB

Prof.MarceloCPSantos

marcelocpsantos@gmail.com

(Primeiraparte:HTML)

Ementa resumida

HTML/XHTML CSS JavaScript

Aulastericascomaturmatoda

Aulasprticascommetadedaturma

Bibliografia SOUZA,RICARDO,GRAIGOGANNELL,OGuia

EssencialDeWebDesignComCssEHtml,CIENCIAMODERNA,2009(12exemplaresnabiblioteca)

Silva,MaurcioSamy,JavaScriptGuiadoProgramador,NOVATEC,2010

POWERS,SHELLEY,AprendendoJavascript,NOVATEC,2010.

MORRISON,MICHAEL,UseACabea!Javascript,STARLINALTACONSULT,2008

Bibliografia FREEMAN,ERIC,ELISABETHFREEMAN,UseA

Cabea!HtmlComCssEXhtml,STARLINALTACONSULT,2008(2exemplaresnabiblioteca)

KRUG,STEVE,NaoMeFaaPensar,STARLINALTACONSULT,2008

,acessadoem04/07/2013.

SILVA,MAURICIOSAMY,ConstruindoSitesComCssE(x)html,NOVATEC,2007.(2exemplaresnabiblioteca)

w3schools.com

Avaliao Notafinalseramdiade4avaliaes

2testesprticos(100pontoscada) comconsulta individual tempolimitado

1trabalho(100pontos) publicaodeumsitecomtemaadefinir

Trabalhosemlaboratrio(100pontosnototal) Individual Cadaaulasersolicitadoumtrabalho

Evoluo da WEB

Informaesestticas Recursosmultimdia Possibilidadedeinterao AplicaesnaWEB(cloud) Websemntica

Padres Padressofundamentaisnainformtica

Teclado,conectores,TUDO.

NaWEBpadressoaindamaisimportantes TCP/IP HTTP HTML/XHTML DOM/InterpretadorJavaScript

GrandeproblemaparaodesenvolvedorWEB W3CWWWConsortium

HTML / CSS HTML/XHTML

Contedoeestrutura

CSS CascadingStyleSheets Formaeestilo

Vantagensdaseparao Melhororganizao Facilidadedemanuteno

HTMLCaractersticas Gerais

TEXTO Etiqueta(tag):

Minscula/Maiscula(casing) Quebrasdelinha ExtensoHTML

HTML Estrutura Bsica

Exerccio 1 Descubra como funciona!! CrieumdocumentoHTMLcomumttulodenvelum(marcadocom)HyperTextMarkupLanguageedoisttulosdenvel2TtuloseListas(marcadoscom)contendoexplicacessobreautilidadedosmarcadores,,...,(ttulos)e(listas)

Paralistas,saibaquealistatodadevesermarcadacomouecadaitemdalistacom.Noseutextoexpliqueadiferenaentreosmarcadorese.Consegueadivinharoquesignificamasletras?

Nosegundottulo,crieumalistacmtodososmarccadoreshtmlquevocjconhece.Qualseriaomarcadormaisapropriado:ou?

Corpo

Comentrios: Pargrafo: Destaque:,,..., Contato: Citaes:,, Listas:,, ListasdeDefinies:,, Links:

URL: Uniform Resource Locator

URLcompleta:

http://www.jf.ifsudestemg.edu.br/inst/noticias.html#ultimas

http:// protocolo www.jf.ifsudestemg.edu.br servidor Inst pastadoservidor noticias.html arquivodesejado #ultimas pontodoarquivoaserexibido

HTML / XHTML

HTML(HowToMeetLadies) XML(eXtensibleMarkupLanguage) HTML+XML=XHTML HTML5.0ouXHTML?

(Hyper Text Markup Language)

XHTML

Sminsculas Aninhamentorigoroso Estruturabemformada FecharTODASastags Elementosvaziosdevemserfechados Sintaxerigorosaparaatributos

DOCTYPE

HTML5:

Exerccio 2 Site Educacional

Crieumsitecomquestesdemltiplaescolha(4opes.

Asopesserolinks.Opocorretalevaprximaquesto.Opoincorretalevaaumapginaexplicandoarazodenoserestaaopocorreta.

Use:2nveisdedestaque,einformeseunomeemailparacontatonaprimeiraenatimapginadosite.

Cabealho SiteLegal

HTML5:

Marcadores para estrutura

Seo genrica

Blocos de navegao (menus)

Bloco que possui sentido sozinho. (um post, um artigo de feed,...)

Barra lateral

Grupo de ttulos

Cabealho contendo introduo ou um ttulo para a pgina

Rodap. Normalmente o endereo, cnpj, direitos autorais, etc

Horrio ou data.

Mais Marcadores

Marcasdereviso:, Enfase:, Separador: Blocosespeciais:,, Programas:,,, AbreviaturaseAcrnimos,

Imagens e Mapas Clicveis Imageminline:

Mapas:

Multimidia

HTML4:

plugins

HTML5

Objetos (tratados por plugins)

Senoconseguirvisualizar,

cliqueaqui.

mais completo

Seu navegador no pode exibir o vdeo. Download aqui.

Elementos definidos em XML

:frmulasmatemticasemMathML(MathematicalMarckupLanguage)

:ScalableVectorGraphics

Exemplo math

x

=

b

±

b2

4

⁢a⁢c

2⁢a

Exemplo svg

Desenho em bitmap

ViaJavaScript

Desenho em bitmap

function desenhar(){

// Obtemos o contextocontext=document.getElementById("x").getContext("2d")

//Iniciamos um novo desenho e movendo a canetacontext.beginPath()context.moveTo(150,50)

//Desenhamos as linhascontext.lineTo(220,250); context.lineTo(50,125); context.lineTo(250,125);context.lineTo(80,250); context.lineTo(150,50)

//O desenho no de verdade enquanto voc no mandar o contexto pint-lo.context.fillStyle="#ff0" // preenchimento amarelocontext.fill()context.strokeStyle="#f00" // linhas vermelhascontext.stroke()

}

desenhar

Mostrar e Esconder Detalhes(pouco implementado)

Copiando: 50%

Tamanho total:100KBTransferido:50Taxa:127KB/sNome do arquivo:HTML5.mp4

Menus(pouco implementado)

.. ..

Tabelas

,

,,

,,

Exerccio 2 Mapa clicvel

Crieummapadebitsparaaimagem

Seclicadoocaminhodadireita,exibaumatabelacom3cidadeseasdistnciasparaatingilasseclicadoocaminhodaesquerda,outras3cidadesdiferentes.

Crieummapadebitsparaaimagem

Seclicadoocaminhodadireita,exibaumatabelacom3cidadeseasdistnciasparaatingilasseclicadoocaminhodaesquerda,outras3cidadesdiferentes.

Utilizeomodeloaseguirparaastabelas(sempreocupaocomformatao).

Destinos

Cidade Distncia

Ub 50 km

Tabuleiro 20 km

Rio Novo 30 km

Formulrios

action=prog.php method=GET/method=POST Arquivos(enctype=multipart/formdata)

Formulrios

text password hidden radio checkbox submit/image reset file

Formulrios - labels

value

size

maxlength

label

NomedoCliente:

Formulrios

textodefault

rows cols wrap

Formulrios

Opo1

Opo2

...

multiple size

Novos marcadores HTML 5 para formulrios (1/2)

tel (+99(99)9999-9999):

search:

email:

url:

Novos marcadores HTML 5 para formulrios (2/2)

date:

number:

range:

color:

Exerccio 3Formulrios

Crieumformulrioparacadastramentodeclientesdeumsitedecomrcioeletrnicoutilizandopelomenosumavezcadaumdosmarcadoresparaformulrio.

Ajustecorretamenteotamanhodosinputs. Paraumdoscamposdeseuformulrio,crieumlinkparaumapginadeajudasobreopreenchimentodocampo.Porexemplo:

nome:ajuda

Frames

cols/rows:nrpixels,relativo(*),percentual(%)

name,noresize,scrolling

iFrames

Contedoaserexibidoseiframesnoforemsuportados

Aceitatarget

Marcadores genricos

Block

inline

Exerccio 4Frames

Crieumconjuntodepginasutilizandoframesqueexibaumatabelacomseuhorriodeaulaseumformulrioparaqueousurioinformenomeesexo,comoaseguir.

Exerccio4Frames

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40Slide 41Slide 42Slide 43Slide 44Slide 45Slide 46Slide 47