asp net 4 a traves de ejemplos

Buenos dias, me gustaria dedicar este curso sobre todo a mi padre quien siempre me ha dicho que nunca entendia el detalle de trabajo como programador siempre quedandose embelesado ante lo que es un aplicacion espero que este contenido te lo aclare y hagas tus "pinitos"...,tambien lo dedico a todos aquellos que avidos de interes por el conocimiento de desarrollo que no diseño de paginas web esten deseando crear un por ejemplo motor de busqueda para sus paginas o una aplicacion web en general espero que disfruten el curso tanto como yo lo estoy disfrutando escribiendolo, tambien espero que superen los conocimientos que se muestran en el curso si desarrollais algo de los que esteis orgullosos al margen de este curso dejadme un mensaje y vere vuestra url.Al curso tal cual lo estoy creando se iran añadiendo "subcuros" Javascript XHTML... etc no es imprescindible que os aprendais todos los subcursos porque os llevaria un tiempo mucho mas grande que el deseado para el proposito final con que diseñe este que es el de aprender ASP .NET hojead los subcursos haced practicas modificando los ejercicios con otros tags/ejemplos que vengan en ellos luego podreis usar los subcursos para ir "mas alla " en cuanto os tengais que enfrentar a problemas distintos a los planteados aqui o mas concretos.

aplicaciones hay2 tipos de aplicaciones, compiladas como los scripts CGI Common Gateway Interface e interpretadas como el Javascript

en el primer caso Javascript, se interpreta en tiempo de ejecucion el script mediante un interprete (navegador) obteniendo un resultado de interpretar el codigo.

en el segundo caso CGI bin script el servidor tiene compilado y linkado, un programa en C etc que ejecuta el servidor como resultado a una entrada de datos.

diferencias entre aplicaciones .NET de escritorio y aplicaciones web y aplicaciones mobiles

estas 3 citadas aplicaciones son basicamente con tecnologia microsoft los 3 a grandes rasgos tipos de desarrollo que se pueden realizar, al margen de la interconexion entre estas tecnologias.

1. las aplicaciones de escritorio son aplicaciones que pueden o no estar conectadas en internet y que se ejecutan en la memoria del ordenador conectadas a un .net framework (ya van por la version 4) es decir el codigo .net se compila a codigo msil y este es ejecutado por el framework  a codigo maquina que puede ser de 32 o 64 bits en uno o mas procesadores de esta tarea la mayor parte la ejecuta el framework aunque tambien depende de como programemos ,las tecnologias usadas son programacion en WinForms y programacion en Windows Presentation Foundation, la diferencia entre ambos es que mientras que en uno el codigo de cada pantalla es una clase con controles insertados o personalizados,cajas de texto , etiquetas, botones por decirlo de alguna manera en Winforms "incrustados en el formulario" con pocas posibilidades de aplicar efectos graficos , con Windows Presentation Foundation se usa un lenguaje de marcado XAML jerarquico para definir las pantallas con amplias posibilidades de realizar efectos , nota toda aplicacion WPF en windows puede a su vez ejecutarse en web en un navegador descargando el plug in de ejecucion de WPF para Internet Explorer (navegador que lo soporta), programacion concurrente o de consultas en paralelo Linq , podremos optimizar el rendimiento de nuestras aplicaciones para varios procesadores, esto escapa de este curos sin embargo si teneis curiosidad podeis consultar el libro parllel programming de la editorial wrox para introduciros en este tambien apasionante tema. http://www.postw.com/posts/libros/9859/bajar-gratis-wrox-professional-parallel-programming-with-dec-2010/
2. las aplicaciones web son aquellas aplicaciones que se ejecutan en nuestro navegador actualmente hay varias tecnologias microsoft Windows Presentation Foundation y ASP .NET su desarrollo es analogo al de aplicaciones de escritorio , mientras que en ASP .NET los formularios web son mas dificiles de aplicarles efectos graficos , al final lo que carga el navegador es un lenguaje de marcado llamado HTML que veremos mas tarde y scripts en javascript para personalizar eventos acciones de este lenguaje de marcado , WPF sigue trabajando con XAML pudiendo realizar todo tipo de efectos cliente rico , otra diferencia es que en ASP .NET se "vuelca" el contenido total o parcial de la pagina HTML con los cambios al seridor cada vez que se realiza una accion como pulsar un boton de enviar una pagina, mientras que WPF trabaja en un motor de ejecucion en local que se comunica mediante otras tecnologias a servidores remotos para realizar las conexiones con bases de datos etc.la limitacion de las aplicaciones tanto WPF como web es que andan "aisladas" del hardware del equipo con lo cual se complica un poco mas por seguridad el acceso al hardware del PC aceleradora grafica, sistema de archivos del disco duro, si se produce algun acceso este esta esta encapsulado por clases en .NET o ejecutado bajo lo que se llama un control ActiveX. 
3. una aplicacion mobile puede ser una aplicacion ASP .NET ejecutada en un navegador IE bajo por ejemplo Windows Mobile 7 o una aplicacion bajo WPF en este caso no hay limitacion de acceso al hardware el telefono y su ejecucion no se realiza conectandose a un solo servidor remoto si no como a una especie de "nube" de servidores que proporcionan los servicios y distribucion de la aplicacion ,de una forma rapida, bajo una plataforma llamada Windows Azure. http://www.mhprofessional.com/product.php?isbn=0071717897

