Cómo acceder a las propiedades de las imágenes.

El lenguaje JavaScript posee un objeto propio asociado a cada una de las imágenes de un documento HTML, el objeto Image. Además, también posee un array particular, el array images, que contiene todas las imágenes presentes en la página.

Dentro de la jerarquía propia de este lenguaje, tanto el objeto Image como la matriz images se encuentran incluidos dentro del objeto document, que a su vez se encuentra incluido en al objeto principal window.

Por lo tanto, al ser estos objetos elementos propios del lenguaje, podemos referirnos a ellos y acceder a sus propiedades de forma directa, sin tener que recurrir a capas ni otros elementos externos. Así, podemos acceder directamente a una propiedad cualquiera de una imagen del documento de dos formas diferentes:

1) Mediante el objeto Image, siendo la sintaxis general en este caso la siguiente:

document.nombre_imagen.nombre_propiedad

donde nombre_imagen es el nombre asignado a la imagen mediante su atributo NAME (es condición indispensable para usar este método el haber asignado a la imagen un nombre identificador único mediante el atributo NAME). nombre_propiedad define la propiedad a la que queremos acceder.

2) Mediante la matriz images[]. Esta matriz contiene todas las imágenes del documento, empezando su índice interno por 0, como en todos los arrays de JavaScript. La sintaxis general es del tipo:

document.images[indice].nombre_propiedad

La equivalencia entre indice y la imagen que le corresponde se establece de forma secuencial, de tal forma que images[0]representará a la primera imagen insertada en el BODY de la página, images[1] a la segunda, y así sucesívamente, salvo que se haga una declaración explícita al respecto.

El array images posee la propiedad length, que almacena el número de imágenes presentes en el documento. Para obtener éste, basta con escribir:

document.images.length.

Ejemplos:

Acceso a la propiedad WIDTH de la imagen bandera:

document.images.bandera.width

o bien,

document.bandera.width

Acceso a la propiedad SRC de la imagen bandera:

document.images[1].src

Como ejemplo práctico, vamos a mostrar en pantalla la anchura de la imagen siguiente:

que hemos introducido en la página mediante:

<img src="images/logo.gif" name="logotipo" width="249" height="28" border="0">

y para ello escribimos:

<form>

<input type="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)">

</form>

que podemos ver en acción pulsando el botón creado:

De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por ejemplo, si queremos cambiar la anchura de la imagen anterior basta con escribir:

document.logotipo.width="100"

que podéis comprobar pulsando el siguiente botón:

Nota: el atributo width es de sólo lectura para Nestcape 4x, por lo que podemos leer su valor, pero no modificarlo. En cambio, sí podemos hacer esto en Internet Explorer y en Nestcape 6x.

Podéis ver más sobre las propiedades o atributos de una imagen en el manual del tratamiento de imágenes en Javascript pero vamos a ver un resumen de ellas en el siguiente capítulo.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Inscripciones Abiertas el lunes 04 de Mayo

 

El lunes 04 de Mayo: Inscripciones abiertas, Diplomado de Programación,  Diseño Digital, Integración Web y Mercadeo  Inscripciones abiertas.

Horarios: Lunes 04 de Mayo 2015 CLASES PRESENCIALES:

• Mañana  9am a 12m
• Lunes a Viernes de 9am a 12m:  Diplomado de Diseño
  
• Lunes a Viernes de 9am a 12m:  WordPress
  
• Lunes a Viernes de 9am a 12m:  Especialización de PHP
  
• Lunes a Viernes de 9am a 12m:  Java nivel 2
  
• 
  
• Tarde 2pm a 5pm
• Lunes a Viernes de 2pm a 5pm:  HTML 5
  
• Lunes a Viernes de 2pm a 5pm:  PHP nivel 3
  
• Lunes a Viernes de 9am a 12m:   Diplomado de Programación
  
• Lunes a Viernes de 9am a 12m:   After Effects
  
• Noche 6pm a 9pm
• Lunes a Viernes de 6pm a 9pm:  PHP orientado a objeto
  
• Lunes a Viernes de 6pm a 9pm:  JavaWebservices
  
• Lunes a Viernes de 6pm a 9pm:  Android nivel 2
  
• Lunes a Viernes de 6pm a 9pm:  Diplomado de Programación
  

  Cursos online CLASES EN VIVO con el profesor abiertos:

Curso de WordPress 100% online 04 de Mayo 2015

Curso Webmaster 100% on line 11 Mayo 2015

Curso de Marketing viral on line 12 de Mayo 2015

Curso Especialización en Android 100% on line 01 de Junio 2015

