o client (html / css / javascript )

Download O  Client  (HTML / CSS /  Javascript )

Post on 12-Jan-2016

24 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

O Client (HTML / CSS / Javascript ). Agenda. Fundamentos HTTP HTML CSS Javascript AJAX. A Web. Era pra ser: Um sistema de obtenção de documentos “ hiperligados ” Documentos Sem estado Confiável Acadêmica. Acabou virando : A plataforma de informação global Aplicações - PowerPoint PPT Presentation

TRANSCRIPT

Slide 1

O Client (HTML / CSS / Javascript)

1AgendaFundamentosHTTPHTMLCSSJavascriptAJAXDesenvolvimento web com Java# 2A WebEra pra ser:Um sistema de obteno de documentos hiperligadosDocumentosSem estadoConfivelAcadmica

Acabou virando:A plataforma de informao globalAplicaesCom estadoInseguraComercialDesenvolvimento web com Java# 3A WebDesenvolvimento web com Java# 4

?Client RequestServerResponseA LasanhaDesenvolvimento web com Java# 5APP ServerMaquina Virtual JavaSistema OperacionalDispositivosRedeAPPJSE APPJEE APPD E V E L O P E RD E P L O Y E RAplicaoTransporteRedeEnlaceFsicaO HTTPDesenvolvimento web com Java# 6

O HTTP

Desenvolvimento web com Java# 7O HTTP

Desenvolvimento web com Java# 8O HTTP

Desenvolvimento web com Java# 9Exerccio: FirebugDesenvolvimento web com Java# 10

NavegadoresDesenvolvimento web com Java# 11

Interpretador de:HTMLCSSJavascriptRSSXULFFExtensesJava AppletsFlashActiveXIEHTMLHyper Text Markup LanguageLinguagem de Marcao de HipertextoDesenvolvimento web com Java# 12Sistema de interpretao de simbolostexto marcadoTexto + links + audio + video + Exemplo

Desenvolvimento web com Java# 13

Tipos de TagsHTML 4.01 Spec (http://www.w3.org/TR/html4/), 9-18:Text - Paragraphs, Lines, and PhrasesLists - Unordered, Ordered, and Definition ListsTablesLinks - Hypertext and Media-Independent LinksObjects, Images, and AppletsStyle Sheets - Adding style to HTML documentsAlignment, font styles, and horizontal rulesFrames - Multi-view presentation of documentsForms - User-input Forms: Text Fields, Buttons, Menus, and moreScripts - Animated Documents and Smart FormsDesenvolvimento web com Java# 14HTML bem formadoUm nico elemento raiz..Abrir e fechar todas as tags,
Capitalizao consistente

Aninhamento corretonegrito E italicoAtributos no repetidos com valor entre aspas Desenvolvimento web com Java# 15Semntica x apresentaoDesenvolvimento web com Java# 16

CSSCascading Style SheetsFolhas de estilo em cascataDesenvolvimento web com Java# 17Aplicadas hierarquicamenteLinguagem de apresentao de documentos estruturadosHTML SemnticoDesenvolvimento web com Java# 18

Usando CSS

Desenvolvimento web com Java# 19

estilo.css

Desenvolvimento web com Java# 20Seletor de TagRegraSeletor de ClasseSeletor de Filhos

Seletor de Pseudoclasse

Seletor de ID

Exemplo: CSS Zen Garden

Desenvolvimento web com Java# 21

Diferenas entre navegadoresCada verso de navegador interpreta como querProgamar para o padro ou para o usurio?CSS HacksComentrios condicionaisBibliotecasTesteshttp://www.webdevout.net/browser-support-cssDesenvolvimento web com Java# 22Exerccio: Web Developer Extensions

Desenvolvimento web com Java# 23

JavascriptA linguagem mais popular e menos compreendida do mundo.JavaLivescriptFuncional / OO?Problemas de projeto, implementao, documentao, padronizao e uso.Desenvolvimento web com Java# 24

Douglas Crockford http://developer.yahoo.com/yui/theater/ http://www.crockford.com/Idias principaisImplantao load and goTipagem dinmicaObjetos genricosHerana por prottiposLambda (funes como objetos)Linkage por variveis globaisColeta de lixo (mark and sweep)Desenvolvimento web com Java# 25ValoresNumber (double)Math.* String (16 bit UCS2)ImutveisBooleansFalsy: false, null, undefined, , 0, NaN. O resto truthy.ObjectsArrays []DateRegExpnullundefinedNaN

Desenvolvimento web com Java# 26ExercciosEntendendo a IEEE-754 (double)Diferenciando valores Truthy/Falsy

Desenvolvimento web com Java# 27ObjectMapa nome/valor (Hashtable)No ordenadoNomes so rotulos ou stringsValores podem ser de qualquer tipo (Number, String, Object, function .)Object Literal var obj = {nome:Fulano, idade:21};var nome = obj.nome;var idade = obj[idade];Parametros NomeadosmyFunc({param1:value1,})Incremento de Objetosobj.novaProp = voil;

Desenvolvimento web com Java# 28ObjectsConstruo:{}new Object()function object(o){Function(){}F.prototype = o;return new F();}object(Object.prototype)Remoo:object[param] = undefineddelete object[param]

Prototypes:Object.prototypeArray.prototypeFunction.prototypeNumber.prototypeString.prototypeBoolean.prototype

Desenvolvimento web com JavaLinkagepessoaFisicaCPF123.456.789-00Idade21Desenvolvimento web com Java# 30pessoaNomeFulanoSituao1var nome = pessoaFisica.nome; // FulanopessoaFisica.novaPropriedade = uala;pessoaFisica.situao += 1;ClassesMtodosConstrutoresModulos

Funes

ExerccioAdicionando o mtodo trim stringsDesenvolvimento web com Java# 31Expresses e operadoresStatementslabel: breakfor (;;)for (var name in obj)hasOwnPropertyswitch (expression)Strings OKthrow / try / catchwith Function / return;var

Operators+ / + / +==, != / === , !==&& (guard)return a && a.member;|| (default)var qtd = param || 10; &, |, ^, >>, >>>,