Un Poco de HTML
a partir de ahora solo hablare de desarrollo web, esto significa que tendremos n equipos con n o mas navegadores conectados a un servidor web ASP NET IIS, internet information server que es el que se encarga de la gestion de servir y recibir los envios de los formularios web.

hay dos tipos de metodos de envios de una pagina web a un servidor IIS , el metodoo GET y el POST estos forman parte del protocolo HTTP que va por el puerto 80 de nuestro ordenador normalmente y evita la complicacion de complejas configuraciones de Firewalls ya que estos por defecto permiten enviar datos por ese puerto con seguridad.

el metodo GET envia o recibe una solicitud web y es una instruccion que ejecuta el navegador IE internet Eplorer cargando la pagina de la URL solicitada o devolviendo un codigo HTTP de error en caso de que no  pueda cargarla/enviarla , si se envian datos via GET esto se hace mediante la URL como en este interesante video que podeis ver los parametros de la peticion del video a you tube se hacen mediante un GET:
http://www.youtube.com/watch?v=LM4SB_m-Fas


el metodo POST es otro metodo usado por HTTP para "postear" enviar los datos de nuestra pagina web al servidor , en este caso los valores de los controles son enviados en variables "ocultas" que se pueden leer desde el servidor sin que el usuario las pueda ver en la URL o direccion de nuestro navegador.

Que es una pagina web o HTML interpertada por el navegador?
no es mas que una serie de tags o etiquetas que pueden ir anidadas entre si en algo llamado DOM, Document Object Model y no es mas que una representacion jerarquica de HTML.
todas las paginas HTML contienen al menos los tags
<HEAD title="titulo de la pagina en el marco superior de la ventana del navegador">
</HEAD>
<BODY onload="cargada()">
</BODY>

Con este Editor HTML/Javascript podreis ver los ejemplos en tiempo real online http://smultron.es/editor-html-online/ hasta que veamos el editor del entorno de desarrollo de .NET Visual Studio.

head es el tag de cabecera de la pagina web entre cada apertura y cierre de HEAD se incluyen las etiqeutas meta por ejemplo para refrescar automaticamente la carga de la pagina pasados unos segundos o antiguamente se usaba para definir el contenido de la web en los buscadores y para guardar anidado otro tag
<SCRIPT language="Javascript">
function cargada()
{
      alert("se cargo la pagina");
}
</SCRIPT>

si incluimos el tag SCRIPT dentro del HEAD y añadimos al evento del tag BODY o cuerpo de la pagina que cuando se cargue llame al codigo de scripting Javascript (ya lo veremos en mas detalle) y muestre un mensaje cuando haya finalizado la carga de la pagina.dentro de las etiquetas de apertura y cierre de BODY va añadido un formulario o controles HTML ,
<BODY>
<INPUT id="Botonfueraform" Type="Button" onClick="cargada()"></INPUT>
<FORM> <INPUT id="Botondentroform" Type="Button" onClick="cargada()"></INPUT></FORM>
</BODY>
en ASP NET no trabajaremos exactamente con HTML sino con XHTML las diferencias son que siempre toda etiqueta de apertura tiene una de cierre tambien hay etiquetas de apertura y cierre simultaneas en la misma etiqueta como <BR/> que inserta un salto de linea, pruebenlo!!
abran el bloc de notas en mi-PC->programas->accesorios y creen su pagina web escriban texto libre con o sin javascript y con texto separado por <BR/> a continuacion guarde la pagina como un archivo con extension .htm que junto con .html son las extensiones de paginas web en Windows y Unix respectivamente
como se observa claramente el formateo de la pagina web no es literal , depende del marcado HTML y otra cosa mas llamada estilos de la pagina que veremos a continuacion.