Descripción, características de las plantillas PHP

Las plantillas o en inglés templates es uno de los componentes típicos de una aplicación web. En PHP hay diversas librerías de plantillas y muchas muy populares como Smarty. En esta ocasión vemos un sistema de plantillas no tan popular pero que es bastante potente, sencillo y rápido.

Cuando trabajamos con sistemas de plantillas a veces tenemos que aprendernos nuevas sintaxis para realizar las operaciones típicas con las plantillas, inyección de datos en ellas, iteración sobre estructuras como arrays, etc. La sintaxis del sistema de plantillas suele ser diferente de la del propio lenguaje donde estamos trabajando y aunque eso generalmente tampoco es un problema muy serio (pues siempre esa sintaxis es sencilla y fácil de memorizar) obliga a que las plantillas se deban compilar antes de ser usadas.

En el caso de "Plates" tenemos un sistema de plantillas PHP nativo. Esto es, un sistema que no implementa nueva sintaxis, sino que usa la propia sintaxis y estructuras de control de PHP para poder expresar las operaciones típicas. Por tanto, tampoco requiere compilación de las plantillas como Twig o Smarty.

Su nombre viene de temPLATES y podemos encontrarlo en esta dirección: http://platesphp.com/

Es una solución ideal para todos los que prefieran expresar las plantillas con PHP, pero sin renunciar a funcionalidades de sistemas de plantillas avanzados. Está inspirado en Twig, el motor de plantillas de Symfony. Es rápido y te ayuda a solucionar diversas necesidades sin demasiadas complicaciones, léase:

• Herencia en plantillas 
• Creación de múltiples layouts 
• Organización de las plantillas en directorios con espacios de nombres 
• Envío de datos a las plantillas y posibilidad de compartirlos entre varias 
• Extensibilidad por funciones o grupos de funciones (extensions) 
• Funciones de escape para los datos volcados en las plantillas 
• Independiente del framework o aplicación, adaptable a cualquier proyecto.

Instalación de PlatesPHP

La manera recomendada de instalar esta librería de plantillas es a través de Composer, donde será tan sencillo como indicar la dependencia. Lo encuentras en Packagist en esta URL: https://packagist.org/packages/league/plates

Solo tienes que agregar el require en tu composer.json. ("league/plates": "3.*")

Nota: Aquí en DesarrolloWeb.com tienes un manual de Composer para poder aprender a usar el gestor de dependencias de PHP.

Usar el sistema de plantillas Plates

Una vez instalada la dependencia (e invocado el autoload de Composer), para comenzar a usar tus templates debes instanciar la clase Engine, de la que depende todo el motor de plantillas.

$templates = new LeaguePlatesEngine( 'ruta/a/las/plantillas');

Como ves, al instanciar el Engine le debes indicar la ruta donde están tus plantillas.

Nota: La ruta de las plantillas puede estar en cualquier lugar del sistema de archivos del servidor. La documentación de Plates no informa muy bien si la ruta es relativa a un lugar u otro. Yo de momento estoy usando la ruta absoluta al directorio donde tengo las plantillas, por ejemplo: /var/www/ejemplo/application/views.

Si todas las plantillas las tienes en el mismo directorio, o subdirectorios de éste, ya lo tienes listo. Pero si acaso las prefieres organizar por diferentes directorios en rutas dispersas, no tienes más que agregarlos en el Engine.

$templates->addFolder('espacio_nombres_plantillas', 'otra/ruta/diferente');

Para ejecutar un template tenemos que indicar qué plantilla queremos renderizar. Hay diversas maneras, pero la más rápida es simplemente usar el método render() del Engine, indicando el nombre de la plantilla y los datos que le queramos enviar.

$templates->render("plantilla_a_renderizar", ["dato" => "Valor del dato"]);

La plantilla que se espera "plantilla_a_renderizar" tiene extensión ".php", pero podríamos modificarla si se desea, pero como ves, no hace falta indicar el ".php" en el nombre de la plantilla a invocar. Si la plantilla está en un subdirectorio puedes indicarlo con una barra.

$templates->render("subcarpeta/plantilla_a_renderizar");

Como ves, los datos que se envían a la plantilla se indican solo de manera opcional. Es decir, si no tenemos que enviarle datos, no necesitamos decirle nada. Los datos que llegan al script de la plantilla los encontrarás en el scope global, es decir, como si fueran variables globales.

Si la plantilla está en otra carpeta de las que guardaste con addFolder(), indicas el espacio de nombres de esa ruta con "::" separando al nombre de la plantilla que buscas.

