Historia de las GUI's

Esta es una:
http://arstechnica.com/articles/paedia/gui.ars/1

En Wikipedia:
http://en.wikipedia.org/wiki/History_of_the_GUI

Galería de GUI's:
http://www.guidebookgallery.org/guis

Demo de Doug Engelbart(1968):
http://sloan.stanford.edu/MouseSite/1968Demo.html

(VARIOS) 1GB de espacio para imágenes

No me he registrado aún ;) por exceso de tiempo (ya quisiera) pero pronto lo probaré.

(PHP) Creación de gráficas en PHP con JpGraph

Presentación de la librería JpGraph, que sirve para generar imágenes con todo tipo de gráficas de datos en PHP.

Una tarea, a la que más tarde o más temprano vamos a tener que enfrentarnos a lo largo de nuestra andadura como profesionales del web, es la creación de gráficas a partir de datos. Cuando hablo de gráficas me refiero a todo tipo de imágenes que sirvan para representar datos, como gráficas de barras, de líneas de progreso, de tarta, etc.

Obviamente, la creación de gráficas no es un tema trivial, sino que requerirá de una gran dosis de dedicación y esfuerzo. Las gráficas, que generalmente se muestran en imágenes, pueden ser de muchos tipos distintos y sólo el hecho de tratar de dibujar en una imagen líneas, barras o incluso tartas en tres dimensiones, puede ser sobradamente complicado.

Sin embargo, existen sistemas como JpGraph, que nos pueden facilitar la tarea de una manera muy interesante, pues ofrecen una serie de mecanismos para la generación de las imágenes con las gráficas, de modo que nosotros sólo tenemos que centrarnos en cargar los datos a representar y escoger el tipo de gráfica que deseamos visualizar.

Qué es JpGraph

Es una librería que incluye una serie de clases -código orientado a objetos- que sirven para crear imágenes con todo tipo de gráficas, dinámicamente desde páginas PHP.

El sistema está muy depurado y soporta multitud de funcionalidades, por lo que seguramente encontraremos solución a casi cualquier necesidad en el ámbito de creación de gráficas. Además, la mayoría de las configuraciones de las gráficas vienen con opciones por defecto, así que resulta bastante sencillo obtener resultados rápidamente.

Algunas de las características del sistema son:

• Reducido peso en bytes de las imágenes resultado. Habitualmente unas pocas KB.
• Soporte a las librerías GD1 o GD2.
• Uso de la Interpolación matemática para obtener curvas a partir unos pocos valores.
• Diversos tipos de gráficas 2D o 3D, como de puntos, líneas, tartas, barras, cajas...
• Escalas flexibles tanto en el eje X como el Y, que se ajustan al juego de datos que se tenga que representar.
• Soporte para generar gráficas con varios juegos de valores a la vez.
• Configurable con distintos tipos de colores, leyendas, tipografías, imágenes de fondo, etc.

Cómo usar JpGraph

Este juego de librerías dispone de una extensa documentación y tutoriales para aprender a manejarlo. En la documentación se encuentran además numerosos ejemplos de su uso, desde los que podemos partir para solucionar nuestras necesidades.

El modo de trabajo para usar esta librería es muy simple, se trata de crear una imagen con la etiqueta de HTML, en cuyo atributo src colocaremos la ruta hacia el script PHP que se encargará de generar la gráfica.

En el archivo PHP que generará la gráfica tendremos que incluir las librerías apropiadas para el tipo de gráfica que deseemos realizar, también habrá que instanciar el objeto JpGraph correspondiente, cargar los datos a visualizar y llamar a los métodos adecuados para mostrar la imagen. Un mecanismo bastante sencillo que veremos en un par de ejemplos a continuación.

Ejemplo 1: una gráfica de línea.

En este ejemplo vamos a crear una gráfica lineal en la que mostraremos las horas de trabajo de una persona a lo largo de 10 días.

La generación de la gráfica de este ejemplo la hacemos en un archivo que hemos llamado grafico_linea.php, por lo tanto, la llamada a este archivo dentro de una imagen será la siguiente:

El código PHP del archivo grafico_linea.php es el siguiente:

SetScale("textlin");
$graph->img->SetAntiAliasing();
$graph->xgrid->Show();

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor("black");
$lineplot->SetWeight(2);
$lineplot->SetLegend("Horas");

// Setup margin and titles
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Ejemplo: Horas de Trabajo");
$graph->xaxis->title->Set("Días");
$graph->yaxis->title->Set("Horas de Trabajo");
$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#F9BB64@0.5');
//$graph->SetShadow();

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

Ejemplo 2: una gráfica de tarta en 3D

Por otra parte, vamos a realizar un ejemplo de una gráfica de tarta, en la que aparecen las horas realizadas por cada uno de los empleados y el porcentaje respecto a las totales. En este caso, la tarta va a presentarse en un dibujo en 3 dimensiones.

El archivo donde se genera la gráfica se llama grafico_tarta.php. Lo llamaríamos dentro de una imagen con este código HTML.



El código PHP del archivo grafico_tarta.php será el siguiente:

img->SetAntiAliasing();
$graph->SetMarginColor('gray');
//$graph->SetShadow();

// Setup margin and titles
$graph->title->Set("Ejemplo: Horas de Trabajo");

$p1 = new PiePlot3D($data);
$p1->SetSize(0.35);
$p1->SetCenter(0.5);

// Setup slice labels and move them into the plot
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("black");
$p1->SetLabelPos(0.2);

$nombres=array("pepe","luis","miguel","alberto");
$p1->SetLegends($nombres);

// Explode all slices
$p1->ExplodeAll();

$graph->Add($p1);
$graph->Stroke();
?>

Conclusión

JpGraph es una herramienta muy potente para la generación de gráficos en nuestra página web y gracias a su uso nos damos cuenta de sus muchas bondades:

• Es una librería gratuita (para uso no comercial), fácil de instalar y de fácil manejo.
• Incluye una completa documentación con multitud de ejemplos de los distintos gráficos que se pueden generar.
• Además de generar muchos tipos de gráficos, permite 'customizar' casi todo lo que se ve, resultando esto muy útil para integrar perfectamente el gráfico en el diseño de nuestra web.
• La forma de integrar el gráfico es muy sencilla: únicamente es necesario incluir una imagen (etiqueta IMG) cuyo src sea el script PHP que generará nuestro gráfico (ver ejemplos).