otra cosa que se me habia olvidado en XHTML, HTML son los caracteres de escape, si probais un poco con los tags

vereis que siempre os salen las palabras "pegadas" entre si por muchos espacios que incorporeis

en el documento de texto, esto es porque HTML XHTML es un lenguaje de marcado interpretado por el

navegador para arreglar esto estan las secuencias de escape veamoslo:

poned &nbsp; 10 veces y os agregara 10 espacios en blanco hay muchas mas secuencias de escape 

como por ejemplo los simbolos < y > que son respectivamente &lt; &gt;

mas Javascript:
vamos a ver un sencillo programa en javascript que valide el contenido de una caja de texto.
hay que indicar que javascript es case sensitive es decir no es lo mismo la funcion VALIDA_NUMERICO() que valida_numerico(), las variables se declaran con var seguido de una inicializacion de tipos, si no se inicializa el tipo se asume que es del tipo abstracto object que despues se puede inicializar en tiempo de ejecucion.
<HEAD>

<SCRIPT language="Javascript">

function VALIDA_NUMERICO(textcaja)

{

      var numericolongitud4dec3=/^-?\d4+\.\d3+)$/; expresion regular o regular expression

      if(numericolongitud4dec3.test(textcaja))

       {

           return true;

       }

       else

       {

           return false;

        }

       return false;

}

function OnKeyPresscajanum_longitud(e,texto,long)

{
     switch(e.KeyChar) //e es el evento input.event
    {
    case 0,1,2,3,4,5,6,7,8,9:
             VALIDA_NUMERICO(texto+e.KeyChar);
     case else:
        break;
     }
         if(texto.length>long)

          {

          e.CancelBubble=true; //cancela la cascada de eventos desde la ventana hasta el tag input
                                            //window.body...input para que no                
                                            //agregue el caracter
          return e;
          }
          return e;

}

</SCRIPT>

</HEAD>
<BODY>
<INPUT Type="Text" id="caja" onKeyPress="OnKeyPresscajanum_longitud(e,texto,long)"></INPUT>
</BODY>

Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX

View more presentations from Irontec - Internet y Sistemas sobre GNU/Linux.

Events in JavaScript

A A

Font size

The following table contains the complete list of events, their browser support and types. If you need the interfaces that belong to the event types in hierarchical form, see the page for the Event interface.