$templates->render('espacio_nombres_plantillas::plantilla_a_renderizar');

Uso de Layouts

Generalmente todo sitio web tiene una cabecera y un pie. Con los layouts puedes conseguir que toda la estructura de la página (tanto la cabecera como el pie) estén en el mismo archivo.

Aquí puedes ver un layout: (archivo milayout.php)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>titulo de la empresa</title>

</head>

<body>

    <header>

        Logo de la empresa

    </header>

    <?=$this->section('content')?>

    <footer>

        Enlaces del pie

    </footer>

</body>

</html>

Como ves, el bloque $this->section('content') es lo que se colocará como cuerpo de la página para este layout.

Ahora puedes ver una plantilla que usa este layout.

<?php $this->layout('milayout') ?>

<p>Este es el cuerpo para esta página.</p>

<p>Me gusta PlatesPHP</p>

Con la primera línea $this->layout('milayout') estamos indicando que el HTML del layout que se va a usar está en milayout.php. El resto del documento es el cuerpo que se colocará en el template, una vez aplicado el layout.

Conclusión

Con este artículo te hemos contado muy muy por encima lo que se puede hacer con Plates y te hemos dado una de las muchas alternativas que existen para producir HTML a base de plantillas. Pero este artículo no te debe confundir, si quieres profundizar en Plates verás que el template system se puede hacer mucho más complejo. Es sencillo para quienes están comenzando con sistemas de plantillas en PHP, pero suficientemente avanzado para los que quieren aprovechar características avanzadas típicas de los motores de templates modernos.

El sitio de plates está bien documentado y es sencillo de leer y aprender sobre la marcha aquello que necesitamos. Solo falta un poco más de comunidad y tutoriales de terceras personas para aclarar posibles dudas.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Clases para la maquetación CSS con 960 Grid System

Las clases CSS que define este framework CSS son bastante sencillas de entender y de utilizar en nuestros diseños. Además, dado que son realmente pocas, no tendremos problemas en dominarlas todas y utilizarlas con soltura. En este artículo queremos ofrecer unas explicaciones detalladas sobre las distintas clases que incorpora 960 Grid System, para que podamos utilizar el framework sin problemas y podamos entender también los próximos artículos, en los que veremos un ejemplo de diseño.

En los anteriores capítulos publicados en DesarrolloWeb.com en el Manual de 960 Grid System, ya explicamos qué es un framework CSS y ofrecimos unas primeras notas sobre éste, que incluían la descripción de las clases más importantes como container_xx y grid_xx. Convendría sin duda leer desde el principio este manual, pero de cualquier forma vamos a explicar todas las clases disponibles para que ofrecer una documentación completa.

Class container_xx: 

Esta clase sirve para definir un contenedor, donde colocaremos luego todos los contenidos de nuestro diseño. Existen dos tipos de contenedores, de 12 y 16 columnas, que se forman con las clases container_12 y container_16.

Class grid_xx: 

La clase grid_xx define un elemento del diseño que será colocado en un contenedor y ajustado a la rejilla que forma 960 Grid System. El valor "xx", de grid_xx, expresa el tamaño de la rejilla que se está definiendo. A un número mayor, más anchura se dedicará a este elemento. En los diseños con el container_12 se tienen doce columnas y con grid_xx conseguiremos también doce distintos anchos de columnas. Por ejemplo, con grid_1 se obtendrá un elemento con una anchura igual a un doceavo del espacio total de la página, con grid_8, obtendríamos un elemento de anchura igual a 8 doceavos del espacio y así.. En el caso del container_16 tendríamos hasta 16 tipos de elementos con distintas anchuras, desde grid_1 hasta grid_16.

Estas son las clases principales, que ya explicamos con mayor detalle en el artículo Lo básico sobre el uso de 960 grid

Ahora veamos otras clases que sin lugar a dudas también nos vendrán bien y tendremos que saber utilizar para implementar diseños medianamente avanzados con el framework CSS.

Class alpha y class omega: 

Estas dos clases sirven cuando estamos anidando unos grid dentro de otros, para ajustar los márgenes de los distintos elementos anidados. Como deberíamos saber ya, porque se dijo en el primer artículo de este manual, las clases grid_xx tienen un margen de 10 píxeles a la izquierda y la derecha. Por ejemplo grid_12 que utiliza todo el ancho de la página, en realidad tiene 940 píxeles, que es el resultado de a 960 restarle 10 píxeles de margen a la izquierda y otros 10 a la derecha. Si metemos unos grid_xx dentro de otros, los márgenes de los grid_xx anidados van incrementándose y esto nos haría que los espacios disponibles no fueran suficientes para contener todos los elementos. Con las clases alpha y omega lo podremos solucionar. Quizás logre explicarlo mejor a la vista de una imagen. 