Pocos defectos hemos encontrado en la librería, tan solo se podría mejorar lo siguiente:

• Los mensajes de error son algo escasos, y la mayotía de las veces cuando algo falla no obtenemos ninguna explicación.
• Se echa de menos algo de definición en los gráficos, sobre todo en los gráficos de sectores.

(PHP) Uso del FTP en PHP

(PHP) Funciones para validar Mail

Validar un mail que contenga la "@" y además checa si el dominio existe:

Para LINUX:


function validar_email($email){
$exp = "^[a-z'0-9]+([._-][a-z'0-9]+)*@([a-z0-9]+([._-][a-z0-9]+))+$";
if(eregi($exp,$email)){
if(checkdnsrr(array_pop(explode("@",$email)),"MX")){
return true;
}else{
return false;
}
}else{
return false;
}
}
?>

Para WINDOWS:



function checkdnsrr_winNT( $host, $type = '' ){
if( !empty( $host ) )
{
if( $type == '' ) $type = "MX";
@exec( "nslookup -type=$type $host", $output );
while( list( $k, $line ) = each( $output ) )
{
if( eregi( "^$host", $line ) )
{
return true;
}
}
return false;
}
}
?>

(CSS) Sobre el diseño elástico

Al parecer, el uso de 'em' en los CSS aplica sólamente en los texto, más no en las tablas, tal vez la solución será emplear en los textos porcentajes de 'em' y en las tablas porcentajes de ancho y alto.

Algo por cierto sobre los porcentajes de los textos: no debe ser menor a 76%, al parecer, el texto se deforma en algunos navegadores.

He encontrado algunos sitios que ejemplificar este tipo de Diseño:

Sitio de Patric Griffits

Otro por supuesto el tan conocido Zen Garden

Y un sitio donde se muestran formas de llegar a este diseño : A list apart

En este otro, muestra un CSS como ejemplo y da buen tip:

The noddle incident

Y un tutorial de esa misma página:

http://www.thenoodleincident.com/tutorials/typography/index.html

(HTML) Ni fijo ni líquido: Elástico

La eterna discusión sobre qué tipo de diagramación (layout, maquetación) es mejor para cierto tipo de páginas debería quedar al fin zanjada.

La mejor solución para los diseños donde lo primordial es el texto está entre nosotros.

En un principio, existían dos tipos de diagramación. Estos tipos estaban diferenciados en el tipo de unidades que se usaban para definir los anchos de los elementos. Por un lado estaba el ancho fijo, basado en píxeles, y por otro el ancho variable, basado en porcentajes. Ésto daba como resultado: páginas de anchos inamovibles el primero y páginas que se acomodaban al ancho de la ventana del navegador el segundo.

En una época, el ancho fijo fue el preferido por los diseñadores web no porque fuera mejor que el ancho variable sino porque era más fácil de manejar y controlar el resultado (especialmente usando programas de tipo WYSIWYG). Obviamente, cuando un diseñador web decide “controlar el resultado", si no atiende a ciertos cuidados, es muy probable que lo haga en detrimento de las preferencias del usuario que usará su página. Una mala costumbre de aquella época era, además de poner anchos fijos a los elementos, definir tamaños fijos (también en píxeles) a la tipografía. Resultado: una gran pérdida en la accesibilidad de las páginas (que sumada a la costumbre de maquetar con mil tablas anidadas y mil grafiquitos sin más utilidad que “embellecer” la página daba como resultado un verdadero calvario para todo usuario con algún tipo de discapacidad visual).

Los anchos variables estaban reservados a “los que sabían” porque eran más dificiles de predecir y, a la vez, lograr un diseño vistoso que no se “rompiera” cuando se pasaba de verlo en una pantalla de 640*480 a una de 1024*768 era demasiado complicado y desgastante para la mayoría, además existía (y aún existe) el mito de que es un sistema más usable y/o accesible, lo cual no es cierto. ¿Qué ganaba el usuario? personalmente, siempre creí que nada, salvo tener menos espacios libres en la pantalla (si a ésto se le puede llamar “ganancia"). Además, esta práctica se complementaba casi siempre con tamaños de tipografía fijos, lo cual tampoco ayudaba al resultado final. Leer textos largos en pantallas cada vez más grande se hacía cada vez más complicado. ¿Por qué? porque no es lo mismo el 80% de 800px que el 80% de 1280px y saltar de una línea a la siguiente (sin tener que buscar cuál es la siguiente) no es tan fácil como podría parecer en un primer momento.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de, ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em". Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

Aplicando el ancho óptimo a la web

Aquí empieza lo bueno. Las hojas de estilo admiten el uso de “em” como unidad de medida, lo cual nos permite escribir textos definiendo un tamaño de tipografía relativo sin depender de impredecibles porcentajes. La ventaja número uno es que el tamaño es relativo a la tipografía que se use y no al ancho de la ventana del usuario. La ventaja número dos es que, felizmente, usar “em” como unidad para tamaños de tipografía permite que el usuario pueda variar el tamaño desde el control de tamaño de letra de su navegador preferido.

Una práctica que se usa últimamente es usar anchos fijos (px) para definir los bloques de una página y “em” para el tamaño de la tipografía. Ésto permite al usuario ver el texto en el tamaño que prefiera, eso es bueno… pero… el problema es que alguien necesite ampliar la tipografía dos o más veces y el ancho del contenedor quede como estaba originalmente. Nuestro ancho óptimo de línea da por lo suelos.

Ahora bien, ¿qué sucedería si usásemos “em” como unidad de medida para los anchos de los elementos también? Obtendríamos lo que se conoce como diagramación elástica donde todo lo que se defina basado en “em” dependerá del tamaño de letra que el usuario use.

Obviamente, no todo son rosas en este camino. IE da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre"). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.

Un poco de código

Un ejemplo muy básico sería algo como:

CSS para pegar dentro del HEAD.

<style type="text/css"><br />body {<br /><br />  font-size: 100%;<br />}<br />h1 {<br />  text-size: 2.5em;<br />}<br />#contenido {<br />  text-size: .85em;<br />  width: 30em;<br />  background-color: #f0f0f0;<br /><br />}<br /></style>

HTML para pegar dentro del BODY.

<h1>Mi demo</h1><br /><div id="contenido"><br /><br />  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus, gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies ut, fermentum id, congue sed, magna. Ut sed velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat orci a ipsum. Morbi sed augue vitae arcu porta consectetuer. Sed sit amet quam et elit nonummy elementum. Suspendisse auctor leo ut wisi. Pellentesque vehicula venenatis lorem. Pellentesque tincidunt dolor at urna rutrum egestas.</p><br /></div>

Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.

También tenemos un ejemplo más complejo, con una diagramación a dos columnas con encabezado y pié. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo ;)