Name that can be used for theaddEventListener, removeEventListenerand event initialization (initEvent, ...) methods.	Name that can be used for event attributes (HTML), shorthand form (e.g. obj.onclick) and for theattachEvent, detachEvent and fireEvent methods.	Support	Bubbles	Cancelable	Description	Type
-	onabort		Yes	No	Occurs when the user aborts the loading of animg or input:image element.	Event
-	onactivate		Yes	No	Occurs when an element becomes active.	Event
-	onafterprint		No	No	Occurs when the browser has built the contents of the current document for printing or for the print preview.	Event
-	onafterupdate		Yes	No	Occurs on a databound object after it updates the data in the data source object.	Event
-	onbeforeactivate		Yes	Partially	Occurs before an element becomes active.	Event
beforecopy	onbeforecopy		Yes	Yes	Occurs before the selection is copied to the clipboard and before the oncopy event.	Event
beforecut	onbeforecut		Yes	Yes	Occurs before the selection is cut from the document and provides a possibility to enable the Cut menu item.	Event
-	onbeforedeactivate		Yes	Yes	Occurs on the active element before it loses the active state.	Event
-	onbeforeeditfocus		Yes	Yes	Occurs before an input:file, input:password,input:text or textarea element or an element in an editable region becomes a UI-activated.	Event
beforepaste	onbeforepaste		Yes	Yes	Occurs before the contents of the clipboard are pasted into the document and provides a possibility to enable the Paste menu item.	Event
-	onbeforeprint		No	No	Occurs when the browser starts to build the contents of the current document for printing or for the print preview.	Event
beforeunload	onbeforeunload		No	Yes	Occurs before the browser unloads the document and provides a possibility to display a confirmation dialog, where the user can confirm whether he wants to stay or leave the current page.	Event
-	onbeforeupdate		Yes	Yes	Occurs on a databound object before it updates the data in the data source object.	Event
blur	onblur		No	No	Occurs when an element loses focus.	Event
bounce	onbounce		No	Yes	Occurs when the contents of a marqueeelement touch one side of the marqueeelement's bounding rectangle.	Event
-	oncellchange		Yes	No	Occurs on a data source object when the data in it has changed.	Event
change	onchange		No	Yes	Occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus.	Event
CheckboxStateChange	-		No	No	Occurs when the state of a checkbox has changed.	Event
click	onclick		Yes	Yes	Occurs when the user clicks on an element.	MouseEvent
contextmenu	oncontextmenu		Yes	Yes	Occurs when the right mouse button is clicked on an element and the context menu is shown.	MouseEvent
-	oncontrolselect		Yes	Yes	Occurs before a control is selected in an editable region.	Event
copy	oncopy		Yes	Yes	Occurs before the selection is copied to the clipboard.	Event
cut	oncut		Yes	Yes	Occurs before the selection is cut from the document and added to the clipboard.	Event
-	ondataavailable		Yes	No	Occurs each time when a new chunk of data becomes available from the source.	Event
-	ondatasetchanged		Yes	No	Occurs on a data source object when the initial or a new data set becomes available.	Event
-	ondatasetcomplete		Yes	No	Occurs on a data source object when all its data becomes available.	Event
dblclick	ondblclick		Yes	Yes	Occurs when the user double clicks on an element.	MouseEvent
-	ondeactivate		Yes	No	Occurs on the active element when it loses the active state.	Event
DOMActivate	-		Yes	Yes	Occurs when an element becomes active.	UIEvent
DOMAttrModified	-		Yes	No	Fires when an attribute is added, removed or when the value of an attribute is modified by script.	MutationEvent
DOMCharacterDataModified	-		Yes	No	Fires when a script changes the value of aTextNode.	MutationEvent
DOMFocusIn	-		Yes	No	Occurs before an element receives focus.	UIEvent
DOMFocusOut	-		Yes	No	Occurs before an element loses the focus.	UIEvent
DOMMouseScroll	-		No	No	Occurs when the mouse wheel rolls.	MouseEvent
DOMNodeInserted	-		Yes	No	Occurs on a node when it is added to an element.	MutationEvent
DOMNodeInsertedIntoDocument	-		No	No	Occurs on a node when it is inserted into the document.	MutationEvent
DOMNodeRemoved	-		Yes	No	Occurs on a node when it is removed from its parent.	MutationEvent
DOMNodeRemovedFromDocument	-		No	No	Occurs on a node when it is removed from the document.	MutationEvent
DOMSubtreeModified	-		Yes	No	Fires on a node when a modification occurs in the subtree that belongs to it.	MutationEvent
drag	ondrag	3	Yes	Yes	Occurs periodically on the source element during the drag operation.	In Firefox from version 3.5:DragEvent In Safari, Google Chrome and in older Firefox:MouseEvent
dragdrop	-	3.5	Yes	Yes	Occurs on a possible target element when the dragged data is dropped on it.	MouseEvent
dragend	ondragend	3	Yes	Yes	Occurs on the source element when the user has finished the drag operation.	In Firefox from version 3.5:DragEvent In Safari, Google Chrome and in older Firefox:MouseEvent
dragenter	ondragenter		Yes	Yes	Occurs on an element when the user moves the mouse pointer into it during a drag operation.	In Firefox from version 3.5:DragEvent In Safari, Google Chrome and in older Firefox:MouseEvent
dragexit	-		Yes	Yes	Occurs on an element when the user moves the mouse pointer out of it during a drag operation.	In Firefox from version 3.5:DragEvent In onlder Firefox:MouseEvent
draggesture	-		Yes	Yes	Occurs on the source element when the user starts the drag operation.	In Firefox from version 3.5:DragEvent In onlder Firefox:MouseEvent
dragleave	ondragleave	3.5	Yes	Yes	Occurs on an element when the user moves the mouse pointer out of it during a drag operation.	In Firefox from version 3.5:DragEvent In Safari and Google Chrome:MouseEvent
dragover	ondragover		Yes	Yes	Occurs periodically on an element while the mouse pointer is over it during a drag operation.	In Firefox from version 3.5:DragEvent In Safari, Google Chrome and in older Firefox:MouseEvent
dragstart	ondragstart	3.5	Yes	Yes	Occurs on the source element when the user starts the drag operation.	In Firefox from version 3.5:DragEvent In Safari and Google Chrome:MouseEvent
drop	ondrop	3.5	Yes	Yes	Occurs on a possible target element when the dragged data is dropped on it.	In Firefox from version 3.5:DragEvent In Safari and Google Chrome:MouseEvent
error	onerror		No	Yes	Fires when an error occurs while loading an external file.	Event
-	onerrorupdate		Yes	No	Occurs on a databound object when it cannot update the data in the data source object.	Event
-	onfilterchange		No	No	Occurs after a filter has changed or finished a transition.	Event
finish	onfinish		No	Yes	Occurs when a marquee element has finished the scrolling animation.	Event
focus	onfocus		No	No	Occurs when an element receives focus.	Event
-	onfocusin		Yes	No	Occurs before an element receives focus.	Event
-	onfocusout		Yes	No	Occurs after an element loses focus.	Event
hashchange	onhashchange	8 3.6 10.6 5	Yes	No	Occurs when the hash subsection (begins with a '#' sign) of the current document's URL has changed.	Event
-	onhelp		Yes	Yes	Occurs after the user has pressed the F1 key.	Event
input	oninput		No	No	Occurs when the text content of an element is changed through the user interface.	Event
keydown	onkeydown		Yes	Yes	Occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.	KeyboardEvent
keypress	onkeypress		Yes	Yes	Occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.	KeyboardEvent
keyup	onkeyup		Yes	No	Occurs on an element that has the focus when the user releases a key.	KeyboardEvent
load	onload		No	No	Occurs when an object has been loaded.	Event
-	onlosecapture		No	No	Occurs when the object loses the mouse capture.	Event
message	onmessage	8 3	No	Yes	Occurs when the postMessage method sends a message to the current window.	MessageEvent
mousedown	onmousedown		Yes	Yes	Occurs when the user presses a mouse button over an element.	MouseEvent
-	onmouseenter		No	No	Occurs when the user moves the mouse pointer into the area of an element.	Event
-	onmouseleave		No	No	Occurs when the user moves the mouse pointer out of the element.	Event
mousemove	onmousemove		Yes	No	Occurs when the user moves the mouse over the element.	MouseEvent
mouseout	onmouseout		Yes	No	Occurs when the user moves the mouse pointer out of the element.	MouseEvent
mouseover	onmouseover		Yes	Yes	Occurs when the user moves the mouse pointer into the element.	MouseEvent
mouseup	onmouseup		Yes	Yes	Occurs when the user releases a mouse button over an element.	MouseEvent
mousewheel	onmousewheel		Yes	Yes	Occurs when the mouse wheel rolls.	MouseEvent in Firefox and Opera WheelEvent in Safari and Google Chrome
-	onmove		Yes	No	Occurs when the position of an element's top-left corner is changed.	Event
-	onmoveend		Yes	No	Occurs when the user stops dragging an absolute or relative positioned element in an editable region.	Event
-	onmovestart		Yes	Yes	Occurs when the user starts dragging an absolute or relative positioned element in an editable region.	Event
offline	onoffline	8 3	No	No	Occurs when the browser starts to work offline.	Event
online	ononline	8 3	No	No	Occurs when the browser starts to work online.	Event
overflow	-		No	No	Occurs when the contents or the size of an element is changed and it causes a scrollbar to appear.	UIEvent
overflowchanged	-		No	No	Occurs when the contents or the size of an element is changed and it causes a scrollbar to appear or disappear.	OverflowEvent
paste	onpaste		Yes	Yes	Occurs before the contents of the clipboard are pasted into the document.	Event
-	onpropertychange		No	No	Occurs every time when the value of an element's property is changed.	Event
RadioStateChange	-		No	No	Occurs when the state of a radio button has changed.	Event
readystatechange	onreadystatechange		No	No	Occurs when the load state of the data that belongs to an element or a HTML documentchanges.	Event
reset	onreset		No	Yes	Occurs on a form before it is reset.	Event
resize	onresize		No	No	Occurs when the size of an object has changed.	Event
-	onresizeend		Yes	No	Occurs when the user stops resizing an element in an editable region.	Event
-	onresizestart		Yes	Yes	Occurs when the user starts to resize an element in an editable region.	Event
-	onrowenter		Yes	No	Occurs on a data source object when the current row in it has changed.	Event
-	onrowexit		No	Yes	Occurs on a data source object before the current row in it changes.	Event
-	onrowsdelete		Yes	No	Occurs on a data source object before rows are deleted.	Event
-	onrowsinserted		Yes	No	Occurs on a data source object when rows have been inserted.	Event
scroll	onscroll		No	No	Occurs when the contents of an element have been scrolled.	Event
search	onsearch		No	No	Occurs when the user presses the ENTER key or clicks the 'Erase search text' button (x) in aninput:search field.	Event
select	onselect		No	Yes	Occurs after some text has been selected in an element.	Event
-	onselectionchange		No	No	Occurs when the selection in the document has changed.	Event
selectstart	onselectstart		Yes	Yes	Occurs at the start of a selection process.	Event
start	onstart		No	No	Occurs when a marquee element begins the scrolling animation and when a new loop starts.	Event
-	onstop		No	No	Occurs when the user aborts the loading of the document.	Event
submit	onsubmit		No	Yes	Occurs on a form element when the user clicks on a submit button in the form.	Event
textInput	-		Yes	Yes	Occurs when some characters are entered into an element.	TextEvent
underflow	-		No	No	Occurs when the contents or the size of an element is changed and it causes a scrollbar to disappear.	UIEvent
unload	onunload		No	No	Occurs before the browser unloads the document.	Event

