Alineación de imágenes con HTML

Vimos en su momento el atributo align que nos permitía alinear el texto a derecha, izquierda o centro de nuestra página. Dijimos que este atributo no era exclusivo de la etiqueta <p> sino que podía ser encontrado en otro tipo de etiquetas.

Pues bien, <img> resulta ser una de esas etiquetas que aceptan este atributo aunque en este caso el funcionamiento resulta ser diferente.

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o <div>. En este caso, lo que incluiremos dentro de esa etiqueta será la imagen en lugar del texto:

Este código mostrará la imagen en el centro:

<div align="center"><img src="logo.gif"></div>

Quedaría así:

Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo align. En este caso, la utilidad que le damos difiere de la anterior.

El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma embebemos nuestras imágenes dentro del texto de una manera sencilla.

Aquí podéis ver el tipo de código a crear para obtener dicho efecto:

<p> 

<img src="imagen.gif" align="right">Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla... 

</p>

Quedaría así:

Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...

<p> 

<img src="imagen.gif" align="left">Texto tan extenso como queramos que cubrirá la parte derecha de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla... 

</p>

Quedaría así:

Texto tan extenso como queramos que cubrirá la parte izquierda de la imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla bla bla...

Si en algún momento deseásemos dejar de rellenar ese espacio lateral, podemos pasar a una zona libre introduciendo un salto de línea <br> dentro del cual añadiremos un atributo: clear

Así, etiquetas del tipo:

<br clear="left"> 

Saltara verticalmente hasta encontrar el lateral izquierdo libre. 

<br clear="right"> 

Saltara verticalmente hasta encontrar el lateral derecho libre. 

<br clear="all">

Saltará verticalmente hasta encontrar ambos laterales libres.

Ejemplo de clear:

Texto tan extenso como queramos que cubrirá la parte izquierda.  Esto está debajo de la imagen.

Existen otro tipo de valores que puede adoptar el atributo align dentro de la etiqueta <img>. Estos son relativos a la alineación vertical de la imagen. 

Supongamos que escribimos una línea al lado de nuestra imagen. Esta línea puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una misma línea tengamos varias imágenes de alturas diferentes que pueden ser alineadas de distintas formás. 

Estos valores adicionales del atributo align son:

top 

Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen más alta, ambas imágenes presentaran el borde superior a la misma altura.

bottom 

Ajusta el bajo de la imagen al texto.

Absbottom 

Colocara el borde inferior de la imagen a nivel del elemento más bajo de la línea.

middle 

Hace coincidir la base de la línea de texto con el medio vertical de la imagen.

absmiddle 

Ajusta la imagen al medio absoluto de la línea.

Estas explicaciones, que pueden resultar un poco complicadas, pueden ser más fácilmente asimiladas a partir con un poco de practica.

Nos queda explicar como introducir debajo de la imagen un pie de foto o explicación. Para ello tendremos que ver antes de nada las tablas, en el próximos capítulos...

Fuente:enlace

Callback de funciones jQuery

Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se ejecutarán una detrás de otra.

A menudo cuando hacemos aplicaciones enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de encadenar varias llamadas a funciones, para que una se ejecute detrás de otra, creando un efecto más elaborado. En este artículo veremos lo sencillo que es realizar lo que en inglés se llama "callback", es decir una función que se ejecuta después de otra.

Apilar funciones, para que se ejecuten una detrás de otra, nos servirá para hacer muchas cosas. En nuestro día a día con jQuery iremos encontrando la utilidad, pero de momento para explicar un caso en el que nos resultará imprescindible, se me ocurre que deseemos hacer una secuencia de efectos y cambios dinámicos en un elemento.

Por ejemplo imaginemos que se desea ocultar una capa con un efecto de fundido (de opaco a transparente), luego moverla a otra posición y volverla a mostrar (ya en la nueva posición) con otro efecto de fundido (en este caso de transparente a opaco). En principio podríamos pensar en hacer un código como este:

$("#micapa").fadeOut(2000);
$("#micapa").css({top: 300, left:200});
$("#micapa").fadeIn(2000);

En este caso estamos alterando las propiedades de una capa con id="micapa". Primero llamamos a fadeOut() para ocultarla con un fundido, que durará 2 segundos (véase el parámetro 2000, que son los milisegundos que durará el efecto). Luego alteramos la posición de la capa, cambiando sus atributos CSS. Para acabar la volvemos a mostrar con un fundido de otros 2000 milisegundos.

Nota: para poder entender mejor estas llamadas a efectos, por favor, consulta el artículo Efectos Rápidos con jQuery.

