DOM – Propiedades de los nodos

Publicado el 20 abril, 2012 por Alejandro Leone

Un objeto nodo representa un único nodo en el árbol del documento. Los nodos de texto no puede tener hijos, y appendChild a  los nodos de este tipo devuelve un error de DOM.

<div id=principal></div>
<script>
x = document.getElementById('principal');
document.write('<li>nodeName: ' + x.nodeName);
document.write('<li>nodeValue: ' + x.nodeValue);
document.write('<li>nodeType: ' + x.nodeType);
document.write('<li>atributtes: ' + x.atributtes);
document.write('<li>childNodes: ' + x.childNodes);
document.write('<li>firstChild: ' + x.firstChild);
document.write('<li>lastChild: ' + x.lastChild);
document.write('<li>nextSibling: ' + x.nextSibling);
document.write('<li>ownerDocument: ' + x.ownerDocument);
document.write('<li>parentNode: ' + x.parentNode);
document.write('<li>previousSibling: ' + x.previousSibling);
document.write('<li>innerHTML: ' + x.innerHTML );
</script>
nodeName: DIV
nodeValue: null
nodeType: 1
atributtes: undefined
childNodes: [object NodeList]
firstChild: null
lastChild: null
nextSibling: [object Text]
ownerDocument: [object HTMLDocument]
parentNode: [object HTMLBodyElement]
previousSibling: null
innerHTML:
Publicado en wordpress | Etiquetado , , , , , | Deja un comentario

SVG: conceptos importantes

Publicado el 17 abril, 2012 por Alejandro Leone

Objetos Gráficos

Para formatos textuales, el modelado es típicamente en el nivel de párrafos y frases. Del mismo modo, SVG gráfica en el nivel de objetos gráficos más bien que en puntos individuales.

SVG proporciona un elemento de path general y también provee
formas básicas como rectángulos y elipses. Éstos son convenientes para manjar la codificación y puede ser usada de los mismos modos que el elemento de path. SVG proporciona el control de la coordenada en el cual los objetos gráficos son definidos y
las transformaciones que serán aplicadas durante la interpretación.

Símbolos

Habría sido posible definir algunos símbolos estándares ¿Pero cuáles? Siempre habría
símbolos adicionales para electrónica, cartografía, organigramas, etc.

SVG permite que los usuarios creen, reutilicen y compartan sus propios símbolos sin requerir un registro centralizado. Las comunidades de usuarios pueden crear y refinar los símbolos que ellos necesitan, sin necesidad de preguntar a un comité. Los diseñadores pueden estar seguros del aspecto gráfico de los símbolos que usen y no tienen que preocuparse de símbolos no apoyados.

Los símbolos pueden ser usados en tamaños diferentes y orientaciones, y
pueden ser diseñados de nuevo para caber en con el resto del gráfico.

Efectos de Trama

Mucha gráfica de Web existente usa las operaciones de filtración para crear aspectos borrosos, sombras, etcétera.

SVG permite la especificación declarativa de filtros, individualmente o en combinación. Éstos son especificados de tal modo que la gráfica es todavía escalable y displayable en diferente resoluciones.

Fuentes

El material gráficamente rico es a menudo muy dependiente de la fuente particular usada y el espaciado exacto del glyphs. En muchos casos, los diseñadores convierten el texto a contornos para evitar problemas de substitución de fuente. Esto significa que el texto original no está presente y así searchability y accesibilidad sufren.

En respuesta a la reacción de diseñadores, SVG incluye elementos de fuentes de modo que tanto el texto como el aspecto gráfico sean conservados.

Animación

La animación puede ser producida vía manipulación a base de escritura de el documento, pero es difícil de corregir e intercambiar entre instrumentos authoring es más difícil. Otra vez en respuesta a la reacción de la comunidad de diseño, SVG incluye declarativo de los elementos de animación. Esto permite los efectos animados comunes en gráfica de Web.

Publicado en svg | Deja un comentario

SVG: explicación del nombre SVG

Publicado el 16 abril, 2012 por Alejandro Leone

SVG significa: Gráfica de Vector Escalable, un XML

Escalable

Ser escalable permite aumentar o disminuir uniformemente. En términos de gráfica, medios escalables no limitados con el tamaño de pixel. En la Web, escalable es una la tecnología particular que puede crecer a un número grande de archivos, a número grande de usuarios, una amplia variedad de aplicaciones. SVG, siendo una tecnología de gráficos para la Web, es escalable en ambos sentidos de la palabra.