External links:

Complete list of event types (W3C)
DOM events (Wikipedia)

Introduccion A Xhtml - www.TutosLand.com

View more documents from ImSimple.

Una forma muy divertida de aprender Javascript Muy Muy a fondo mas de lo que interesa en este curso es en la siguiente direccion es un machacaladrillos en el cual os invitan a hacer un curso de programacion y os animan a que participeis en el
desarrollo posterior del juego su url es esta http://javascriptgamer.com/brickslayer/

mas cosas que hay que saber sobre javascript:
disponemos del objeto document que seria nuestro tag <BODY> de nuestra pagina se le llama HTML dinamico al
XHTML/HTML generado a partir de inyeccion de codigo interpretado de Javascript..
en el curso de XHTML pudimos ver que podiamos crear forms imaginen que tenemos dos formularios podemos referenciar sus
elementos de la siguiente manera:
<body>                                                   document.
<form id="form1">                                  document.forms[0], document.forms["form1"], document.form1
<input type=Textbox id="nombre" Text=""></input>  document.forms[0].controls[0], document.forms["form1"],controls.TextBox[0] document.form1.controls[0]


<input type=button id="Abrirform2" Text="abrir2"></input>
</form>
</br>

<form id="form2"> document.forms[1],

<input type=Textbox id="nombre2" Text=""></input>   document.forms[1].controls[0]

