Lesson Plan - Lesson exmaple
Este artículo es la traducción del este PHP AJAX File Upload Progress Meter Updates
Este artículo es la traducción del este AJAX File upload Progress
Sigue el artículo Original
El grupo de scripts Native son extensiones básicas de los objetos por defecto en javascript (actualmente Mootools tiene código nativo para Array, Element, Function y String) Esos archivos modifican la manera en que esos elementos y toda instancia de ellos trabajan. Como es posible crear arrays o strings antes de que este código se ejecute, tienen típicamente un significado por el cual aplican estas funciones a los strings existentes. Por ejemplo, $A(myArray) solo te devuelve myArray con todas las extensiones aplicadas.
El artículo original en inglés se encuentra acá, y esta es una traducción libre, de aficionado, con los fines de practicar ingles y aprender mootools...
Etiquetas: Mootools
Dominar Ajax, Parte 5: Manipular el DOM
Importancia de la pronunciación del acrónimo.
De todas formas, el modelo de objeto de documento, se habría podido llamar Modelo de Nodos de documentos. Por supuesto , la mayoría de la gente no sabe que significa el término nodo, y DNM no es tan fácil de pronunciar como DOM, por eso es fácil entender porque el W3C siguió con DOM.
Etiquetas: Ajax
Introducir el DOM
var domTree = document;
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber=phoneNumberElement.Value;
Etiquetas: Ajax
El valor de los objetos
someDiv.style.height = "300px";
Listing 2. markup con anidación de elementos levemente difícil.
<html><head>
<title> Este es un poquito difícil</title>
</head>
<body><h1>Poné<u>mucha</u> atención, OK?
</h1>
<div>
<p>
Este p no es realmente <em>necesario</em>, pero hace la <span id="bold-text">estructura <i> y </i>la organización</span> de la página fácil de mantener
</p>
</div></body>
</html>
Listing 3. Anidación de elementos un poco más difícil.
<html><head><title> Este es un poquito difícil</title> </head>
<body>
<div id="main-body">
<div id="contents">
<table>
<tr> <th>Pasos </th> <th>Proceso </th> </th>
<tr> <td>1 </td><td>Descubre el <em>elemento raiz</em>. </td> </tr>
<tr> <td>2 </td><td>Trabajar con la <span id="code">cabecera</span> primero, es normalmente fácil. </td> </tr>
<tr> <td>3 </td><td>Trabajar en el <span id="code">cuerpo</span>. Solo <em>tomate tu tiempo </em>.</td> </tr>
</table>
</div>
<div id="closing">
Este link <em>no</em> está activado, pero si lo estuviera, las respuestas a esto <a href=" answers.html"><img="exercise.gif" /></a>estarían ahí. Pero <em>hacé el ejercicio igual </em>
</div>
</div>
</body>
</html>
Vas a encontrar las respuestas de estos ejercicios en los archivos GIF tricky-solution.gif en figura 2 y trickier-solution.gif en figura 3 al final de este artículo. No las mires hasta que hayas tenido el tiempo de resolverlos vos mismo. Te ayudara a entender como aplicar las reglas estrictamente para organizar el árbol y realmente ayudarte en tu búsqueda de dominar HTML y su estructura de árbol.
¿Qué pasa con los atributos?
¿Te encontraste con algún problema cuando trataste de descubrir que hacer con los atributos? Como mencioné, los atributos tienen su propio tipo de objeto, pero un atributo nos es realmente un hijo del elemento en donde aparece --elementos anidados y texto no están al mismo nivel de un atributo y vas a notar que las respuestas de los ejercicios en los listings 2 y 3 no tiene atributos mostrados.
Los atributos de hecho son almacenados en el modelo de objeto que usan los navegadores, pero son un caso especial. Cada elemento tiene una lista de atributos disponibles, separado de la lista de objetos hijos. Entonces un elemento div podría tener una lista que contenga un atributo llamado "id" y otro llamado "class".
Ten en mente que los atributos de un elemento deben tener nombres únicos; en otras palabras, un elemento no puede tener dos atributos "id" u dos "class". Esto hace que la lista sea muy fácil de mantener y acceder. Como vas a ver en el próximo artículo, podes simplemente llamar a un método como getAttribute("id") para obtener el valor de un atributo por su nombre. Podes también agregar atributos y establecer ( o poner a cero) el valor de un atributo existente con un llamado a método similar.
También vale la pena precisar que el hecho de que los nombres de los atributos sean únicos hace es ta lista diferente de la lista de objetos hijo. Un elemento p puede tener múltiples elementos em dentro de el. entonces la lista de objetos hijo puede contener ítem duplicados. Si bien la lista de hijos y la lista de atributos operan de manera similar, una puede contener duplicados (los hijos de un objeto)y la otra no (los atributos de un elemento objeto). Finalmente, solo los elementos pueden tener atributos, entonces los objetos de texto no tienen listas asociadas a ellos para almacenar atributos.
HTML descuidado
Antes de continuar, un tema nuevo vale la pena un tiempo cuando viene de cómo un navegador convierte el markup en una representación de árbol -- cómo un navegador se encarga del markup que no esta bien armado. Bien armado es en realidad un termino muy usado en XML y significa dos cosas básicas:
Etiquetas: Ajax
Que hace el markup
Algunos pensamientos adicionales sobre markup
Editar texto plano:¿bien o mal?
Los archivos de texto plano son ideales para guardar markup, pero eso no es así para editar el markup. Es perfectamente aceptable el uso de un IDE como Macromedia DreamWeaver --o el un tanto mas intrusivo Microsoft Front Page-- para trabajar en el markup de la página. Esos ambientes a menudo ofrecen atajos y ayuda al crear páginas Web, especialmente cuando estas usando CSS y JavaScript, cada uno de un archivo externo a un markup de pagina real. Muchos todavía prefieren el viejo y querido Notepad o Vi (lo confieso yo soy uno de ellos) y es una gran opción también. En todo caso, el resultado final es un archivo de texto lleno de markup.
Texto sobre la red: algo bueno.
Como ya se mencionó, el texto es un gran medio para un documento --como HTML o CSS-- que es transferido por la red cientos y miles de veces. Cuando digo que el navegador tiene un tiempo difícil representando el texto, significa específicamente transformar el texto en un página gráfica que los usuarios ven. Esto no tiene relación con como el navegador realmente recupera una página del servidor Web; en ese caso, el texto es todavía más la mejor opción.
Listing 1 Pagina HTML simple en markup de texto
<html>
<head> <title>Arboles, árboles por todas partes</title>
</head> <body>
<h1> Arboles, árboles por todas partes</h1>
<p> Bienvenido a una página <em>realmente</em> aburrida</p>
<div>
Vuelve pronto.
<img scr="come-again.gif" />
</div>
</body>
</html>
Etiquetas: Ajax
Dominar Ajax Parte 4: Explotar DOM para la respuesta Web
Convertir HTML en un Modelo de Objetos para hacer las paginas Web Dinámicas e interactivas
Nivel: Introductorio
Brett McLaughlin (brett@oreilly.com), Autor y Editor, O´Reilly y Asociados.
14 Mar 2006
La gran división entre programadores (que trabajan con aplacaiones Back-end) y Programadores Web (que gastan su tiempo escribiendo HTML, CSS y JavaScript)es de muchos años. Sin embargo, el Modelo de Objetos de Documento (DOM) rompe las distancias, y hace posible trabajar con ambos XML en el Back-end y HTML en el front-end y como un herramienta efectiva. En este artículo, Brett McLaughlin introduce el Modelo de Objetos de Documento, explica su uso en las páginas Web y empieza a explorar su uso desde JavaScript.
Como muchos programadores Web, probablemente hayas trabajado con HTML. HTML es como los programadores empiezan a trabajar en una página Web; HTML es a menudo la última cosa que hacen al terminar una aplicación o sitio, y un poco de colocación, color o estilo. Y tan común como es el uso de HTML, es la idea equivocada de que es exactamente lo que le pasa a ese HTML una vez que va al navegador para generar la pantalla. Antes, profundizo en que podrías pensar que sucede --y por que es probablemente erróneo--quiero que tengas claro el proceso involucrado en el diseño y el servicio de páginas web:
Etiquetas: Ajax