La gráfica de SVG es escalable a resoluciones diferentes, de modo que la salida, por ejemplo, impresa use la resolución de la impresora y puede ser mostrada en el mismo tamaño en pantallas de resoluciones diferentes. El mismo SVG gráfico puede ser colocado en tamaños diferentes en el mismo sitio Web, y reutilizado en diferente tamaños en páginas diferentes.

Vector

La gráfica de vector contiene objetos geométricos como líneas y curvas. Este da mayor flexibilidad comparada a los formatos de trama (como PNG y JPEG) que tienen que almacenar la información para cada pixel del gráfico. Típicamente, los formatos de vector pueden también integrarse a imágenes de trama.

SVG también permite filtrar efectos, de modo que el movimiento a un formato de vector no signifique la pérdida de efectos populares como sombras de gota suaves.

Gráfica

Las gramáticas XML existentes representan cualquier tipo de información. Típicamente proveen sólo rudimentarios gráficos, a menudo menos capaces que el elemento HTML ‘img’.

SVG llena un hueco en el mercado proporcionando una estructurada descripción de vector y gráfica de vector/trama mezclada; esto puede ser usado independiente, o como un XML.

Publicado en svg | Etiquetado , , , , , , , | Deja un comentario

Cambiar elemento HTML con getElementById – JavaScript

Publicado el 28 marzo, 2012 por Alejandro Leone

Cambiamos el contenido de <p> con el id=prueba utilizando getElementById
Para manipular los elementos HTML, JavaScript se utiliza el método getElementById () . Este método tiene acceso al elemento con el id especificado.
<html>
<body>
<h1>Cambiar elemento HTML con getElementById</h1>
<p id="prueba"></p>
<script type="text/javascript">
document.getElementById("prueba").innerHTML=Date();
</script>
</body>
</html>

Publicado en JavaScript | Etiquetado , | Deja un comentario

document.write – JavaScript

Publicado el 28 marzo, 2012 por Alejandro Leone

Escribir en el documento HTML con JavaScript:

En este sencillo ejemplo escribimos dentro de un elemento <p>

<html>
<body>
<h1>document.write</h1>
<script type="text/javascript">
document.write("<p> Hola Mundo!</p>");
</script>
</body>
</html>

En este sencillo ejemplo escribimos la fecha utilizando Date() dentro de un elemento <div>

<html>
<body>
<h1>document.write</h1>
<script type="text/javascript">
document.write("<div>" + Date() + "</div>");
</script>
</body>
</html>

Publicado en JavaScript | Deja un comentario

Buscar y reemplazar con SED en LINUX

Publicado el 22 marzo, 2012 por Alejandro Leone

Buscar y reemplazar con unas simple instrucción en LINUX utilizando el comando SED.

Buscar y reemplazar pisando el archivo original:

sed -i 's/textoViejo/textoNuevo/g' nombreDeArchivo

—–
Buscar y reemplazar haciendo un backup (creando un nuevo archivo .backup o, si ya existía, lo pisamos) y pisando, posteriormente, el archivo original:

sed -i.backup 's/textoViejo/textoNuevo/g' nombreDeArchivo

Nota 1: En lugar de .bakcup se puede utilzar cualquier extensión
—–
Buscar y reemplazar haciendo un backup (creando un nuevo archivo .backup o, si ya existía, lo pisamos) y pisando, posteriormente, el archivo original.

sed -i.backup 's/textoViejo/textoNuevo/g' *.txt

Nota 1: Al utilizar el ‘*’, modificamos todos los archivos del directorio (en este ejemplo los .txt) y creamos un archivo .backup para cada uno.

Nota 2: Se genera un .backup por cada archivo (en este ejemplo .txt) en el directorio sin importar si se realiza o no algún cambio en el archivo.
—–
Un caso mas complejo:

sed -i.backup '/inicio/,/fin/s/textoViejo/textoNuevo/g' nombreDeArchivo

Encuentra la primera instancia de ‘inicio’.
Comienza la búsqueda de ‘textoViejo’ en la línea corespondiente.
Se reemplaza por ‘textoNuevo’.
Finaliza cuando se encuentra con la cadena ‘fin’ en una línea posterior
Cada vez que se encuentra con ‘inicio’ comienza a sustituir hasta que encuentra la cadena ‘fin’.