Si lanzamos la ejecución de estas sentencias, tal como aparece en el código, será como si se ejecutasen todas a la vez. Como los fadeOut y fadeIn tardarán 2 segundos en ejecutarse y los cambios de las propiedades CSS top y left son inmediatos, lo que ocurrirá será que primero veremos la capa moverse a la nueva posición y luego veremos los dos efectos de fundido.

Lo mejor para darse cuenta de este caso es verlo en marcha.

Cómo realizar una pila de ejecución de funciones

Ahora que ya hemos visto uno de los casos en los que necesitaríamos ejecutar funciones en una pila, una después de otra, esperando a que termine completamente la ejecución de cualquier efecto o acción antes de comenzar con la siguiente. Vamos a ver cómo hacerlo con jQuery.

Simplemente tenemos que saber que todas las funciones o métodos de jQuery pueden recibir un parámetro adicional con el nombre de la función que se tiene que ejecutar después que termine el procesamiento de la primera. Esa segunda función que se ejecuta después de la primera es la que se conoce en inglés por callback. Un ejemplo sencillo para entenderlo.

miFuncion ("parametros de la función", funcionCallback);

En ese esquema de llamada a miFuncion(), se le están pasando dos parámetros. El primero sería un supuesto parámetro que necesitase miFuncion() y el segundo, que es le que nos interesa en este caso, el nombre de la función que se tiene que ejecutar después que acabe. Con este código, primero se ejecuta miFuncion() y cuando acaba completamente, se ejecuta funcionCallback(). Pero atención que este ejemplo lo hemos simplificado para que se pueda entender fácilmente y esta sintaxis sólo valdrá si funcionCallback no recibe parámetros, porque no los podemos indicar con el nombre de la función. Veamos entonces una forma de hacer este callback que funcione siempre:

miFuncion ("parametros de la funcion", function(){
   funcionCallback();
});

Con este código, que funcionaría igual que el anterior, lo bueno es que sí podemos indicar los parámetros que se necesiten para la llamada a funcionCallback().

Ejemplo real de callback con jQuery

Ahora que hemos aprendido toda la teoría, veamos un ejemplo práctico que solucionaría el problema comentado anteriormente sobre el procesamiento de diversos efectos y cambios en las propiedades de los objetos, para que se hagan siempre en la secuencia que deseamos. Se trata simplemente de aplicar las llamadas con callback que hemos antes.

$("#micapa").fadeOut(1000, function(){
   $("#micapa").css({'top': 300, 'left':200});
   $("#micapa").fadeIn(1000);
});

Como se puede ver, en la llamada a fadeOut() estamos pasando como parámetros el valor 1000, que son los milisegundos tiene que durar el efecto fade out (fundido hacia transparente), y luego la función callback, que se ejecutará después de que fadeOut() haya terminado.

Como el método css() (se encuentra como primera instrucción de la función callback) es instantáneo, no necesita hacerse un callback para ejecutar el fadeIn(), sino que se puede escribir directamente en la siguiente línea de código. Así pues, se ve que el callback, al menos en este ejemplo, sólo es necesario hacerlo cuando se ejecutan funciones que realizarán un procesamiento prolongado.

Podemos ver este ejemplo de callback en una página aparte.

Hasta aquí, a lo largo de los capítulos de este manual de jQuery, hemos leído la introducción a este popular framework Javascript, tal como se puede ver en el apartado "How to use jQuery" publicada en la página de documentación. Desde DesarrolloWeb.com hemos enriquecido este tutorial de jQuery aportando nuevos ejemplos y explicaciones adicionales, encaminadas a que cualquier persona, con unos conocimientos básicos de Javascript, pueda entender y aprender a usar estas librerías de programación cross-browser. Ahora podemos hacer una pausa en este manual y volveremos pronto con nuevos artículos para explicar otros asuntos sobre la programación con jQuery.

A continuación podrás leer ejemplos de Ajax sencillos, que seguramente te darán una muestra excelente de las posibilidades de este framework. Luego, tendrás ocasión de seguir documentándote con muchos otros artículos que tratarán de explicarte jQuery desde principio a fin.

Fuente:enlace

Efectos rápidos con jQuery

Algunos efectos dinámicos se pueden hacer con jQuery con rapidez impactante y extremadamente poco código Javascript.

Una de las ventajas más destacadas de jQuery es la realización de efectos especiales para páginas web, que se desarrollan rápido y con poco código fuente. Estos efectos sirven para aplicar dinamismo a una página web y una respuesta atractiva frente la interacción con el usuario, lo que hace que las páginas programadas con jQuery ofrezcan una imagen puntera.

