O Client (HTML / CSS / Javascript )

Download O  Client  (HTML / CSS /  Javascript )

Post on 12-Jan-2016

22 views

Category:

Documents

0 download

DESCRIPTION

O Client (HTML / CSS / Javascript ). Agenda. Fundamentos HTTP HTML CSS Javascript AJAX. A Web. Era pra ser: Um sistema de obteno de documentos hiperligados Documentos Sem estado Confivel Acadmica. Acabou virando : A plataforma de informao global Aplicaes - PowerPoint PPT Presentation

TRANSCRIPT

Slide 1O Client (HTML / CSS / Javascript)1AgendaFundamentosHTTPHTMLCSSJavascriptAJAXDesenvolvimento web com Java# 2A WebEra pra ser:Um sistema de obteno de documentos hiperligadosDocumentosSem estadoConfivelAcadmicaAcabou 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# 6O HTTPDesenvolvimento web com Java# 7O HTTPDesenvolvimento web com Java# 8O HTTPDesenvolvimento web com Java# 9Exerccio: FirebugDesenvolvimento web com Java# 10NavegadoresDesenvolvimento web com Java# 11Interpretador de:HTMLCSSJavascriptRSSXULFFExtensesJava AppletsFlashActiveXIEHTMLHyper Text Markup LanguageLinguagem de Marcao de HipertextoDesenvolvimento web com Java# 12Sistema de interpretao de simbolostexto marcadoTexto + links + audio + video + ExemploDesenvolvimento web com Java# 13Tipos 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 consistenteAninhamento corretonegrito E italicoAtributos no repetidos com valor entre aspas Desenvolvimento web com Java# 15Semntica x apresentaoDesenvolvimento web com Java# 16CSSCascading Style SheetsFolhas de estilo em cascataDesenvolvimento web com Java# 17Aplicadas hierarquicamenteLinguagem de apresentao de documentos estruturadosHTML SemnticoDesenvolvimento web com Java# 18Usando CSSDesenvolvimento web com Java# 19estilo.cssDesenvolvimento web com Java# 20Seletor de TagRegraSeletor de ClasseSeletor de FilhosSeletor de PseudoclasseSeletor de IDExemplo: CSS Zen GardenDesenvolvimento web com Java# 21Diferenas 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 ExtensionsDesenvolvimento web com Java# 23JavascriptA linguagem mais popular e menos compreendida do mundo.JavaLivescriptFuncional / OO?Problemas de projeto, implementao, documentao, padronizao e uso.Desenvolvimento web com Java# 24Douglas 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 []DateRegExpnullundefinedNaNDesenvolvimento web com Java# 26ExercciosEntendendo a IEEE-754 (double)Diferenciando valores Truthy/FalsyDesenvolvimento 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.prototypeDesenvolvimento web com JavaLinkagepessoaFisicaCPF123.456.789-00Idade21Desenvolvimento web com Java# 30pessoaNomeFulanoSituao1var nome = pessoaFisica.nome; // FulanopessoaFisica.novaPropriedade = uala;pessoaFisica.situao += 1;ClassesMtodosConstrutoresModulosFunesExerccioAdicionando o mtodo trim stringsDesenvolvimento web com Java# 31Expresses e operadoresStatementslabel: breakfor (;;)for (var name in obj)hasOwnPropertyswitch (expression)Strings OKthrow / try / catchwith Function / return;varOperators+ / + / +==, != / === , !==&& (guard)return a && a.member;|| (default)var qtd = param || 10; &, |, ^, >>, >>>,