<input type=Submit id="Enviar" Text="Enviar2"></input> document.forms[1].controls.Buttons[0]

</form>

</body>

imagine que por lo que sea desea mostrar el formulario2 al pulsar/volver a pulsar el botonAbrirform2

podriamos hacer 2 cosas acceder mediante el DOM al estilo de form2 y hacer un display='hidden' al pulsar en el evento onclick 

del boton 'Abrirform2' o si lo hacemos entre 2 envios de formularios recordar metodo POST inyectar el HTML

con document.write('<form id="form2">  & _

<input type=Textbox id="nombre2" Text=""></input> & _ 

<input type=Submit id="Enviar" Text="Enviar2"></input></form>');

esto puede resultar util si en nuestro ejemplo de validacion anterior en javascript queremos añadir texto indicando que no es valida la tecla pulsada.

tambien se puede referenciar los elementos de una pagina en forma de Arbol con var nodoItem = document.getElementbyId("nombrelemento");

y luego recorrer los nodos nodoItem=nodoItem.nextsibling(); ahora nodoItem apuntaria al boton para ir al nodo hijo
nodoItem=nodoItem.nextnode();

http://html.conclase.net/w3c/dom1-es/expanded-toc.html

Nota:

snippet en javascript para poner el foco en una caja de texto al cargar la pagina:

<Head>

<script type="text/javascript">
function setfocus(){
    document.forms[0].field.focus()
}
</script>

</Head>

..

<Body onload="setFocus()">...

...


un aspecto que debeis cuidar en vuestras paginas htm html es que no se puedan producir inyecciones del tipo javascript en
el codigo, por ejemplo una forma de hackear una pagina html seria si esta contiene una caja de texto


y le asignamos al evento onclick de un boton que haga una inyeccion de un marcador para ir a la busqueda 
de la palabra seleccionada dentro de la pagina y se redirija a ella con el objeto location. 


<html>
<head>
<script language="Javascript">
function Buscaycoloca()
{
var node=document.getElementbyTagName("BODY"); 
for(var i=0;node.TagName!="/body";i++)
  {
    if(node.nodeValue==caja.Text)
        { 
        node=node.previousNode();
        node.write("<a link='#palabra'>");
        node=node.nextNode();
        node.write("</a>");
        location.url=location.url + "?#palabra";
        }
          
  } 
}
</script>
<head>
<body>
Buscar:<input type="Text" id="caja"></input><input type="Button" onClick="Buscaycoloca()"></input>
texto1
<hr/>
texto2
</br>
texto3
</br>
texto4
<hr/>
texto5
</br>
</body>
</html>


aqui habria que tener cuidado lo correcto es hacer la comparacion if (node.Value==node.Text.ToString()
que lo que hace es cerrar entre comillas el valor Text de la caja caja por que si no hacemos esto podriamos poner como
contenido de la caja de texto palabra1");document.write("<script>nuestro script malicioso</script>"
y este ser interpretado al pulsar el boton.


Esto esta muy bien, mi pagina ya tiene contenido
y puede incluir scripts pero y el formato?


es cierto se me olvido de nuevo hablar el formato, pero mejor asi porque lo que mal empieza mal acaba y me expico
en HTML XHTML cada etiqueta tiene un nombre por ejemplo una tabla 
<table id="marcoprincipal"> un id o identificador y unos atributos
<tr height=550px>
<td COLSPAN=3>marco triple principal
</td>
</tr>
<tr>
<td width=10%>fila1</td><td width=80%>fila2</td><td>fila3</td>
</tr>
</table>
en este caso los atributos definen el % del ancho que ocupa la fila en la tabla de la pagina
o un ancho como habreis observado si habeis creado la pagina web con la tabla prevalece el ancho
de arriba a abajo de las celdas, es decir si eliminamos el tr height ocupa todo el alto de la pagina
y si sustituimos los % por un tamaño y px nuestra pagina tendra un formato para una resolucion fija


recomiendo el uso de tablas para crear los huecos con contenido que tendra la pagina sin embargo si
queremos aplicar mas formatos lo mas correcto es haciendolo aplicando una cosa llamada estilos CSS
o estilos de hoja en cascada
se puede aplicar un estilo encascada sobre caso todos los tags de HTML XHTML solo añadiendo el atributo
<TAG .. style="width:10%;height:60%;overflow:scroll;display:block" ...>
esto tambien hace bastante engorroso el diseño de nuestras paginas web puesto hay que ir etiqueta por etiqueta.
como hacemos entonces?
tenemos 2 opciones 
1)definir estilos para controles
2)definir estilos y aplicarlos a etiquetas 
3)lo mas inteligente hacer una mezcla de ambos


