Carlos WalzerCarlos WalzerVemn SistemasVemn Sistemas

carlosw@vemn.com.arcarlosw@vemn.com.ar

Como crear un sitio con Como crear un sitio con ASP.NETASP.NET

Introducción al marco de trabajoIntroducción al marco de trabajo Como funciona ASP.NETComo funciona ASP.NET Revisión de ComponentesRevisión de Componentes Herramientas, ConsejosHerramientas, Consejos DHTML, CSS, XMLHTTPDHTML, CSS, XMLHTTP Seguridad de la App WebSeguridad de la App Web DeploymentDeployment

AgendaAgenda

Marco de trabajoMarco de trabajo

.NET Framework y .NET Framework y ASP.NETASP.NET

Framework, lenguaje y HerramientasFramework, lenguaje y Herramientas

Base Class Library

Common Language Specification

Common Language Runtime

Datos y XML

VB C++ C#V

isual S

tud

io.N

ET

WebServices

JScript …

Interfacede Usuario

Componentes de .NETComponentes de .NET

System

System.Data System.Xml

System.Web

Globalization

Diagnostics

Configuration

Collections

Resources

Reflection

Net

IO

Threading

Text

ServiceProcess

Security

Design

ADO

SQLTypes

SQL

XPath

XSLT

RuntimeInteropServices

Remoting

Serialization

Serialization

Configuration SessionState

Caching Security

ServicesDescription

Discovery

Protocols

UIHtmlControls

WebControls

System.Drawing

Imaging

Drawing2D

Text

Printing

System.WinForms

Design ComponentModel

Conceptos centrales de Conceptos centrales de ASP.NETASP.NET

Plataforma de desarrollo de WebPlataforma de desarrollo de Web

Cliente Web

Sistema Operativo

AplicacionesASP.NET

IIS

.NET Framework

CaracterísticasCaracterísticas

LenguajesLenguajes CodeBehindCodeBehind AssembliesAssemblies ConfiguraciónConfiguración Orientado a ObjetosOrientado a Objetos Eventos en el servidorEventos en el servidor

PostBackPostBack

Mitos y Leyendas…Mitos y Leyendas…

Modelo de Eventos WebFormModelo de Eventos WebForm

Evento disparado en el ClienteEvento disparado en el Cliente Atrapado en el servidorAtrapado en el servidor

Server

Cliente Web

Analiza el mensajeevento

manejador

mensaje

respuesta

Llama al manejador apropiado

FormForm POSTPOST Page.IsPostBackPage.IsPostBack

ViewStateViewState Base64Base64 EnableViewStateEnableViewState No siempre es necesarioNo siempre es necesario

EventosEventos Post-BackPost-Back Cached events (retenidos)Cached events (retenidos)

AutoPostBackAutoPostBack

ValidaciónValidación

Como se implementaComo se implementa

Ciclo de Vida de un Web FormCiclo de Vida de un Web Form

Inicialización de ObjetosInicialización de Objetos Carga ViewStateCarga ViewState Procesa datos del PostProcesa datos del Post Carga ObjetosCarga Objetos Lanza los Eventos CachedLanza los Eventos Cached Lanza el Evento Post-BackLanza el Evento Post-Back PreRenderPreRender Graba ViewStateGraba ViewState RenderRender DisposalDisposal

ConsejosConsejos

Nos acerca al modelo de Win32Nos acerca al modelo de Win32 Administre el Post-Back:Administre el Post-Back:

Round-TripsRound-Trips ViewStateViewState

DHTML también existe DHTML también existe

ComponentesComponentes

ASP.NET y demás…ASP.NET y demás…

Autenticación - TiposAutenticación - Tipos

Windows Authentication (vía IIS)Windows Authentication (vía IIS) Basic, Digest, NTLM, Kerberos, IIS Basic, Digest, NTLM, Kerberos, IIS

CertificateCertificate

Autenticación basada en Formularios Autenticación basada en Formularios (Cookie)(Cookie) Verificación de credencial a nivel de Verificación de credencial a nivel de

AplicaciónAplicación

MicrosoftMicrosoft®® Passport Passport

Autenticación basada en FormulariosAutenticación basada en Formularios

Fácil de implementarFácil de implementar ASP .NET provee redirecciónASP .NET provee redirección

PasosPasos Configure IIS para que permita usuarios anónimos Configure IIS para que permita usuarios anónimos

(típicamente)(típicamente) Use SSL!Use SSL! Configure ASP.NET con autenticación por cookieConfigure ASP.NET con autenticación por cookie Escriba su página de LoginEscriba su página de Login

<authentication mode= "Forms"> <forms

name=".ASPXAUTH" loginUrl="login.aspx" protection="all" timeout="30" path="/"

/></authentication>

ConfiguraciónConfiguración Conceptos y ArquitecturaConceptos y Arquitectura

Arch. de configuración: Config.webArch. de configuración: Config.web Basado en XML, legible y modificable por “humanos”Basado en XML, legible y modificable por “humanos” UbicaciónUbicación Los cambios se detectan automáticamenteLos cambios se detectan automáticamente

Arquitectura de configuración jerárquicaArquitectura de configuración jerárquica