Publicado en linux | Etiquetado , , , | Deja un comentario

SVG CSS: rectángulo SVG con hoja de estilo CSS

Publicado el 21 marzo, 2012 por Alejandro Leone

Como trabajar con una figura SVG y una hoja de estilo CSS en un archivo .php

rectangulo.php

<!DOCTYPE html> 

<html lang="es">

 <head> 

 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <link rel="stylesheet" type="text/css" href="css.css" /> 

 </head>

 <body>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
             width="5cm" height="10cm" viewBox="0 0 1000 500">

 <rect x="10" y="10" width="600" height="90" class="clase1" />

 </svg>

 </body>

</html>

css.css

rect.clase1 {
 fill: green;
 stroke: blue;
 stroke-width: 20;
 opacity:0.5
}
Publicado en css, svg | Etiquetado , , , | Deja un comentario

CakePHP y AJAX – Mostrar una div

Publicado el 12 marzo, 2012 por Alejandro Leone

Como mostrar un td o una div con AJAX en CakePHP 1.3

Asumimos que ya descargo las librerias www.prototypejs.org y http://script.aculo.us y están situadas en /app/webroot/js. Además que se han incluidos las librerías Prototype y script.aculo.us en app_controllers.php

En el archivo views/posts/index.ctp agregamos un botón junto a los tradicionales botones de Eliminar, Editar y Ver.


<?php
// views/posts/index.ctp
// titulo $ajax->link
$titulo = 'link AJAX';
// url $ajax->link
$href = array('controller'=>'posts' ,'action'=>'viewAjax', $post['Post']['id']);
// acción $ajax->link
$opcion = array( 'update' => 'divout');
// imprimimos en pantalla el botón
echo ($ajax->link($titulo, $href, $opcion));
?>

Justo luego de que se cierre el tr que contiene los datos de cada posts agregamos un nuevo tr que contendrá la respuesta AJAX. Lo más importante es que le asignamos a cada td el id del post que corresponde.


<tr>
<td id="<?php echo $post['Post']['id']; ?>" colspan="8" >
</td>
</tr>

Terminamos con la vista.

Podemos probar el script.

Publicado en AJAX, cakephp 1.3 | Deja un comentario

Como incluir AJAX y JavaScript en CakePHP 1.3

Publicado el 8 marzo, 2012 por Alejandro Leone

Para incluir las librerías de AJAX lo primero es editar el controlador.

<?php
class PostsController extends AppController {
var $name = ‘Posts’;
/* Para poder cargar las librerías Prototype y script.aculo.us
* necesitarás incluir los helpers Ajax y Javascript en tu controlador
*/
var $helpers = array(‘Ajax’, ‘Javascript’); 

/* Si se agrega RequestHandler en el controlador,
* CakePHP automáticamente aplicará el layout Ajax
* cuando se realize una petición de una acción mediante AJAX

*/
var $components = array( ‘RequestHandler’ );
?>

Luego incluir los los links a los archivos Js ubicados en /?app/?webroot/?js

<!– archivo app/views/layout/default.ctp –>
<head>
<?php
echo $html->script(‘prototype’);
echo $html->script(‘scriptaculous.js’);
?>
</head>

 

 

file app/views/layout/default.ctp
Publicado en AJAX, cakephp 1.3, js, prototype, scriptaculous | Etiquetado , , | Deja un comentario

$session->read Leer los valores del usuario registrado en una sesión de cakephp 1.3

Publicado el 2 marzo, 2012 por Alejandro Leone

Como usar $session->read en cakephp 1.3 . Leer los valores del usuario registrado en una sesión de cakephp 1.3

Ejemplo: En la tabla “User” se encuentran las columnas “id” y “username”

Para mostrar el array con todos los valores del usuario registrado en la actual sesión en cakephp

print_r($session->read(‘Auth.User’));

Para mostrar el nombre del usuario registrado en la actual sesión en cakephp

echo $session->read(‘Auth.User.username’);

Para mostrar el id del usuario registrado en la actual sesión en cakephp

echo $session->read(‘Auth.User.id’);

 

Publicado en cakephp 1.3, php | Deja un comentario