Algunas conclusiones

La realidad es que una vez que se entiende el funcionamiento de este sistema, puede usarse muy fácilmente, aunque con algunas limitaciones. El principal problema viene de la mano del uso de imágenes de fondo en los bloques de la página. No es que no se puedan usar, sino que hay que tener en cuenta algunas cosas a la hora de pensar cómo implementarlas, como por ejemplo que al achicarse un bloque éstas se cortarán y que al agrandarlo éstas no lo seguirán. Hay también algo que sí se puede aprovechar y es que se puede definir el tamaño de una imagen con “em” para el width y el height con lo cual lograremos que las imágenes así definidas se agranden o se achiquen junto con el diseño (un efecto muy simpático, a la vez que útil para una persona con problemas de visión que debe agrandar todo para verlo).

De cualquier manera y desde mi punto de vista, es (al menos hoy en día) la mejor solución para páginas y sitios web en los que lo más importante es el texto ya que permite: por un lado manejar muy facilmente un bloque de texto asegurando que su ancho es el óptimo para una lectura cómoda y eficaz; y por otro brindar una accesibilidad bastante mejorada al común de los sitios ya que es el usuario quien decide en qué tamaño desea leer nuestro contenido.

En la actualidad, 100px.com esta casi basado en una diagramación elástica. El “casi” responde a la limitación de las imágenes de fondo. En el caso de este sitio, la columna de extras no tiene el ancho definido con “em” sino que responde a un ancho fijo ya que debía tener el fondo azul con sombra y esquinas redondeadas. Si bien pudo haberse solucionado usando un truco con varios DIV anidados con sendas imágenes en cada esquina, se decidió dejar el ancho fijo para no complicar el documento XHTML innecesariamente.

Para leer más (en inglés)

• Text Sizing (en The Noodle Incident) por Owen Briggs: 264 metódicas capturas de pantalla para analizar el comportamiento de las tipografías en distintos navegadores y plataformas.


• Elastic Lawn (en el CSS Zen Garden) por Patrick Grifiths: al extremo… con imágenes de fondo y todo :)

(PHP) Contador de Descargas

1.- Debeis crear y guardar un archivo llamado por ejemplo download.php con el siguiente código.

$extension = ".zip"; // EXTENSION DE ARCHIVOS

if (file_exists("$archivo$extension")) {
header("location: $archivo$extension");
$file = fopen("contador/$archivo.txt","r"); // contador de downloads
$count = fread($file, 100);
$countplus = ($count + 1);
fclose($file);
$fileb = fopen("contador/$archivo.txt","w");
fwrite($fileb, $countplus, 100);
fclose($fileb);
}

else { echo "El archivo $archivo$extension no existe"; }

?>


2.- Seguidamente debeis crear en vuestro ftp una carpeta que se llame contador y le dais CHMOD 777

El download.php tiene que estar en el mismo directorio o carpeta donde esté el archivo a descargar. Para que el contador funcione correctamente debemos colocar todo en el mismo sitio.
* EJEMPLO:
Si tenemos un archivo para descargar llamado cancion.zip, pues download.php y el archivo cancion.zip lo meteremos en el mismo lugar, y la carpeta "contador" también. Y colocaremos la siguiente url para descargar el archivo:

http://tupagina.com/download.php?archivo=cancion

Para mostrar en cualquier lugar de tu página el número de descargas realizadas debereis colocar el siguiente código:



Debes saber que para cada archivo debes crear un .txt con su respectivo nombre, tantos archivos txt como archivos a descargar tengas o quieras saber sus estadisticas de descarga, que los subirás en la carpeta "contador", y les darás CHMOD 666.

(PHP) Contador básico

$counterFile = "visitas.txt";

function displayCounter($counterFile) {
$fp = fopen($counterFile,rw);
$num = fgets($fp,5);
$num = 1;
echo "$num";
exec( "rm -rf $counterFile");
exec( "echo $num > $counterFile");
}

if (!file_exists($counterFile)) {
exec( "echo 1 > $counterFile");
}

displayCounter($counterFile);
?>

(FLASH) Para la certificación de Flash Designer

En donde se puede hacer el examen:

Testing Center Locator

Macromedia Testing Test Centers in Distrito Federal, Mexico
Test Centers - Sorted by City	Phone #	Address	Directions
Centro de Transferencia de Tecnologia S.A. C.V.	52-55-5687-5959	Insurgentes Sur 586 int 601 Colonia Del Valle, Delg. Benito Juárez RFC CTT-001016-FL8 Ciudad de Mexico, Distrito Federal 03100
Centro Netec SA de C.V.	52 5 488 32 35 -8012	World Trade Center P.9 Montecito No. 38 Col. Napoles RFC-CNE-021015-IM2 Ciudad de Mexico, Distrito Federal 03810
Net Capacitaciones S.A. DE C.V.	52-5515-3060	NCA030206-B58 Av. Revolución 374 Desp 202, Col. San Pedro de los Pinos Del. Benito Juare Ciudad de Mexico, Distrito Federal 03800
Uny-II Mexico	5601-4424	San Lorenzo 1009 4° piso Colonia del Valle Ciudad de México, Distrito Federal 03100
Afina Sistemas	52 55 5062-4600	Insurgentes Sur No. 617 piso 10 Col. Nápoles México, Distrito Federal 03810
CompuEducacion	011-5255- 52838260	Jaime Balmes No. 11 Edificio B piso 7 Colonia Los Morales Polanco Mexico, Distrito Federal 11510
ITESM Campus Ciudad de Mexico	52-55-5483-2020	Calle del Puente 222 Col. Ejidos de Huipulco; Tlalpan Mexico, Distrito Federal 14380
SICAP	52-5985-8585	Bosque de Duraznos 65 Despacho 601A Col. Bosques de las Lomas Mexico City, Distrito Federal 11700

(FLASH) Galería de fotos con XML

(FLASH) Galería de imágenes sin XML