RootDir

SubDir1

SubDir2

Config.web

StateState Application StateApplication State Session StateSession State

Por páginaPor página In-Process SessionIn-Process Session Out-Of-Process SessionOut-Of-Process Session

ASP.NET State ServerASP.NET State Server SQL Server SessionSQL Server Session

c:\winnt\Microsoft.NET\Framework\c:\winnt\Microsoft.NET\Framework\versionversion\InstallSqlState.sql\InstallSqlState.sql

<sessionState mode="Off|Inproc|StateServer|SQLServer“ cookieless="true|false"<sessionState mode="Off|Inproc|StateServer|SQLServer“ cookieless="true|false"

timeout="number of minutes“ stateConnectionString="tcpip=server:port"timeout="number of minutes“ stateConnectionString="tcpip=server:port"

sqlConnectionString="sql connection string" />sqlConnectionString="sql connection string" />

CookiesCookies Cache StateCache State Transient StateTransient State

HTTPContext.Current.ItemsHTTPContext.Current.Items View StateView State

ViewState[] CollectionViewState[] Collection

NavegaciónNavegación <a href=“”></a><a href=“”></a> window.locationwindow.location window.open()window.open() window.showModalDialog(), window.showModalDialog(),

window.showModelessDialog()window.showModelessDialog()

Response.Redirect()Response.Redirect() Server.Execute()Server.Execute() Server.Transfer()Server.Transfer()

HTTPContext.Current.ItemsHTTPContext.Current.Items

Controles ASP.NETControles ASP.NET

Un componente que se ejecuta en el Un componente que se ejecuta en el servidor y expone interfaz Web…servidor y expone interfaz Web… Propiedades, métodos, eventosPropiedades, métodos, eventos Se muestra como HTML, XML, script, etc. Se muestra como HTML, XML, script, etc. Procesa acciones del usuario y datosProcesa acciones del usuario y datos Puede representar elementos HTML o Puede representar elementos HTML o

abstracciones de alto nivelabstracciones de alto nivel

Hablando técnicamente…Hablando técnicamente… Es implementado como una clase .NETEs implementado como una clase .NET Deriva desde System.Web.UI.Control o Deriva desde System.Web.UI.Control o

System.Web.UI.WebControls.WebControlSystem.Web.UI.WebControls.WebControl

CacheCache

<%@ OutputCache Duration=“600" <%@ OutputCache Duration=“600" VaryByParam=“Provincia;Ciudad“ VaryByParam=“Provincia;Ciudad“ VaryByHeader="Accept-Language" VaryByHeader="Accept-Language" VaryByCustom="browser" %>VaryByCustom="browser" %>

HerramientasHerramientas

Consejos útiles para Consejos útiles para trabajartrabajar

ConsejosConsejos

Como usar y no usar VS…Como usar y no usar VS… HTML Designer HTML Designer , Text editor, Text editor DebuggingDebugging

Tablas anidadasTablas anidadas Crear Controles, Botones, MenuCrear Controles, Botones, Menu Modere ViewState (DataGrid paging)Modere ViewState (DataGrid paging) Gráficos (FireWorks)Gráficos (FireWorks) BookMarkletsBookMarklets

http://www.squarefree.com/bookmarklets/http://www.squarefree.com/bookmarklets/

DHTML, DHTML, CSSCSSXMLHTTPXMLHTTP

Que son?Que son? Formas de definir los estilosFormas de definir los estilos

En lineaEn lineaSTYLE="position:absolute; width:60; height:20;“STYLE="position:absolute; width:60; height:20;“

En la páginaEn la página<STYLE><STYLE>

BODY {font-family:"Arial"; font-size:10pt; text-align:center} BODY {font-family:"Arial"; font-size:10pt; text-align:center}

</STYLE></STYLE>

En un archivo externoEn un archivo externo<link rel="stylesheet" href=“<link rel="stylesheet" href=“MisEstilosMisEstilos.css">.css">

Los estilos se heredanLos estilos se heredan Son dinámicos: Objeto styleSon dinámicos: Objeto style

CSS – Hojas de estilo en CascadaCSS – Hojas de estilo en Cascada

Aspectos que modificanAspectos que modifican Font y TextFont y Text Background y coloresBackground y colores LayoutLayout

Bordes, margenes, paddingBordes, margenes, padding

DisplayDisplay PosiciónPosición ImpresiónImpresión FiltrosFiltros

CSS – Hojas de estilo en CascadaCSS – Hojas de estilo en Cascada

DHTMLDHTML TodosTodos Los elementos de una página Los elementos de una página

son objetos programablesson objetos programables DOM (Document Object Model)DOM (Document Object Model) CaracterísticasCaracterísticas

Estílos DinámicosEstílos Dinámicos Posicionamiento DinámicoPosicionamiento Dinámico Contenido DinámicoContenido Dinámico Data BindingData Binding

Los lenguajes de scriptingLos lenguajes de scripting

DHTMLDHTML Los objetos y las coleccionesLos objetos y las colecciones Los objetosLos objetos

WindowWindow NavigatorNavigator DocumentDocument LocationLocation ScreenScreen FramesFrames FormsForms allall

DHTMLDHTML Las propiedadesLas propiedades

ID – Para identificar un objetoID – Para identificar un objeto NameName Tagname – Nombre del TagTagname – Nombre del Tag ClassName – Nombre del estiloClassName – Nombre del estilo Style – Acceso al objeto de estilo del elementoStyle – Acceso al objeto de estilo del elemento innerHTML, outerHTMLinnerHTML, outerHTML Value, innerTextValue, innerText window.statuswindow.status Readystate, CompleteReadystate, Complete Disabled, ReadonlyDisabled, Readonly LengthLength parentElementparentElement Tabindex, TabstopTabindex, Tabstop Left, top, bottom, rightLeft, top, bottom, right Rows, ColsRows, Cols

DHTMLDHTML Los métodosLos métodos

window.openwindow.open window.showModalDialogwindow.showModalDialog

Pasando argumentosPasando argumentos Retornando un valor con Retornando un valor con window.returnvalue window.returnvalue

document.writedocument.write document.createElementdocument.createElement Focus, BlurFocus, Blur Moveto, movebyMoveto, moveby SubmitSubmit setTimeOutsetTimeOut PrintPrint insertAdjacentHTML, insertAdjacentTextinsertAdjacentHTML, insertAdjacentText

Los eventosLos eventos onClick, onDblClick, onChangeonClick, onDblClick, onChange OnBlur, OnFocusOnBlur, OnFocus OnLoad, onBeforeUnloadOnLoad, onBeforeUnload onBeforeCopy, onBeforePaste, onBeforeCut onBeforeCopy, onBeforePaste, onBeforeCut

(after)(after) onContextMenuonContextMenu onDragOver, onDragStart, ….onDragOver, onDragStart, …. onKeyDown, onKeyPress, onKeyUponKeyDown, onKeyPress, onKeyUp onMouse (down, enter, move, out, up, wheel)onMouse (down, enter, move, out, up, wheel) onReadyStateChangeonReadyStateChange onSubmitonSubmit

DHTMLDHTML

Los eventosLos eventos Event BubblingEvent Bubbling

cancelBubblecancelBubble

Accediendo al objeto que dispara el Accediendo al objeto que dispara el evento con Event.srcElementevento con Event.srcElement

Cancelando: event.returnvalue = falseCancelando: event.returnvalue = false Propiedades EventPropiedades Event

altKey, altLeft, clientX, clientY, ctrlKey, altKey, altLeft, clientX, clientY, ctrlKey, KeyCodeKeyCode

shiftKey, wheelDatashiftKey, wheelData

DHTMLDHTML

XMLHTTPXMLHTTP

Consultas remotas Consultas remotas al servidoral servidor

iXMLHttpRequestiXMLHttpRequest

Disponible en Microsoft XML 3.0Disponible en Microsoft XML 3.0 Instalado por IE 5.0Instalado por IE 5.0 Comunicación HTTP.Comunicación HTTP. Consultar al servidor sin recargar la Consultar al servidor sin recargar la

página. Que bueno !!!página. Que bueno !!! Sincrónico o Asincrónico.Sincrónico o Asincrónico.

iXMLHTTPRequestiXMLHTTPRequest

PropiedadesPropiedades onReadyStateChaonReadyStateCha

ngenge readyStatereadyState responseBodyresponseBody responseStreamresponseStream responseTextresponseText responseXMLresponseXML statusstatus statusTextstatusText

• Métodos– abort– getResponseHeaders– open– send– setRequestHeader

SeguridadSeguridad

Código seguro…Código seguro…

SeguridadSeguridad

SQL InjectionSQL Injection Ejecutar Store ProceduresEjecutar Store Procedures Impersonar en un usuarioImpersonar en un usuario Permiso de ejecución en los SPPermiso de ejecución en los SP

Cross-Site ScriptingCross-Site Scripting .NET 1.1 nos cubre? .NET 1.1 nos cubre? ValidateRequestValidateRequest

ReferenciaReferencia: Writing Secure Code 2: Writing Secure Code 2

DeploymentDeployment

Instalación del sitio Instalación del sitio WebWeb

DeploymentDeployment

XcopyXcopy Que necesito?Que necesito?

AspxAspx AsmxAsmx Htm, gif, css, js, etc.Htm, gif, css, js, etc. ConfigConfig BinBin CarpetasCarpetas

ReferenciasReferencias LinksLinks

www.vemn.com.arwww.vemn.com.ar www.asp.netwww.asp.net www.aspalliance.comwww.aspalliance.com http://msdn.microsoft.com/library/http://msdn.microsoft.com/library/

default.asp?url=/workshop/author/dhtml/default.asp?url=/workshop/author/dhtml/reference/methods.asp?frame=truereference/methods.asp?frame=true

www.codeproject.comwww.codeproject.com www.asptoday.comwww.asptoday.com

Preguntas?Preguntas?

Carlos WalzerCarlos WalzerVemn SistemasVemn Sistemas

carlosw@vemn.com.arcarlosw@vemn.com.ar

Muchas graciasMuchas graciaspor su participaciónpor su participación