En la imagen anterior vemos 4 capas, a las que les hemos puesto un color de fondo para saber dónde están. La primera, arriba del todo con fondo rosa es la cabecera, que no nos interesa mucho para la explicación, pero nos viene bien verla para hacernos una idea de los espacios. Luego tenemos la Capa1, con color azul, que contiene a la Capa2, con color verde, que a su vez contiene a la Capa3, con color de fondo gris. Quizás en mi maquetación desearía que la Capa3 estuviera alineada en la vertical con la capa de cabecera, pero realmente debido a los márgenes de las capas 2 y 3, se deja ver un espacio vacío que tiene los fondos de las capas que se están por debajo de la Capa 3.

Estos espacios vacíos seguramente no nos molesten sólo estéticamente, sino que podría ocurrir que las distintas grid que hemos colocado en el diseño no tengan el espacio suficiente para posicionarse correctamente. Al perder 10 + 10 píxeles por esos márgenes, puede que no quepan todas las cajas colocadas en el diseño con las clases grid_xx.

En fin, que para solucionar este problema, se deben colocar las clases alpha y omega. La clase alpha sirve para eliminar el margen de 10 píxeles a la izquierda y la clase omega para eliminar el margen de 10 píxel de la derecha. Estas dos clases debemos utilizarlas siempre que tengamos un grid_xx que tenga a su vez otros grid_xx anidados. El primer grid_xx hijo debería tener también la clase alpha y el que coloquemos como último debe tener también la clase omega.

Class prefix_xx: 

Esta clase sirve para anclar una grid_xx dejando un espacio vacío a la izquierda. Por ejemplo, prefix_1 haría que la grid tuviera el espacio libre de la anchura de 1 columna a la izquierda. Esto nos sirve en el momento que queramos dejar un espacio antes de meter una capa con grid_xx que no queremos que empiece a la izquierda del todo. Veamos esta imagen:

Observamos el espacio vacío a la izquierda de la capa que aparece abajo con fondo blanco y borde gris. Ese espacio vacío lo hemos conseguido metiendo la clase prefix_5 a la capa. Ahora bien, este espacio vacío también se cuenta como espacio de la capa, lo que veremos mejor si colocamos un color de fondo a la capa sobre la que hemos aplicado el prefix_5, como aparece en esta imagen:

Esta capa que hemos visto en la imagen tiene definidas las clases grid_7, porque el área donde meteremos los contenidos ocupa sólo el espacio de 7 columnas, y prefix_5, para que deje 5 columnas de espacio vacío a la izquierda, antes de poner los contenidos. (En mi diseño con container_12, llego a las 12 columnas entre la anchura del elemento grid_7 y el espacio vacío que he colocado con prefix_5)

Class suffix_xx: 

De una manera similar a prefix_xx, la clase sufix_xx sirve para colocar un espacio vacío a la derecha de la capa. La capa tendrá una anchura definida con la clase grid_xx y luego con suffix_xx podremos hacer que tenga espacio adicional vacío a la derecha. Lo veremos mejor con una imagen. 

En la imagen anterior podemos ver como el contenido de la capa de fondo rosa se coloca dejando un espacio vacío a la derecha. Al definir la capa hemos colocado una clase grid_8, para una anchura de 8 columnas y luego una clase suffix_1, para un espacio en blanco a la derecha de 1 columna. En la práctica, el espacio total que estoy ocupando es 9 columnas (8 por definir grid_8 mas 1 por definir suffix_1), luego la siguiente capa, donde he puesto la palabra "buscador" tal como se ve en la imagen, tendrá una anchura de 3 columnas. Esto para mi diseño de container_12, que estará ocupando la anchura completa, sumando el grid_8 + suffix 1 de la primera capa, mas el grid_3 de la segunda.

Ahora ya conoces todas las class CSS del framework 960 Grid

Con esto ya hemos visto todas las distintas clases CSS que tiene 960 Grid System. Esperamos que hayáis podido entenderlas bien y que ahora no resulte difícil aplicarlas para la consecución de vuestros objetivos de diseño. No obstante, en el siguiente artículo veremos un ejemplo de maquetación CSS en el que utilizaremos todos los tipos de class CSS disponibles. Aun será un ejemplo simplificado, pero suficiente para que podamos ver las aplicaciones prácticas de lo aprendido hasta ahora.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información