La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Carlos Walzer Vemn Sistemas Creando interfaces de Web ricas con Internet Explorer (ASP.NET)

Presentaciones similares


Presentación del tema: "Carlos Walzer Vemn Sistemas Creando interfaces de Web ricas con Internet Explorer (ASP.NET)"— Transcripción de la presentación:

1 Carlos Walzer Vemn Sistemas Creando interfaces de Web ricas con Internet Explorer (ASP.NET)

2 La primera impresión es la que cuenta. La interfaz gráfica y la comodidad en el uso es lo primero que observará nuestro usuario en contacto con la aplicación. Premisa

3 HTML Avanzado CSS (Hojas de estilo en cascada) DHTML (HTML Dinámico) Data Islands con XML (islas de datos XML) XML Data Binding XMLHTTP (consultas remotas al servidor) Behaviors Agenda

4 HTML Avanzado Algunos tags

5 FIELDSET LEGEND BUTTON P roceso: Modificadores de TAGS –TABINDEX=3 –ALT = Un Tooltip, TITLE tambien –DISABLED –READONLY DIV vs. Span HTML Avanzado

6 CSS Hojas de Estilo en Cascada

7 Que son? Formas de definir los estilos –En linea STYLE="position:absolute; width:60; height:20; –En la página BODY {font-family:"Arial"; font-size:10pt; text-align:center} –En un archivo externo Los estilos se heredan Son dinámicos: Objeto style CSS – Hojas de estilo en Cascada

8 Aspectos que modifican –Font y Text –Background y colores –Layout Bordes, margenes, padding –Display –Posición –Impresión –Filtros CSS – Hojas de estilo en Cascada

9 Los Tags y Propiedades de los estilos –Position (Absolute – Relative) –Display (NO ocupa lugar en el documento) –Visibility (ocupa lugar en el documento) –Overflow –Z-Index CSS – Hojas de estilo en Cascada

10 Algunos chiches –Zoom –Cursor –pageBreakAfter – pageBreakBefore –Filter –Scrollbar CSS – Hojas de estilo en Cascada

11 DHTML HTML Dinámico

12 DHTML Todos Los elementos de una página son objetos programables DOM (Document Object Model) Características –Estílos Dinámicos –Posicionamiento Dinámico –Contenido Dinámico –Data Binding Los lenguajes de scripting

13 DHTML Los objetos y las colecciones Los objetos –Window –Navigator –Document –Location –Screen –Frames –Forms –all

14 DHTML Las propiedades –ID – Para identificar un objeto –Name –Tagname – Nombre del Tag –ClassName – Nombre del estilo –Style – Acceso al objeto de estilo del elemento –innerHTML, outerHTML –Value, innerText –window.status –Readystate, Complete –Disabled, Readonly –Length –parentElement –Tabindex, Tabstop –Left, top, bottom, right –Rows, Cols

15 DHTML Los métodos –window.open –window.showModalDialog Pasando argumentos Retornando un valor con window.returnvalue –document.write –document.createElement –Focus, Blur –Moveto, moveby –Submit –setTimeOut –Print –insertAdjacentHTML, insertAdjacentText

16 Los eventos –onClick, onDblClick, onChange –OnBlur, OnFocus –OnLoad, onBeforeUnload –onBeforeCopy, onBeforePaste, onBeforeCut (after) –onContextMenu –onDragOver, onDragStart, …. –onKeyDown, onKeyPress, onKeyUp –onMouse (down, enter, move, out, up, wheel) –onReadyStateChange –onSubmit DHTML

17 Los eventos Event Bubbling –cancelBubble Accediendo al objeto que dispara el evento con Event.srcElement Cancelando: event.returnvalue = false Propiedades Event –altKey, altLeft, clientX, clientY, ctrlKey, KeyCode –shiftKey, wheelData DHTML

18 Como suscribir eventos Inline HTML – All platforms Event property –object.oncopy = handler JScript only –object.oncopy = GetRef("handler") Visual Basic Scripting Edition (VBScript) 5.0 or later only Named script – Internet Explorer only DHTML

19 XML Data Islands Data Binding

20 Veamos un XML. QA23 Americo Dalla Valle Salta 518 Avellaneda FR56 Maria Laura Sampedro Barzana 124 Villa Urquiza DF56 Juan Jose Moar Habana 548 Lomas del Mirador

21 Introducción a XML Pero, parece HTML? NO LO ES !! XML = eXtended Mark-up Language Contiene datos que se autodefinen Separa el contenido de la presentación

22 Data Islands de XML. Isla de datos Define datos en HTML. A partir de Internet Explorer 4.0

23 ¿Para que sirven las Data Islands? Para consultas remotas al servidor Pueden ser representadas en Tablas Pueden ser dinámicamente atadas a objetos de entrada de datos (data binding). Pueden agregarse, modificarse o eliminarse sus datos.

24 Definiendo una Isla de Datos En un documento HTML para IE 4.0 QA23 Americo Dalla Valle Salta 518 Avellaneda

25 ¿Como accedo Dinámicamente? DSO (Data Source Object) –Recordset (similar al de ADO) –XMLDocument (XMLDOM)

26 ¿Con que objetos uso Data Binding? Tablas –Table Objetos de entradas de datos –Input (text, radio, checkbox, password …) –Textarea –Select, etc. Otros Objetos –IFrame –Div –Span –Img, etc.

27 Data Binding, sintaxis. Para un elemento – Para una Tabla –DATASRC, DATAFLD –DATAPAGESIZE tblClientes.firstPage(), tblClientes.lastPage() tblClientes.nextPage(), tblClientes.previousPage() –DATAFORMATAS

28 DSO (Data Source Object) Propiedades –Recordset ( obj similar al de ADO) fields movefirst, moveLast, moveNext, etc. recordcount absolutePosition addNew, update, delete, etc. –namedRecordset (mantener Jerarquía) –xmlDocument (DOM) Eventos –ondatasetcomplete, ondatasetchanged, onrowenter, onrowexit,

29 XMLHTTP Consultas remotas al servidor

30 iXMLHttpRequest Disponible en Microsoft XML 3.0 Instalado por IE 5.0 Comunicación HTTP. Consultar al servidor sin recargar la página. Que bueno !!! Sincrónico o Asincrónico.

31 iXMLHTTPRequest Propiedades –onReadyStateChan ge –readyState –responseBody –responseStream –responseText –responseXML –status –statusText Métodos –abort –getResponseHeaders –open –send –setRequestHeader

32 Behaviors Personalizados y Standards

33 Que es un Behavior Comportamiento Es un Objeto que potencializa y extiende al Internet Explorer. Es una forma de encapsular código Script. Al aplicarlo a distintos elementos HTML, estos se comportarán de cierta manera.

34 Facilidad en el diseño Web Se aplica un Behavior de la misma forma que una propiedad de Style. El código puede existir en un solo lugar del Site. Cada página que requiera su funcionalidad debe referirse a la almacenada en el Behavior.

35 Encapsulamiento Definido por su Interface, de la misma manera que un objeto COM. Su interface provee como todo Objeto: –Propiedades –Métodos –Eventos

36 Includes Vs. Behaviors Es un Objeto. Puede ser aplicado a diversos elementos HTML. Es capaz de atender a eventos del Documento y reaccionar a ellos. No está atado al ID de un objeto

37 Creando Behaviors Su interfaz se define en XML. Se pueden escribir en VbScript o JScript. Todo esto guardado en un archivo de texto.HTC (HTML Component).

38 Elementos XML COMPONENT –Urn –ID –Name ATTACH EVENT METHOD –PARAMETER PROPERTY

39 Objetos DOCUMENT ELEMENT element.document !!

40 Comencemos….

41 Atendiendo Eventos Suscribiendo un Evento. Se unen a los manejadores de eventos existentes. Cualquier evento Standard Cualquier evento Standard + OnContentChange + OnDocumentReady + OnContentChange + OnDocumentReady

42 Disparando Eventos Los eventos disparados son atrapados por el documento.

43 Propiedades OnPropertyChange Al definir una funcion PUT sPropertyID.fireChange()

44 Métodos [ ]

45 Referenciando Behaviors Inline Style Embedded Style Objeto Style (asignación dinámica) Hola P {behavior:url(Bhvr.htc)} function window_onload() { P1.style.behavior = url(Bhvr.htc); }

46 Hablando con Behaviors Referenciando Propiedades Llamando a Métodos Atrapando Eventos Hola P1.hightlight = yellow; alert (El color es + P1.hightlight); function window_onload(){ P1.Encender(); } Hola

47 Behaviors Standards del IE SaveFavorite SaveHistory saveSnapshot UserData ClientCaps Download HomePage AnchorClick httpFolder Data Persistance

48 Librería de Behaviors calendar colorpick coolbar coolbutton dataselect imageRollover mask menu moveable mpc rowover slider soundRollover tooltip

49 Referencias Bibliografía: –XML IE5 Editorial Wrox –IE5 Dynamic HTML Editorial Wrox –A fondo Dynamic HTML Mc Graw Hill Links –www.vemn.com.ar –www.microsoft.com/scripting –www.microsoft.com/xml –http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/refere nce/methods.asp?frame=true –www.javascripts.com –www.24fun.com/ –www.siteexperts.com –www.asptoday.com –www.actionjackson.com/

50 Preguntas?

51 Carlos Walzer Vemn Sistemas Muchas gracias por su participación


Descargar ppt "Carlos Walzer Vemn Sistemas Creando interfaces de Web ricas con Internet Explorer (ASP.NET)"

Presentaciones similares


Anuncios Google