Los efectos con jQuery, al menos un buen puñado de ellos, se pueden realizar sin muchas complicaciones, ya que existen unas funciones que simplifican la tarea de los desarrolladores (Ver la librería Effects). En muchos casos conseguir un efecto nos llevará una línea de código en nuestro programa, como esta:

$("#capaefectos").hide("slow");

Con esto conseguimos que el elemento con id="capaefectos" desaparezca de la página. Pero además, el efecto no es un simple fundido del elemento en la página (hacerse transparente), sino que también va acompañado de una reducción de tamaño progresiva hasta desaparecer.

Combinando los efectos con la interacción de usuario, por medio de eventos, podemos conseguir que los efectos respondan a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencillez, elegancia y facilidad de manutención del código Javascript. Lo vamos a ver en un ejemplo a continuación.

Ejemplo de efectos e interacción en jQuery

En el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. Vamos a implementar un simple efecto de ocultar y mostrar un elemento de la página web.

Podemos ver el ejemplo en marcha en una página aparte.

Como hemos podido ver, vamos a tener una capa y un par de enlaces. Con jQuery haremos que al pulsar los enlaces se oculte y se muestre la capa, con las funciones de la librería Effects.

Para comenzar, este es el código HTML del ejemplo, que comprende tanto la capa como los enlaces.

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> |
<a href="#" id="mostrar">Mostrar la capa</a>
</p>

Ahora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las funciones de Effects, que harán que se muestre y oculte la capa.

El código Javascript, que hace uso de jQuery sería el siguiente:

$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide("slow");
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });
});

Como se puede ver, primero tenemos que definir el evento ready del objeto $(document), para hacer cosas cuando el documento está preparado para recibir acciones.

Luego se define el evento click sobre cada uno de los dos enlaces. Para ello invoco el método click sobre el enlace, que hemos seleccionado con jQuery a través del identificador de la etiqueta A.

$("#ocultar").click(function(event){

Con esto estoy definiendo el evento clic sobre el elemento con id="ocultar".

Nota: leer el artículo anterior Pasos para utilizar jQuery en tu página web, en el que hablábamos sobre eventos y otras generalidades de este framework Javascript. Podremos encontrar explicaciones más detalladas sobre cómo definir eventos Javascript con jQuery.

Dentro de la función a ejecutar cuando se hace clic, se coloca la llamada a la función de los efectos.

$("#capaefectos").hide("slow");

Esto hace que nuestra capa, a la que habíamos puesto el identificador (atributo id) "capaefectos", se oculte. Pasamos el parámetro "slow" porque queremos que el efecto sea lento.

Ahora veamos la función de los efectos con otra llamada:

$("#capaefectos").show(3000);

Esto hace que se muestre el elemento con id "capaefectos", y que el proceso de mostrarse dure 3000 milisegundos.

No hay más complicaciones, así que si habéis entendido esto ya sabéis hacer efectos simples pero atractivos con jQuery en vuestra página web. Ahora podréis ver el código completo de este ejemplo creado por DesarrolloWeb.com para demostrar el uso de efectos.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <title>Efectos con jQuery</title>
   <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide("slow");
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });
});
</script>
</head>

<body>

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> | 
<a href="#" id="mostrar">Mostrar la capa</a> 
</p>

</body>
</html>

Por último, pongo el enlace de nuevo al ejemplo en marcha.

Como se ha podido comprobar, hacer efectos con jQuery es bastante sencillo. Claro que hay otros detalles importantes y otros tipos de efectos y funcionalidades de personalización de los mismos, pero esto nos ha servido para demostrar lo sencillo que es trabajar con este framework Javascript. En siguientes artículos seguiremos explorando casos de uso típicos de jQuery.

Fuente:enlace

Creación de imágenes dinámicas con PHP

Presentamos esta tecnología propia de PHP y proponemos ejemplos de su utilidad.

                                          

Una de las peculiaridades que PHP nos presenta con respecto a otros lenguajes dinámicos es la utilización de la llamada biblioteca GD. Esta biblioteca no es más que un conjunto de funciones que tienen como objeto la creación de imágenes. 

En efecto, crear imágenes por medio de un lenguaje de programación puede resultar en un principio más complicado y tedioso que servirse de otras herramientas gráficas mucho más visuales y potentes presentes en la totalidad de las aplicaciones de diseño gráfico. Sin embargo, no todo van a ser inconvenientes, más bien todo lo contrario. Entre otras ventajas, el uso de un lenguaje dinámico para la creación de imágenes nos permite: 