Nota:las hojas de estilo van en un archivo como puede ir linkado un archivo de javascript con extension .js
pero  en este caso con extension .css 
<HEAD>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<HEAD>
en su interior veremos algo parecido a esto:
.fondorojo50porciento
{
.background-color:#FF0000;
.width:50%;
.overflow:scroll; saca las barras de scroll si el contenido es mas grande que el estilo de su contenedor
}


INPUT
{
.background-color:#FFFF0F;
.texalign:right;
.width:100px;
.overflow:hidden; oculta el contenido si este es mas grande que el estilo de su contenedor

}

esto haria que automaticamente al linkar la hoja de estilo a la pagina todos los INPUT tengan el estilo establecido para INPUT automaticamente sin hacer nada mas.


si queremos que algun input especifico tenga el estilo fondorojo50porciento


<HTML>

<HEAD>

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

<HEAD>

<BODY>

<DIV STYLE="position:absolute;width=100px;height=200px">

<DIV style="position:relative;width=550px;height:200px">
<INPUT Type=Text CLASS="fondorojo50porciento"></INPUT><INPUT TYPE=Button></INPUT>

</DIV>

</DIV>

</BODY>
</HTML>


lo podeis comprobar por vosotros mismos ni que decir tiene que es preferible la sencillez de las tablas 
pero si optais por crear contenidos contenidos en DIV omitir las etiquetas SPAN y aplicar los estilos deseados a cada <DIV>
un ejemplo alucinante de como puede llegar a cambiar una pagina web solo con cambiarle los estilos la tenemos en CSS ZEN GARDEN
todas las paginas son la misma solo que cambiando los estilos !!!!alucinante!!!!