Lee directamente del directorio.

(FLASH) Contador de páginas con PHPObject

(FLASH) Escalar con función Prototype

1. Tenemos un movie clip que contiene un cuadro de texto dinámico llamado "título", sacamos 3 copias del clip al escenario y les ponemos nombre de instancia que terminen en número empezando de 0: let0, let1, let2, tenemos 3 clips con nombres.
2. Escribir en el primer fotograma:
   
   var textos=["Opción 1", "Opción 2", "Opción 3"]
   for(i=0; i<=textos.length; i++){
   _root["let"+i].titulo=textos[i]
   }
3. Función prototipo:
   Movieclip.prototype.cambiomas=function(){
   _xscale+=(200-_xscale)/5
   _yscale+=(200-_yscale)/5
   }
   Acabamos de crear una funcion "cambiomas" para aumentar el tamaño del clip, explico los cálculos: la idea es que el clip crezca no de un tirón sino como proceso...paso a paso, que se vea que crece, entonces usamos matemáticas: si 100 es el tamaño del clip (100%) el doble es 200, para simular un cambio a paso lento le restamos a 200 el valor del tamaño actual del clip y lo dividimos entre 5 (5, 6, 7 o lo que quieras, a menos cantidad más rápido) esto se debe a cositas sencillas: si dividimos: 100/10, sería 10, pero si es 100/20 sería 5...el cambio sería más lento (de 5 en 5) si se pone números más altos. El clip para al llegar a 200 ¿porque? porque su cálculo llegaría a un total de 200+=0.0...(léase 200-200).Mucho ojo con la supremacía en las operaciones en Flash: la suma es al último, primero va lo de entre parentesis, luego la división, luego la suma. Ve el diccionario de AS para más detalles "Precedencia de Operadores".
4. La función de disminución tiene el mismo estilo:
   Movieclip.prototype.cambiomenos=function(){
   _xscale+=(100-_xscale)/5
   _yscale+=(100-_yscale)/5
   }
   Es decir el límite de disminución es el tamaño original: 100.
5. Una vez que tenemos esto en el frame inicial pongamos falta invocar estas funciones desde los clips, dentro de cada clip va el mismo script:

onClipEvent(enterFrame){
/*Si el mouse se coloca sobre el clip pues se invoca a la
función de aumento*/
if(this.hitTest(_root._xmouse,_root._ymouse,true)){
this.cambiomas()
/*SINO (es decir si no está sobre el clip) se aplica la de
desaumento*/
}else{
this.cambiomenos()
}
}

(FLASH) Usos de la clase Tween

En inglés

(FLASH) Algunos extensiones

Algunas extensiones para Flash. Incluida la classe Tween

(FLASH) Clases Tween y Transition

(DISEÑO) Software de Diseño Libre

Software para diseño y además es libre:

• Para vectores:
  
  Inkscape
  
• Para mapas de bits:
  
  The Gimp
  
• Para 3d:
  
  Blender (este se ve bastante bueno)
  Milk Shape

Una página con algunos ejemplos:
InkPipe

(FLASH) Ecuaciones de Easing y transiciones

(FLASH) Efectos con actionscript

Exelentes, animaciones de mover objetos y otros.

(FLASH) Movie Clip Tweening prototypes

Librerías para mover Movie Clips:
http://laco.wz.cz/tween/
Otras librerías:
http://laco.wz.cz/tween/?page=benchmark

(FLASH) Arrastre y pegado de Movie Clips

1. Crear 2 clips de película con los nombres clip1 y clip2.clip2 debe estar debajo de clip1.
   
2. En el frame 1 de la película principal, escribir:
   
   stop();
   
   clip1inicioX = clip1._x;
   clip1inicioY = clip1._y;en donde cip1inicioX y clip1inicioY son las coordenadas iniciales del clip1.
   
3. Incluir las acciones para arrastrar el clip:
   
   on (press) {
   
   startDrag("_root.clip1", true);
   
   }
   
   on (release) {
   
   stopDrag();
   
   if (_root.clip1.hitTest(_root.clip2)) {
   
   _root.clip1._x = _root.clip2._x;
   
   _root.clip1._y = _root.clip2._y;
   
   } else {
   
   _root.clip1._x = _root.clip1inicioX;
   
   _root.clip1._y = _root.clip1inicioY; }
   
   }

(FLASH) Creación de ventanas flotantes usando Clases

(FLASH) Tutorial de programación orientada a objetos

Para actionscrip. Esta para revisarse.

(FLASH) Creando objetos elásticos con propiedades de ancho y algo

1. Dibujar un objeto (un cuadrado por ejemplo) y lo convertimos en MovieClip, con nombre "cuadro"(presionar F8).
2. Arrastrar al escenario del panel de componentes Button y NumericStepper y los borramos del escenario. Ya están en la biblioteca.
3. En el primer frame de la película escribir este código:

//Aqui estamos creando la funcion
cambiarXY = function () {
 /* Lo que hace el evento "onEnterFrame es que en cada cuadro (frame) de
tu pelicula hara las acciones indicadas*/
this.onEnterFrame = function() {
 /* this.cuadro._xscale se refiere a el objeto, en este caso MovieClip y su nombre
 de instancia es "cuadro" y a su propiedad _xscale. Esta es la formula del efecto
 easing: objeto._propiedad += (valor+objeto._propiedad)/velocidad */
 this.cuadro._xscale += (X-this.cuadro._xscale)/3;
 /*Aqui hacemos que revise si el el valor de la propeidad del objeto es la misma de la
  variable */
 this.cuadro._yscale += (Y-this.cuadro._yscale)/3;
 //Si el valor de la propiedad es igual a la variable quitamos el evento "onEnterFrame"
 if (Math.abs(X-this.cuadro._xscale)<3 class="sIdentificador">Math.abs(Y-this.cuadro._yscale)<3) class="sKeyword">delete this.onEnterFrame;
 }
};
};

Ahora los componentes:

/* attachamos los componentes (mandamos llamar a los componentes que estan en la libreria) y les
asignamos un nombre y un nivel (no pueden estar en el mismo nivel) */
attachMovie("Button", "btn", 1);
//attachtMovie (El nombre del objeto que esta en nuestra biblioteca, el nuevo nombre, el nivel);
attachMovie("NumericStepper", "num1", 2);
attachMovie("NumericStepper", "num2", 3);
//Aqui cambiamos sus propiedades
btn._x = 135;
btn._y = 174;
btn.setSize(54, 20);
btn.fontFamily = "_sans";
btn.fontSize = 10;
btn.label = "Cambiar!";
num1._x = 9;
num1._y = 173;
num1.setSize(55, 13);
num2._x = 74;
num2._y = 173;
num2.setSize(55, 13);
num1.maximum = 150;
num1.minimum = 0;
num1.stepSize = 1;
num1.value = 100;
num2.maximum = 150;
num2.minimum = 0;
num2.stepSize = 1;
num2.value = 100;

Y por último el listener:

//Creamos un nuevo objeto; miClick
miClick = new Object();
//Al objeto lo hacemos funcion en el evento "click" (este evento solo funciona en los componentes UI)
miClick.click = function() {
 /* Tomamos el valor de los numericsteppers y se los pasamos a las variables X e Y (son las que
 indicaran el valor que queremos darle a la propiedad del objeto) */
 X = num1.value;
 Y = num2.value;
 //Aqui llamamos al a función cambiarXY
 cambiarXY();
};
//Y ahora le añadimos la funcion a nuestro boton
btn.addEventListener("click", miClick);

(DISEÑO) Origen de Lorem Ipsum

El texto conocido como "dummy" para los bocetos o maquetas para un diseño de una revista, página, etc, donde es necesario simular una gran cantidad de texto, esconocido por sus dos palabras iniciales "Lorem Ipsum".

Pero es por pocos sabido lo que en realidad significa; sacado de un extracto del libro "Finibus Bonorum et Malorum" (Los extremos del bien y el mal) de Marcus Tullius Cicero escrito hacia 45B.C.(el cual cabe mencionar es un tratado de teoría de ética) de la seccion 1.10.32 y 1.10.33, este texto fué escogido por un impresor en los inicios de la imprenta y desordenó el texto, dejándolo como actualmente lo conocemos, esto quiere decir que en sí este texto no significa absolutamente nada.

“Finibus Bonorum et Malorum” comenzaba diciendo: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit… No hay nadie que ame el dolor mismo, que lo busca y lo quiera tener, simplemente por que es el dolor.

Sitios como loremipsum.net ofrecen el servicio de simulación de texto que se ajusta a tus necesidades, es decir, si quieres desde un párrafo hasta n, si quieres que lleve ciertos caracteres, acentos, etc.

Una muestra de este texto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Para más referencias:

Finibus Bonorum et Malorum traducido: http://www.atomic-swerve.net/jardin/finibus/
Sitio de Lorem Ipsum: http://www.loremipsum.net/index.html

(HTML) Listas ordenadas en HTML

Con bullets:

<ul>
<li>uno</li>

<li>dos</li>

<li>tres</li>

</ul>

• uno
• dos
• tres

Por números:
<ol>
<li>uno</li>

<li>dos</li>

<li>tres</li>

</ol>

1. uno
2. dos
3. tres

Puede ir sin cierre, simplemente con indicar el inicio de cada uno:

<ol>
<li>uno

<li>dos

<li>tres

</ol>

1. uno
2. dos
3. tres

Por letras:
Type=1 Números
Type=a Abecedario letras minúsculas
Type=A Abecedario letras Mayúsculas
Type=I Numeración romana en Mayúsculas
Type=i Numeración romana en minúsculas

<ol type="a">
<li>uno

<li>dos

<li>tres

</ol>

1. uno
   
2. dos
   
3. tres
   

(PHP) Query, conexión, mail y otros

Conectar a la Base de Datos:
$conn = mysql_connect($baselocalhost,$baseuser,$basepass);
mysql_select_db($base,$conn);

if (!$conn){
echo "Ha ocurrido un error no se puede conectar a la base de datos";
exit;
}
donde:
$base = "fibramex";
$baseuser = "alldesigner";
$basepass = "akasha";
$baselocalhost = "localhost";


Seleccionar una tabla de la base:
$sql = "SELECT * FROM nombre_tabla ORDER BY campo_a_ordenar WHER condicion";

Para hacer un query:
mysql_query(string query, identificador)

Agregar un archivo sin ejecutarlo:
require("nombre archivo");
requiere_once("nombre_archivo");

Agregar un archivo y ejecutarlo:
include("nombre_archivo");

Coloca resultados de una consulta en una variable:
mysql_result($variable,índice,'nombre campo')

Cuantifica filas de una variable:
mysql_num_rows($variable);

>Concatena cadenas:
.

Para saber si un archivo existe:
if (file_exist($nombre archivo)) {
echo "El archivo $nombre archivo existe";
} else {
echo "El archivo $nombre archivo no existe";
}

Sesión:
$user = trim($_POST['usuario'];
$user =! "";
mysql_fetch_array($variable);
session_start();
$_SESSION['permiso'] = "si";

Redirigir a otra página mediante un encabezado:
location.href = "pagina.html";

Para mandar un correo:
mail(string para, string asunto, string mensaje[string cabeceras adicionales[, string parámetros adicionales]]);

(HTML) Máximo de ancho de texto

http://www.svendtofte.com/code/max_width_in_ie/

(FLASH) Tutorial de Expresión y Animación

Notas sobre animación, principios fundamentales
http://cristalab.com/tutoriales/67/tutorial_de_animacion_y_expresion_de_personajes_en_flash

(HTML) Estadísticas de Browsers

http://www.w3schools.com/browsers/browsers_stats.asp

(HTML) Diseño Fijo

Los elementos de maquetación adoptan un ancho fijo. El diseñador "impone" un diseño con una distribució de elementos en pantalla que se visualice igual en todos los dispositivos y resoluciones.

Esta visión es propia de los medios impresos, en las que un diseñador controla al milí­metro el aspecto final de su trabajo (papel, tamaños, disposición, tipografí­as).

A favor: control por los diseñadores de la apariencia final de su trabajo, heredado de los medios impresos tradicionales.
Controlar la longitud de lí­nea implica mejor legibilidad.

En contra: en monitores de alta resolución desaprovecha espacio. Por ejemplo, en textos largos puede generar un scroll vertical excesivo .

Es poco "web". Desaprovecha la "adaptividad" del medio "on line" e impone criterios de diseño papel.

(HTML) Diseño Elástico

Ideado por Patrick Griffiths, es una variación de diseño líquido y fijo en las que el ancho de elementos en pantalla depende del tamaño de letra configurado por el usuario en su navegador.

Se pueden ver dos demostraciones en su propio sitio y en CSS ZenGarden.

(HTML) Diseño Líquido

Aprovecha al máximo el ancho de pantalla adaptando los elementos y su disposición a la resolución de monitor del usuario.

A favor: Esta opción reduce el scroll en pantalla y permite presentar más información de un solo vistazo.

En contra: El mayor problema del diseño lí­quido mal aplicado es que el texto se "desparrama" por la pantalla obligando al usuario a realizar un esfuerzo para leer.

Problemas con Explorer: Al aplicar "liquidez" al diseño, se deben tener en cuenta unos lí­mites en el ancho de los "contenedores" para que las lí­neas de texto no resulten demasiado largas. Este problema se plantea en los navegadores Explorer que de momento no soportan las propiedades CSS min-width y max-width que permiten asignar anchos mí­nim y máximos a los contenedores para evitar "desparrames" (Existen trucos para evitarlo).

Que el popular y defectuoso Explorer no soporte correctamente estos y otros está¡ndares hace más complejo la creación de diseños lí­quidos usables.

(PHP) Instalación de Foros

1-. Requisitos

• Un servidor web que soporte PHP 3.0.9 o mayor, preferiblemente 4.
• Base de Datos SQL (con que tenga una de estas es suficiente):
  * MySQL (3.22 o mayor)
  * PostgreSQL 7.0.3 o mayor (preferiblemente 7.1.x o 7.2.x)
  * MS SQL Server (7 o 2000) directamente o via ODBC
  * MS Access (2000 o XP) via ODBC
  

Si tu servidor no cumple uno de estos requisitos, no podrás
usar phpBB2

2-. Descarga phpBB de www.phpbb.com

3-. Descomprime el archivo que te has bajado y sube el contenido a tu espacio web (todos los archivos), a una carpeta llamada phpBB mismamente.

4-. Ahora solo tienes que abrir el foro desde tu navegador.

Si lo has subido a un servidor gratuito, posiblemente tu direccion será http://www.servidor.com/usuario/ , asi que si lo subirtes al directorio phpBB2/, la dirección que tendrás que abrir será http://www.servidor.com/usuario/phpBB2/, así de simple, y ya te aparecerá la ventana de instalación.

Si por el contrario es un hosting de pago, tu dirección será http://www.tudireccion.com/ , si lo suber a phpBB2/tendrás que ejecutar http://www.tudireccion.com/phpBB2.

5-. Solo queda instalarlo desde la ventana que apareció.

Voy a ir indicando los datos en inglés, ya que muchos aun no tendreis puesto el pack en español (para descargarlo visitar su página web). Teneis que rellenar unos datos, los cualesos indico ahora...

• Default board language: esto se refiere al lenguaje para la instalación y su posterior uso.
• Database Type: Tipo de base de datos. Posiblemente todos useis MySQL 3.x. De no ser así consultarlo con el dueño del hosting o mirar su FAQ.
• Choose your installation method: Tipo de instalación. Te da a elegir entre instalar y actualizar. Seleccionar lo primero (¿no?).
• Database Server Hostname / DSN: Host del servidor de la base de datos. En general es localhost, pero puede haber escepciones. Lo podreis ver en el FAQ de cada servidor o en los datos que te mandan cuando te registras.
• Your Database Name: Nombre de tu base de datos. Suele ser el nombre de usuario, pero esto ya varía más. Ponte en contacto con tu servidor o mira los datos de cuanto te registrastes.
• Database Username: y Database Password: Pues eso, nombre de usuario y contraseña. Lo mismo que antes, si no lo sabes contacta con tu servidor.
• Prefix for tables in database: Prefijo para las tablas en la base de datos. Esto sirve por si tienes más cosas en la base de datos, para diferenciarlo. dejalo como está o pon otro prefijo, eso es cuestión de gustos.
• Admin Email Address: El email del administrador, o sea, tu. Será el email que aparecerá cuando se mande un mail a la persona que se registra en el foro, por poner un ejemplo...
  
• Domain Name: Tu dominio. Deja el que ya te pone el foro por defecto (es lo recomendable, si luego falla, allá tu).
• Server Port: El puerto del servidor. Lo mismo que antes, dejalo como está, dificilmente un servidor use otro puerto.
• Script path: La ruta del foro. Dejalo también como está, si pones algo mal luego fallarán las cookies.
• Administrator Username: Tu nick para el foro.
• Administrator Password: Pues eso, una contraseña para ti, para tu cuenta de administrador.
• Por último pincha el botón.

6-. Luego te aparecerá un mensaje como este...

Your config file is un-writeable at present. A copy of the config file will be downloaded to your when you click the button below. You should upload this file to the same directory as phpBB 2. Once this is done you should log in using the administrator name and password you provided on the previous form and visit the admin control centre (a link will appear at the bottom of each screen once logged in) to check the general configuration. Thank you forchoosing phpBB 2.

Que traducido viene a decir...

Tu archivo con la configuración es "noEscribible"por ahora. Cuando pinches en el botón se descargarásel archivo de configuración. Tu deberás subir ese archivo al mismo directorio que phpBB2. Cuando hayas hecho esto, entra al foro y haz login como administrador (identificate como administrador) y entrar en el panel de administración desde un enlace que hay en el pie de cada página, para configurar en general el foro. Gracias por usar phpBB 2.

Pues ya sabeis, hacer eso... y suerte!!

Anexo de WebTaller

INSTALACIÓN DEL PACK EN CASTELLANO

Lo primero que tenemos que hacer es bajarnos el "pack
en español" que está en la página de phpbb
(http://www.phpbb.com/downloads.php)
casi abajo del todo, buscad "spanish" y bajaos el archivo.
Descomprimirlo en vuestra carpeta phpbb2/languages.

NOTA: cuidado con esto tiene que quedar dentro de
languages las dos carpetas como se ve en la imagen, en una ocasión
me equivoqué y dentro de lang_spanish se me creo otra subcarpeta
lang_spanish. No me di cuenta y me las ví y me las desee
para comprender porqué mi foro no funcionaba en castellano.
Aseguraros de que bajo lang_spanish están directamente los
archivos de lenguaje.

Subimos nuestra carpeta lang_spanish al directorio "languages"
dentro de phpbb.

CONFIGURACIÓN DEL PACK EN CASTELLANO

1.- Vamos a nuestro recién estrenado foro.

2.- Pulsamos sobre login y nos autentificamos con
el nombre y el pass de administrador que dimos al instalar el foro

3.- Al pie de los foros vemos un enlace al panel de
administración, pulsamos.

4.- En el panel de administración, en la sección
"general admin" pulsad en "configuration".

5.- Buscad "Default Language" y de la lista
desplegable buscar "spanish",

6.- Guardar, en el botón al pie de la página.

Ahora dirígete de nuevo al índice del
foro y ve a tu perfil y en la opción language, elige spanish,
y listo!

(PHP) Haciendo seguras las sessiones

Las sesiones de PHP son una herramienta muy usada en el desarrollo de web: permiten 'recordar' datos del usuario entre una visita y otra. Un ejemplo tipico es recordar que un usuario esta loggeado en un sitio, para que no tenga que ingresar su password nuevamente cuando vuelve a entrar.Ivan R. describio en un documento como es posible tomar el control de sesiones abiertas por otros usuarios de maneras bastante sencillas (esto trae muchos problemas se seguridad, como podran imaginarse).Aqui les propongo unas piezas de codigo que hacen mucho mas seguras las sesiones: al encriptar ciertos datos, se vuelve imposible que otros usuarios puedan espiar las sesiones de los usuarios y tambien impide que malvados hax0rs tomen el control de nuestras sesiones.
Las sesiones de PHP funcionan asi: cuando el usuario entra por primera vez al sitio, se le envia una cookie que contiene un identificador (llamado session id o SID). Luego desde el PHP se pueden asociar datos a este identificador.Cada vez que el usuario entra al sitio, el sistema de sesiones trae los datos que corresponden a este usuario (en realidad, los que corresponden al identificador de la cookie).Tambien PHP ofrece otra manera de pasar el SID, cuando browsers no soportan cookies: en estos casos, es posible pasar el SID por el URL.
Los problemas que aparecen son los siguientes:1) Si uno logra averiguar cual es el Session ID de una session, es posible pasar este dato via GET o creando una cookie y tomar el control de la sesion.Lo que lo hace peligroso es que conseguir el SID es bastante sencillo: *) Los datos de las sessiones estan almacenados en /tmp/ (por defecto, aunque se puede cambiar) y tienen de nombre: sess_SID(por ej, sess_DAQSAFKOAKDOASK)*) Cuando el PHP pasa el SESSIONID por el URL y el usuario hace click sobre un link a una pagina externa, esta recibe como dato cual fue la pagina anterior en la que el usuario estuvo (REFERER_URL) que incluye el SID. PHP ofrece una manera de evitar que se activen sesiones con el SID en el URL si el usuario viene desde un sitio externo, pero este chequeo es muy facil de evitar
2) Cuando la aplicacion PHP esta alojada en un servidor compartido (webhosting barato), cualquier usuario puede ver los SESSIONIDs ejecutando simplemente "ls /tmp/sess_*"Otro problema es que cualquier usuario con permisos para leer archivos del webserver puede ver el contenido de las sesiones, con solo abrir el archivo de session que desee (/tmp/sess_*)
Soluciones:PHP permite especificar funciones alternativas para manejar las sesiones. Usando este feature (session_set_handler) desarrolle unas funciones que teoricamente solucionan este problema:La idea es, que aparte de la cookie de session se le envia otra que contiene una cadena de texto generada al azar.Luego el nombre del archivo donde estan guardados los datos de la sesion es generado por el hash MD5 resultante de concatenar el ID de session y el KEY (o sea, $filename="sess_sec_".md5($SID.$KEY);). Haciendo esto logramos que sea imposible deducir el ID de la session viendo el nombre del archivo que contiene los datos y mas importante, hacemos que sea imposible tomar el control de una session engañando al servidor pasandole el SID, porque con un KEY equivocado (o vacio), el server no encontrara el archivo que contiene los datos de la sesion y creara una nueva.
Para agregar una capa mas de seguridad y prevenir otros ataques, los datos de sesion guardados en el archivo estan encriptados usando la cadena KEY de password, por lo que solamente el poseedor de la KEY correcta podra tener acceso a los datos (asi evitamos que otros usuarios del mismo servidor metan las narices en nuestras sesiones).
Aun faltan definir algunas funciones del sistema de sesiones, pero yo no las use nunca, asi que por ahora, no las voy a implementar
Aunque los problemas de seguridad que planteo no preocuparan a mas de uno, es bueno saber que las sessiones no son 100% seguras y que existen alternativas faciles de solucionar el problema (solo hace falta insertar las funciones y usar las funciones de sesion comunmente)
El codigo pueden bajarlo desde aqui o verlo funcionando aqui /*This piece of code was developed by Martin Sarsale (martin@n3rds.com.ar)as a response to the problem shown by Ivan R. (ivanr@webkreator.com) on thearticle 'PHP Session Security' (http://www.webkreator.com/php/configuration/php-session-security.html)
This is beta code, Im looking for some suggestions to enhance it!*/
function sess_open($sess_path, $session_name){global $_SEC_SESSION;$sess_sec=ini_get('session.name')."_sec";
# Apart from the session cookie we set another one, with the same name plus# '_sec' at the end# On that cookie, we set a random 32byte string (I'll refer to this string # as 'key')if (!isset($_COOKIE[$sess_sec])){$md5=md5(uniqid(''));setcookie($sess_sec,$md5,ini_get('session.cookie_lifetime'),ini_get('session.cookie_path'),ini_get('session.cookie_domain'));$_SEC_SESSION['int']['key']=$_COOKIE[$sess_sec]=$md5;$_SEC_SESSION['data']=serialize(array());$empty=1;}else{$_SEC_SESSION['int']['key']=$md5=$_COOKIE[$sess_sec];}
# The name of the file that contains the session info,# starts with 'sec_sess_' and it's followed by the md5 string of the# session_id concatenated with the previous key.# This avoids people of reading the ID of the session from the session files # (to hijack the session)$_SEC_SESSION['int']['filename']=$filename_sec="$sess_path/sec_sess_".md5(session_id().$md5);if (isset($empty)){return 1;}if (!file_exists($filename_sec)){fclose(fopen($filename_sec,'w'));}if (!$_SEC_SESSION['int']['fd']=fopen($filename_sec,'r')){$_SEC_SESSION['data']=serialize(array());return 0;}
# The data on that file is dedrypted using the previous key$data_enc=fread($_SEC_SESSION['int']['fd'],filesize($filename_sec));fclose($_SEC_SESSION['int']['fd']);if ($data_enc!=''){$cipher=MCRYPT_DES;$data=@mcrypt_ecb($cipher,$_SEC_SESSION['int']['key'],$data_enc,MCRYPT_DECRYPT);}else{$data='';}$_SEC_SESSION['data']=$data;$_SEC_SESSION['int']['hash']=md5($_SEC_SESSION['data']);return 1;}function sess_close(){return true;}function sess_read($key){return $GLOBALS['_SEC_SESSION']['data'];}function sess_write($id,$data){global $_SEC_SESSION;$sd=$data;if ($_SEC_SESSION['int']['hash'] != md5($sd)){$fd=fopen($_SEC_SESSION['int']['filename'],'w');$cipher=MCRYPT_DES;# Here we crypt the data with our key...$data=@mcrypt_ecb($cipher,$_SEC_SESSION['int']['key'],$sd,MCRYPT_ENCRYPT);fputs($fd,$data);fclose($fd);chmod($_SEC_SESSION['int']['filename'],0600);}
}function sess_destroy($key){return(@unlink($GLOBALS['_SEC_SESSION']['int']['filename']));}function sess_gc($maxlifetime){}
session_set_save_handler('sess_open','sess_close','sess_read','sess_write','sess_destroy','sess_gc');session_start();if (!isset($_SESSION['times'])){$_SESSION['times']=0;}$_SESSION['times']++;print "This session ID is: ".session_id()." but the name of the file that contains the data is ".$_SEC_SESSION['int']['filename']."n";
print "Btw, this is the ".$_SESSION['times']." you see this page ;) (it works!)n";

(PHP)Instalación de PHP en el servidor IIS

(PHP) Instrucciones para conectar con una Base de Datos MySQL en PHP

Primero es recomendable separar los datos de conexión con las funciones de conexión en sí, de modo que si estos cambian sea más fácil y rápido cambiarlos en todos los scripts en los que haga falta.

Así es recomendable:

1º Definir un archivo con tan solo los datos de conexión, por ejemplo “conexión.inc.php”

Ejemplo de “conexión.inc.php”



2º Incluir este archivo en cada script que necesite datos de la base de datos.

Añadir la siguiente línea en cada archivo que lo requiera:

include('conexion.inc.php'); // Suponemos que el archivo con los datos es ‘conexión.inc.php’

3º Realizar las consultas de un modo claro:

Para recuperar los datos de una sencilla consulta de ejemplo:

‘SELECT nombre, apellido, telefono FROM amigos’

nSQL: $sql”);

// Ahora tenemos en ‘$result’ todos los registros de la consulta, ahora debemos mostrarlos uno a uno

while ($row = mysql_fetch_array($result))

{ // El while ya deberíamos saber que hace, ‘mysql_fetch_array()’ avanza uno a uno los registros

// Como hemos metido un registro en $row, tendremos que mostrar lo que nos interese en pantalla.

echo “El Nombre es: “.$row[‘nombre’].”
n”; // Para mostrar el campo ‘nombre’

echo “El Apellido es: “.$row[‘apellido’].”
n”; // Para mostrar el campo ‘apellido’

echo “El Telf. es: “.$row[‘telefono’].”

n”; // Para mostrar el campo ‘telefono’

}

?>

El resultado a la ejecución del script sería algo como:

El Nombre es: Scott

El Apellido es: Doanes

El Telf. es: 933334455

El Nombre es: Basilio

El Apellido es: Vera

El Telf. es: 933335566

El Nombre es: Vicente

El Apellido es: Carrasco

El Telf. es: 934447788

(Etc...)

Siempre suponiendo que estos sean los registros que hay en la base de datos.

Con la instrucción “or die()” se mostrará en pantalla el mensaje entrecomillado solo en el caso de que fallara la primera sentencia de la línea.

NOTAS:

También podríamos haber usado la línea:

echo “El Nombre es: {$row[‘nombre’]}
n”;

En lugar de:

echo “El Nombre es: “.$row[‘nombre’].”
n”;

El resultado habría sido el mismo.

Incluso podríamos haber utilizado otras funciones para acceder fila a fila, por ejemplo:

mysql_fetch_object();

Pero entonces tendríamos que haber escrito algo como lo siguiente, para cada línea:

echo “El Nombre es: “.$row->nombre.”
n”;

Al usar esta función, en lugar de poner el nombre del campo así

$nombre_variable[‘nombre_del_campo’]

se pone

$nombre_variable->nombre_del_campo.

Si queremos mostrar los resultados en forma de tabla, habría que intercalar el código HTML referente a tablas entre el código que muestra las variables, por ejemplo algo como:

echo “ n”; // Comenzamos la tabla antes del ‘while’

echo “ ”; // Así escribimos la cabecera de la tabla

while ($row = mysql_fetch_array($result))

{

echo “ n”; // Comenzamos una fila ( )

echo “ n”;

echo “ n”; // Acabamos una fila ()

}

echo “

Nombre	Apellido	Teléfono
{$row[‘nombre’]}
{$row[‘apellido’]}	{$row[‘telefono’]}

”; // Fin de la tabla.

Editar y Borrar datos con MySQL y PHP

La edición de datos en mysql, combina opciones de Insertar datos a MySQL y de Consultas MySQL , tendremos que hacer una consulta cómo la siguiente:

UPDATE tabla SET campo = 'valor' WHERE condicion

Como veis, volvemos a utilizar la clausula WHERE para escojer las entradas que hay que editar, podemos actualizar varios campos de la siguiente manera:

UPDATE tabla SET campo = 'valor', campo2 = 'valor2' WHERE condicion

El metodo no tiene mas secretos que esto, veamos un ejemplo real para ver cómo funciona exactamente desde PHP:


Recordar que $db contiene un identificador de la conexión.

Borrar
Borrar unas determinadas de una tabla de MySQL es incluso más sencillo que editarlas, pues solo es nescesario indicar que entradas queremos borrar con una clausula WHERE y en que tabla lo haremos, y esto junto con la palabra DELETE FROM nos darán el resultado que esperamos:

DELETE FROM tabla WHERE condicion