• La creación de botones dinámicos 
  
  
  Una de las principales aplicaciones de esta herramienta gráfica es la posibilidad de crear gráficos "virtuales" que se generan dinámicamente en función de los parámetros que se indiquen al script responsable de su creación. De este modo podemos generar botones dinámicos en los que, especificando el texto a mostrar, el script se encarga de crearlo debidamente combinado con una imagen. Esto nos evita tener que crear cada uno de los botones de nuestro sitio con una aplicación de diseño gráfico. Podemos, mediante una simple llamada al script generador del botón, crearlos en el momento que los vamos a usar. 
  
  
• Tratamiento automatizado de imágenes recibidas de los usuarios 
  
  
  Supongamos que disponemos de un sitio en el que recibimos fotos o gráficos y estos han de ser redimensionados y duplicados en distintos tamaños (un tamaño real y un thumbnail por ejemplo).Podríamos disponer de unos scripts sencillos y de rápida creación que permitirían tratar las imágenes, duplicarlas y almacenarlas en bases de datos rápida y eficazmente. 
  
  
• La actualización y personalización más flexible 
  
  
  Crear gráficos por programación implica usar variables para definir colores o tipos y tamaños de letra. Esto quiere decir que, llegado el momento, podemos cambiar el aspecto de multitud de imágenes creadas con un mismo script tan sólo modificando unos pocos parámetros de éste. Esto nos ahorraría muchas horas de trabajo el día en el que decidamos dar un cambio de diseño a la página por ejemplo. Por otra parte, ponemos a disposición del usuario un elemento adicional de interacción dado que esta parametrizacion puede ser llevada a cabo por él mismo y guardada como cookies en su disco duro. 
  
  
• El ahorro en memoria 
  
  
  Si bien es posible crear archivos con estas herramientas, también es posible crear las imágenes de una forma temporal lo cual nos permite economizar memoria. Este elemento puede ser interesante en casos en los que tenemos un espacio de alojamiento limitado o bien si las imágenes que mostramos en el sitio son numerosas y se muestran pocas veces. Sin embargo, también tiene el efecto de resultar más lento puesto que la imagen ha de ser creada antes de ser mostrada lo cual requiere un tiempo de procesamiento suplementario. 
  
  

Como puede verse, en determinadas situaciones, el uso de la biblioteca GD puede revelarse como una herramienta muy valiosa para el desarrollo de nuestro sitio.

Fuente:enlace

Diplomado de Programación Web

El alumno Oswaldo Zambrano culminó exitosamente su Diplomado de Tecnología Web en nuestra instititución, para más información visita su proyecto web

Diplomado de Diseño Digital

Visita el portafolio del estudiante Daniel Goncalvez .

"Desarrolla tus ideas con los Cursos, Diplomados y Maestría en Uneweb www.uneweb.edu.ve"

Blender 3D

Los hermanos Daniel Perez Polo y José Perez Polo por culminaron exitosamente sus ejercicios con el Instructor David Reverón.

 

 

"Desarrolla tus ideas con los Cursos, Diplomados y Maestría en Uneweb www.uneweb.edu.ve"

Agrupar filas o columnas de tablas con HTML 4

En HTML 4.0 podemos agrupar filas de una tabla, o columnas. Sirve para especificar estilos específicos a esas filas o columnas.

Con HTML 4 existen dos etiquetas que nos permiten agrupar filas o columnas de una tabla, para crear agrupaciones a las que se les puede definir un estilo de una sola vez, y no fila a fila o celda a celda.

Estas etiquetas son las siguientes:

<TBODY>:Para agrupar conjuntos de filas. 

<COLGROUP>: Para agrupar conjuntos de columnas.

Ambas etiquetas tienen soporte a partir de HTML 4, por lo tanto están disponibles en todos los navegadores modernos más comúnmente utilizados.

Agrupar filas con <TBODY>

Hacer grupos de filas nos sirve para especificar estilos a determinadas filas de la tabla, de una sola vez. El modo de uso es el siguiente:

<table cellspacing="4" cellpadding="4" border="2">

<tr>

   <td>1</td>

   <td>2</td>

   <td>3</td>

</tr>

<tbody align="center" bgcolor="#ff8800" valign="top">

<tr>

   <td>4</td>

   <td>

   Esta es una celda

   <br>

   5

   </td>

   <td>6</td>

</tr>

<tr>

   <td>7</td>

   <td>8</td>

   <td>9</td>

</tr>

</tbody>

</table>

Como se puede ver, se tiene una tabla de 3 filas. Se ha marcado un grupo de dos filas con TBODY, justamente las dos últimas. Para esas filas hemos definido, mediante los atributos de la etiqueta TBODY, un centrado, un color de fondo y una alineación vertical superior. Los atributos que podríamos utilizar con la etiqueta TBODY son un grupo reducido de los que podríamos asignar a etiquetas TR o TD: align, bgcolor y valing, class, id, además de manejadores de eventos.

Podemos ver cómo se mostraría esta tabla:

1	2	3
4	Esta es una celda  5	6
7	8	9

De manera similar, se pueden asignar atributos de hojas de estilo en cascada, utilizando el atributo HTML style, como se puede ver a continuación:

<table cellspacing="2" cellpadding="2" border="2">

<tbody style="font-size:150%;">

<tr>

   <td>1</td>

   <td>2</td>

   <td>3</td>

</tr>

<tr>

   <td>4</td>

   <td>5</td>

   <td>6</td>

</tr>

</tbody>

<tr>

   <td>7</td>

   <td>8</td>

   <td>9</td>

</tr>

</table>

Aunque hay que decir que el grupo de atributos de hojas de estilo que son interpretados, cuando los colocamos en TBODY, es bastante reducido. Internet Explorer da mejor variedad de atributos aceptados.

Agrupar columnas con <COLGROUP>

Veamos ahora cómo se pueden agrupar varias filas con la etiqueta <COLGROUP>. El objetivo es básicamente el mismo que el de agrupar columnas, es decir, definir de una sola vez estilos específicos para un determinado conjunto de columnas de una tabla. El uso de la etiqueta, no obstante, es un poco diferente.

<table cellspacing="2" cellpadding="2" border="2">

<colgroup span=2 width="40">

</colgroup>

<tr>

   <td>1</td>

   <td>2</td>

   <td>3</td>

</tr>

<tr>

   <td>4</td>

   <td>5</td>

   <td>6</td>

</tr>

<tr>

   <td>7</td>

   <td>8</td>

   <td>9</td>

</tr>

</table>

Como se puede ver, COLGROUP se utiliza después de abrir la tabla y antes de empezar a meter los contenidos de filas y celdas.

El atributo span indica el número de columnas que se desean agrupar, empezando por la primera. En nuestro ejemplo se han agrupado las dos primeras columnas. Los otros atributos que podemos colocar en COLGROUP son los siguientes: align, id, class, style, valign, width y manejadores de eventos Javascript. Aunque Internet Explorer acepta otros atributos como bgcolor.

El ejemplo de colgroup se muestra a continuación:

1	2	3
4	5	6
7	8	9

Además, también podemos definir estilos CSS para las agrupaciones de columnas, con el atributo style. Aunque igual que antes, no todos los atributos de hojas de estilo son tenidos en cuenta. Siendo que, en general, Internet Explorer interpreta un mayor número de atributos CSS.

Cuando queremos definir estilos para cada una de las columnas de la tabla, de manera que toda columna tenga sus estilos propios, también utilizamos COLGROUP. En este caso no se debe utilizar el atributo span, sino que se debe de agregar la etiqueta <COL>, una por cada columna a la que pretendemos asignar estilos. De esta manera:

<table cellspacing="2" cellpadding="2" border="2">

<colgroup>

<col>

<col width=100>

<col style="width: 200px;">

</colgroup>

<tr>

   <td>1</td>

   <td>2</td>

   <td>3</td>

</tr>

<tr>

   <td>4</td>

   <td>5</td>

   <td>6</td>

</tr>

<tr>

   <td>7</td>

   <td>8</td>

   <td>9</td>

</tr>

</table>

En nuestra tabla, que tenía tres columnas, hemos colocado la etiqueta <COLGROUP> y dentro de esta, tres etiquetas <COL>, cada una con sus estilos propios.

En el primer COL, como se puede ver, no hay ningún atributo. Eso quiere decir que no estoy asignando ningún estilo a la primera columna de la tabla. El segundo COL ha definido una anchura de 100 pixels. El tercer COL, también hemos definido una anchura, pero esta vez con CSS mediante el atributo style.

Los atributos CSS que acepta esta etiqueta también son bastante reducidos en Firefox, aunque Internet Explorer acepta bastantes más.

Para terminar, mostramos la tabla del último ejemplo:

1	2	3
4	5	6
7	8	9

Fuente:enlace