Aqui teneis un cruso introductorio a la aplicacion de las hojas de estilo CSS:

como colofon de todo esto os dejo una web donde aparecen snippets de HTML Java

script CSS y templates desde las cuales empezar vuestras creaciones web.

Recursos para generar CSS a traves de templates y Scripts e Imagenes.
Mas recursos para diseñar vuestras plantillas online

Comentaros que con Blogger estoy teniendo problemas de error 400 cuando intento pegar contenido con demasiados hipervinculos por eso seguire usando la incrustacion de paginas aunque tarde en carga el contenido un poco mas de lo habitual.

Se me olvidaba deciros que en javascript si incluis la palabra reservada debug; podreis al menos con IE ejecutar el codigo de cliente paso a paso para poder depurar fallos , tambien decir que si la pagina contiene un cierto marcado HTML y algun atributo se modifica dinamicamente completamente no os hara caso, es derir: <a id="locblank" href="" >linkzoombie</a>  no se puede volver a hacer util este link, pero si lo definimos dinamicamente con una funcion javascript si funcionara za id="locblank" href="javascript:devuelvedireccion()">linkdinamico</a>

Existen numerosos APIS , Application program Interface de web de terceros para que incluyais en vuestras propias web funcionalidades o personalizaciones de webs de terceros Facebook,Softonic,Google etc,
ahi os dejo las de Google que son con ejemplos y muy claras de entender para que os entretengais.

http://code.google.com/apis/ajax/playground/?exp=localsearch#object_literals
Aqui os dejo un "compresor/ofuscador de javscript" para que una vez probados y reprobados vuestros scripts originales los podais subir a vuestras paginas HTML sin miedo a que los modifiquen por 3eras personas.

---

a continuacion os pongo un articulo muy interesante sobre hosting gratuito de paginas web, en concreto de ASP .NET ahi podeis subir por el momento vuestras webs HTML con CSS y Javascript que tamien funcionaran para hacer pruebas , para ello necesitareis un programa ftp como este.

---

A continuacion os añado otro recurso importante un analizador de SEO para que podais posicionar vuestra pagina web de las primeras de la listas de Yahoo , Google o bing

---

en la pagina principal si buscais en el buscador o vais paso a paso por las entradas os encontrareis multitud de programas para diseñar graficamente los que son las imagenes que maquetaran vuestra web el tag HTML para añadir una imagen es <img src="url_completa_del_ftp_donde_colgais_la_imagen.gif o ./imagen1.gif" class="referencia_hoja_css_donde_se_indica_alto_y_ancho_de_la_imagen></img>

Bueno despues desta laaaaarga introduccion comenzamos oficialmente el curso de ASP .NET 4 a traves de ejemplos!!!
segundo prologo, uff y van dos, he pensado como orientar el curso podria hacer algo cerrado y que luego se puediese encuadernar pero nada mas lejos de mi intencion y como (ahora me vais a decir que no tengo abuela) me esta gustando como quedo la parte de XHTML Javscript y CSS pues seguire haciendo aunque intentando profundizar algo mas una referencia de referencias asi que no os asusteis si de nuevo aparecen subcursos o definiciones mas o menos amplias , otra cosa tambien habra que pasar por momentos "rollo" de teoria para entender que es loque va tras los "engranajes" del codigo , al menos lo basico en arquitectura. y sin mas ya empezamos.

1)Instalacion del Microsoft Web Developtment Studio. podeis encontrarlo aqui: