Ale Baquero

Diseño web y Turntablist

Archivo de la categoria‘Diseño web’

Mayo-8-09

Yo tengo un amigo, Yo tengo un primo…

Posteado por alebaquero sobre Diseño web

Los diseñadores hoy en día tenemos una lacra que hace que nos pensemos seriamente nuestro trabajo.

Esa lacra es el poco respeto que se tiene a nuestro trabajo, intentando desvalorizar nuestros diseños y poniéndote escusas baratas que no tienen fundamento.

Hoy en Sevilla te puedes dar con un canto en los dientes si cobras 1200 € porque lo mas normal es que te pagen 900 o 1000 €, a eso sumale que no tienes pagas extraordinarias porque van prorrateadas si le quitamos el pro nos quedamos con lo que verdaderamente es “Ratear” al empleado pidiéndole ademas un perfil que no todo el mundo cumple.

Por ejemplo veamos una oferta en Sevilla de diseñador web de infojobs.(no pongo la empresa porque no quiero hacerle publicidad)

Estudios mínimos: Ciclo Formativo Superior

Experiencia mínima: Al menos 1 año Imprescindible

residente en: Provincia Puesto Vacante

Requisitos mínimos: - Altos Conocimientos en diseño web
- Conocimientos de programación Java y Php
- Experiencia desarrollando y elaborando plantillas para gestores de Contenidos (CMS): Drupal, Wordpress, Magnolia, Liferay, etc.
- Alto interés por el software libre
- Experto en CSS
- Experiencia demostrable en el desarrollo y diseñio de páginas web con gestores de contenidos

Requisitos deseados: - Experto en accesibilidad y usabilidad web
- Flash

Esta es una de las ofertas que podemos encontrar de cualquier empresa Sevillana…simplemente brutal, ademas la empresa no te dice lo que te va a pagar…es decir un engaño desde el principio.

Pero como pueden pedir tanto y dar tan poco?

Nosotros los diseñadores somos los que mas alabanzas o quejas nos llevamos. Por que somos los encargados de que al cliente le guste su proyecto, ya que una pagina bien hecha pero con programación chunga le atrae mas que una fea con una programación de infarto.

Por lo tanto señores empresarios no ENGAÑEN a los diseñadores con ofertas de trabajo fantásticas si luego van a entrar en el castillo del terror y van a sufrir stress y cobros tardios…

Cuando llegues todo serán sonrisas y amabilidad, luego te hablaran de Formación e Incentivos…Incentivos, la palabra Bin Landen “Todo el mundo sabe que existe pero nadie lo ve”

No creo en las politicas de los empresarios sevillanos no hay ninguno que me haya demostrado que se puede confiar en el…he dicho ninguno.

Ademas de ser un maquina diseñando, te dicen que si tienes nociones de programación mejor…nociones? Lo que quieren es que programes a jierro para que lo hagas todo…y encima que no se te olvide de apagar la luz cuando te vayas que estamos con el plan de austeridad.

El diseñador ademas de estar 5 o 6 años estudiando la carrera de Bellas artes luego ponte a programar…pero un momento(se pregunta el diseñador) si a mi no me gusta la programación, yo solo quiero es diseñar, jejeje pues te comerás un colín buscando trabajo.

Y claro como no llegas a fin de mes te encuentras que tienes que hacer trabajos freeland en tu casa , para poder pagar tus cosas, así que te embarcas en la lucha cuerpo a cuerpo con el cliente de turno que no tiene ni idea y que quiere tener un web porque todo el mundo la tiene.

Porque yo comprendo que todo el mundo no sea un genio con los ordenadores pero…no te las des de enteraoooo!! que si todo el mundo tiene una web no significa que tu negocio vaya a triunfar en Internet por tener una web, que diga donde esta la empresa y sus fotitos típicas que no las ve nadie.

Por que eso es otra cosa, para que quieres comprar un dominio y un alojamiento y pagarle a un tio por la web, para poner un texto que no lee nadie y unas fotos tomadas con la cámara de mi cuñao esa nueva que tiene 3 mega pixele.

Por favor dejate asesorar por alguien que sabe y que te puede aconsejar lo que es mejor para tu empresa. Pero no entramos en la ley del Dictador “Yo soy el que pago y quiero esto…” pues apaga y vamamono.

Yo he tenido que tragar mucho cuando empece porque es lo mas duro…el comienzo, cobraba casi regalado y me pegabas horas y horas haciendo diseños por tablas sin programación ni nada y con muy pocos medios…solo un pc y mis manos.

Luego he ido haciendo cursos, seminarios y siempre he estado rodeado de gente que me podían aconsejar muy bien sobre todo.

Ahora soy yo el que aconseja cuando me lo piden pero lo clientes que me salen de Freeland, hay que exponerle las cosas con mucho mas argumento para que vean que lo que se les esta ofreciendo es lo mejor para su empresa.

Los clientes hoy en día me piden presupuestos y me dicen…”Esto es muy caro…yo tengo un primo o un amigo que me lo hace por dos Euros”

Pues nada vallase con su primito o con su amiguito a ver que le hace el, porque yo no hago las paginas mas baratas por que haya alguien que se lo haga mas barato.

Que pasa después? Pues que tiene que llamarte al cabo de los meses porque o el amigo le ha hecho un churro o no puede hacer lo que quería con la web o es lejía para los ojos en cuanto al diseño.

Ahora que? Pues lo siento pero ahora te va acostar 120 € mas porque me da la gana a mi y has desprestigiado mi trabajo por pensar que esto lo puede hacer cualquiera ja y ja.

Nuestro trabajo es un arte igual que la programación, creamos cosas atractivas, usables, ordenadas y compactas, sabemos como se tienen que utilizar los elemento y en donde van mejor para el usuario de la web.

Buscamos que el trabajo evoque a algo y que esa sensación este muy unida al concepto de la empresa. Eso no todo el mundo sabe como llevarlo acabo por eso nosotros no somos ningún primo o amigo que lo hace regalado, nuestros trabajos valen su calidad y eso es dinero que pagar.

Las ideas buenas y los buenos trabajos se pagan porque estas pagando algo exclusivo para tu empresa o lo que sea.

Trabajamos con las ultimas herramientas(si no te quedas atrás) buscamos inspiración de lo que sea y reciclamos todo lo que pasa por nuestras retinas para adaptarlo a nuestras necesidades.

Intentamos superarnos cada día para conseguir ese diseño increíble que nos va a hacer famoso sea como sea…

Tenemos que captar la idea de la empresa para saber cuales son los colores mas adecuados, las formas y los módulos que completaran el trabajo.

Tenemos que tener el tan famoso “Don de Gentes” porque tendremos que hablar y expresarnos con claridad para los zoquetes que nos vamos a encontrar que no saben ni corregir las faltas en el Word.

Estoy cansado de todo esto y muchas veces pienso en que podríamos hacer algo…algo que cambie hasta hace poco no estábamos declarados en ningún sector según el INEM.

Si el estado no nos da nuestro sitio… no los van a dar empresarios sin escrúpulos sedientos de dinero a toda costa?

A los buenos diseñadores nos venden la película de que si en su empresa es el sitio mejor, que si esto que si lo otro, para que cuando lleves dos meses cualquier cosa que hagas mal no se lo pensaran dos veces para mandarte a la puta calle…si si a la puta calle, sin finiquito ni paro ni nada de nada.

Por lo tanto seamos mas implacables, si vales y tienes un perfil de lujo no te dejes avasallar por el primer pijo con dinero que te llame para trabajar, in pon tus objetivos antes de empezar, no te dejes engañar con lo de “de momento cobraras 1000 €, luego te lo iremos revisando” ja y ja eso es mentira y no va a llegar nunca.

Si vas a estar las ocho horas del tirón te corresponde 1/2 hora mas comer..no echar 9 horas para tener una para comer, eso lo hacen en todas las empresas y lo dan por legal, que no te confundan!!

No eches horas extras porque no te las van a pagar cuando sea tu hora pegate el piro y mañana sera otro día!

La vida de un diseñador es dura pero muy gratificante…saber que tus creaciones sirven para sus propósitos es algo que te llena de orgullo pero esta la lacra …“yo tengo un primo o un amigo”

Bueno lo prometido es deuda…asi que aqui teneis para que podais meter vuestros datos en una base de datos.

Seguimos con la tabla que hemos hecho en “PHP como mostrar registros de una base de datos

  • ID (INT) auto_increment
  • Nombre (VARCHAR 255)
  • Texto (TEXT)
  • Link (VARCHAR 255)
  • Foto (VARCHAR 255)

Ahora comentamos  el form…

(ATENCION NO COPIES EL CODIGO PORQUE TE CAMBIA LAS COMILLAS SIMPLES, DESCARGALO TODO MAS ABAJO proximamente estara arreglado)

<form action=”<? echo $SERVER['PHP_SELF']?>” method=”post” enctype=”multipart/form-data” id=”form” >
<fieldset>
<label for=”nombre”>Nombre:</label>
<input name=”nombre” type=”text” id=”nombre” />
<label for=”link”>link:</label>
<input name=”link” type=”text” id=”link” />
<label for=”imagen”>Imagen:</label>
<input name=”imagen” type=”file” id=”imagen”>
<input type=”submit” name=”submit” id=”submit” value=”Enviar” />
</fieldset>
</form>

Esta es la estructura valida para un formulario Xhtml 1.0 mas tarde veremos como le insertamos el CSS para dejarlo mas bonito.

En action ponermos esa variable de servidor para que mande los datos a la misma pagina.

Lo siguiente es ver el codigo PHP
<?php

//INCLUIMOS LOS DATOS Y LA CONEXION
include(”./includes/configuracion.php”);
include(”./includes/funciones.php”);

//SI EXITE LA VARIABLE SUBMIT INSERTAMOS
if(isset($_POST['submit'])){

//CONECTAMOS
$cnx=conectar();

//RECOGEMOS LAS VARIABLES DEL FORM POR POST
$nombre=$_POST['nombre'];
$link=$_POST['link'];
//LIMPIAMOS ESPACIOS EN BLANCO  Y ESCAPAMOS LAS VARIABLES POR SEGURIDAD (TAMBIEN PODRIAMOS //PASARLO TODO A MINUSCULAS)
$nombre=trim($nombre);
$nombre=mysql_escape_string($nombre);
$link=trim($link);
$link=mysql_escape_string($link);

//MOVEMOS LA IMAGEN A LA CARPETA IMAGES
if (is_uploaded_file($_FILES['imagen']['tmp_name'])) {
//revisamos que sea jpg
if ($_FILES['imagen']['type'] == “image/jpeg” || $_FILES['imagen']['type'] == “image/pjpeg”){
//nombre de la imagen
$foto = time().”.jpg”;
//movemos la imagen.
move_uploaded_file($_FILES['imagen']['tmp_name'], “./images/”.$foto);
}else{
$error = true;
$errormsg = “Formato no válido para archivo de imagen”;
}
} else {
//imagen no se pudo subir o no seleccionaron.
$error=true;
$errormsg = “Error al cargar imagen: ” . $_FILES['imagen']['name'];
}//fin file upload.

//LOS CAMPOS Y LOS VALORES E INSERTAMOS
$campos =”nombre,link,foto”;
$valores = “‘”.$nombre.”‘,’”.$link.”‘,’”.$foto.”‘”;
$res = mysql_query(”INSERT INTO links ($campos) VALUES($valores)”) or die (mysql_error());

//CERRAMOS LA CONEXION
mysql_close($cnx);
}

?>

Hasta aqui el desglose de la aplicacion es importante saber que estamos siguiendo el primer Tuto de
“PHP como mostrar registros de una base de datos”

Aqui el codigo completo con el CSS para el formulario.
<?php

//INCLUIMOS LOS DATOS Y LA CONEXION
include(”./includes/configuracion.php”);
include(”./includes/funciones.php”);

//SI EXITE LA VARIABLE SUBMIT INSERTAMOS
if(isset($_POST['submit'])){

//CONECTAMOS
$cnx=conectar();

//RECOGEMOS LAS VARIABLES DEL FORM POR POST
$nombre=$_POST['nombre'];
$link=$_POST['link'];
//LIMPIAMOS ESPACIOS EN BLANCO  Y ESCAPAMOS LAS VARIABLES POR SEGURIDAD (TAMBIEN PODRIAMOS //PASARLO TODO A MINUSCULAS)
$nombre=trim($nombre);
$nombre=mysql_escape_string($nombre);
$link=trim($link);
$link=mysql_escape_string($link);

//MOVEMOS LA IMAGEN A LA CARPETA IMAGES
if (is_uploaded_file($_FILES['imagen']['tmp_name'])) {
//revisamos que sea jpg
if ($_FILES['imagen']['type'] == “image/jpeg” || $_FILES['imagen']['type'] == “image/pjpeg”){
//nombre de la imagen
$foto = time().”.jpg”;
//movemos la imagen.
move_uploaded_file($_FILES['imagen']['tmp_name'], “./images/”.$foto);
}else{
$error = true;
$errormsg = “Formato no válido para archivo de imagen”;
}
} else {
//imagen no se pudo subir o no seleccionaron.
$error=true;
$errormsg = “Error al cargar imagen: ” . $_FILES['imagen']['name'];
}//fin file upload.

//LOS CAMPOS Y LOS VALORES E INSERTAMOS
$campos =”nombre,link,foto”;
$valores = “‘”.$nombre.”‘,’”.$link.”‘,’”.$foto.”‘”;
$res = mysql_query(”INSERT INTO links ($campos) VALUES($valores)”) or die (mysql_error());

//CERRAMOS LA CONEXION
mysql_close($cnx);
}

?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Documento sin t&iacute;tulo</title>
<style type=”text/css”>
label{display:block;}
</style>
</head>

<body>
<form action=”<? echo $SERVER['PHP_SELF']?>” method=”post” enctype=”multipart/form-data” id=”form” >
<fieldset>
<label for=”nombre”>Nombre:</label>
<input name=”nombre” type=”text” id=”nombre” />
<label for=”link”>link:</label>
<input name=”link” type=”text” id=”link” />
<label for=”imagen”>Imagen:</label>
<input name=”imagen” type=”file” id=”imagen”>
<input type=”submit” name=”submit” id=”submit” value=”Enviar” />
</fieldset>
</form>

</body>
</html>

DESCARGA AQUI LOS ARCHIVOS DE EJEMPLO

BYE!!!

Diciembre-27-08

Nuevas cosillas

Posteado por alebaquero sobre Diseño web

Como estoy de vacaciones he estado buscando e investigando nuevos scripts y pajas mentales ya que quiero automatizar todo lo mas posible, para que no me tenga que preocupar de todo el sistema que lleva mi pagina www.lamadruga.com

Asi que he hecho las pertinentes pruebas que comienzo a relatar.

Debido a mi cabeza suelo perder correos y informacion valiosa casa todos los meses por eso me he decido en hacer algunos script para que me hagan la tarea de ver y guardar correos electronicos en una base de datos para poder tener una copia en mi servidor.

Asi que empeze a dibujar en papel mi aplicacion y saque estas Funciones:

  • Conexion Imap por PHP connect_mail.();
  • Busqueda de mail validos search();
  • Insercion en DB insert();

A estos archivos hay que añadirles una tarea programada que ejecutaremos en nuestro servidor, casi todos los paneles de control(cpanel,plex,helm) tienes para poder configurar una tarea a la hora y el dia que se seleccione.

Entonces que pasa pues que el dia tal a la hora tal se conectara al servidor por IMAP y guardara los mails que cree oportuno en la base de datos de lujo eso es lo que necesito.

Asi que empeze por hacer un archivo de prueba que guarda la fecha y la hora con una tarea programada aqui el codigo:

<?php
include(”../includes/config.php”);
include(”../includes/funciones.php”);
$fecha = Date(”d/m/Y”);
$horas=time();
$hora= date(”h:i:s”,$horas);
$campos = “fecha,hora”;
$valores = “‘”.$fecha.”‘,’”.$hora.”‘”;
//nos conectamos a la bd.
$cnx = conectar();
$res = mysql_query(”INSERT INTO ejecution ($campos) VALUES($valores)”) or die (mysql_error());
//mensaje de exito.
exit

?>

En otro post explico lo de los include y todo lo demas asi que no hace falta que lo explique denuevo.

Es facil cojemos la fecha y la hora y la metemos en la base de datos ejecution que tiene tres campos:

  1. ID autonumerico primaryKey
  2. fecha Varchar 255
  3. hora Varchar 255

CREATE TABLE `ejecution` (
`id` int(11) NOT NULL auto_increment,
`fecha` varchar(255) NOT NULL default ”,
`hora` varchar(255) NOT NULL default ”,
PRIMARY KEY  (`id`)
)

Vamos no tiene mucho misterio…luego le añadi una tarea programada y…TACHAN!! Nos inserta sin problemas los datos.

Seguire en breve con los script de IMAP para que lo tengais cuando lo termine.

Octubre-20-08

Herramientas para Diseñar y maquetar webs

Posteado por alebaquero sobre Diseño web

Cada diseñador tiene unas herramientas que usa en su dia normal a la hora de diseñar, estas herramientas abarcan desde un gestor FTP, un selector de color hexadecimal, aplicaciones para el navegador etc, etc

Bueno el cliente que uso de FTP es Filezilla de Mozilla, es gratuito y ademas tiene muchas posiblidades de configuracion, cantidad de descargas simultaneas, gestor de permisos, y demas utilidades aunque yo suelo utlizar pocas ya que lo que quiero es subir y ya esta.

Seguimos esa vez con un selector de color muy liviano y gratuito ColorPix nos estrae el color Hexadecimal de cualquier fuente que le pasemos el cuenta gotas, muy util.

Otra herramienta de la misma firm es ColorSchemer Studio que es una herramienta fantastica para combinar colores ya que le decimos un color y el nos da la gama de posibilidades de color que pegan o calzan con el color que le hemos dado.

Seguimos ahora nos vamos a Firefox y sus Addons que son aplicaciones que instalamos en nuestro Firefox y que nos brindan un control sobre distintos aspectos de nuestra web.

  • Firebug- Una aplicacion que no puedo pasar sin ella,nos da la posibilidad de inspeccionar las cajas de nuestro diseño puediendo modificar su codigo para ver los resultados.
  • Web developer- Una aplicacion que lleva muchas funciones, Validador de css,xhtml,feeds, muestra de cajas, desactivar/activar javascript y muchas mas funciones.
  • Live Pagerank - Nos muestra el pagerank de las paginas que visitemos.

Si queremos extraer el swf de una aplicacion flash para poder obtener el ansiado .FLA neceitamos el SWFDecompiler, hay versiones para firefox pero no he logrado hecharlas a andar, asi que tendremos que usar el maginifico IE.

Con estas herramientas podremos en combinacion de nuestros programas de diseño y maquetacion facilitarnos notablemente nuestro trabajo dia a dia.

Bueno espero que os haya servido de algo.

Bye!


Octubre-20-08

Diseño e inspiracion

Posteado por alebaquero sobre Diseño web

Todos los diseñadores necesitan inspiracion para sus diseños y hoy vamos a hablar de paginas que pueden hacernos la vida mejor.

En primer lugar hablaremos de CSSREMIX una web en la cual encontramos una gran seleccion de diseño en CSS, muchos diseño WEB 2.0 y tonos actuales que seguro te ayudaran a estar mas actualizado en tendencias web.

Tambien tenemos webcreme una web de la misma tematica que css remix pero con una clase que sa la pisa.

Quizas esta web peca de estructuras muy similares, distinguiendo siempre unas zonas muy claras de cabecera, menu y contenido.

Salvando este inciso debemos decir que cssremix es lo que buscamos si diseñamos paginas web CSS y XHTML.

Seguimos con otra web esta vez para diseño en flash, The FWA.

Esta web esta ademas hecha en flash y su navegacion es muy rapida, podemos encontrar proyectos de grandes firmas y aplicaciones muy actuales utilizando Papervision y las ultimas caracteristicas del video en flash.

Al dar una vuelta por los trabajos nos damos cuenta de la gran calidad de estos, si bien vamos a hacer pequeñas paginas alo mejor estos ejemplos se nos quedan un poco grandes, pero si podemos quedarnos con los diseños que suelen ser muy atractivos e impactantes.

Otra web que mezcla flash y css es The Best Design en la que encontramos menos cantidad pero que se asemejan mucho a proyectos mas modestos o no tan impresionantes.

De todas maneras estamos viendo para coger ideas para nuestros proyectos asi que no es para copiar por que yo estoy en contra de copiar porque los que nos movemos en esto de internet notamos cuando un diseño es orginal, plantilla o copiado y queda muy poco profesional hacer uso de un diseño para nuestra web sin consentimiento del autor.

Bueno en el siguiente capitulo encontrareis las herramientas que utilizo para diseñar y maquetar.

Bye!!

Octubre-19-08

PHP como mostrar registros de una base de datos

Posteado por alebaquero sobre Diseño web

Tabla de contenidos de PHP como programar sin problemas

  1. PHP como mostrar registros de una base de datos

En este capitulo voy a enseñar como se hace para mostrar unos registros en la base de datos Mysql.

Bien primero la base de datos:

Creamos una base de datos y la llamamos como querramos esta vez le vamos a llamar “PRUEBA”.

Para que nos conectemos a la base de datos tenemos que crear un USUARIO y CONTRASEÑA, en php conectarse a una base de datos es muy sencillo mucho mas sencillo que otros lenguajes como por ejemplo ASP que tiene un monton de codigo y en cada servidor es un mundo, por ejemplo no os aconsejo montar una pagina ASP en arsys porque es un quebradero de cabeza considerable, sin embargo en PHP como veremos es muy facil, solo con 3 lineas nos hacemos con la conexion… a que parece guay!

Vamos a crear el usuario que lo vamos a llamar root y la contraseña root( ya la cambiareis por la que tengais vosotros)

Luego en nuestro PHPMYADMIN insertarmos este codigo en SQL o lo hacemos nosotros con los menus que tiene PHPMYADMIN.

CREATE TABLE `prueba` (
`id` int(11) NOT NULL auto_increment,
`nombre` varchar(255) NOT NULL default ”,
`texto` text NOT NULL,
`link` varchar(255) NOT NULL default ”,
`foto` varchar(255) NOT NULL default ”,
PRIMARY KEY  (`id`)
) ;

Con esta codigo podemos crear una base de datos en  nuestro PHPMYADMIN basica para una supuesta pagina que muestra los links de unas paginas web, que nosotros habremos metido previamente bien con un panel o a pelo directamente desde nuestro phpmyadmin.

La tabla que vamos a crear se llama links y lleva un id autonumerico(INT), un nombre(VARCHAR 255), un texto(TEXT), una foto (VARCHAR 255) quedaria asi:

  • ID (INT) auto_increment
  • Nombre (VARCHAR 255)
  • Texto (TEXT)
  • Link (VARCHAR 255)
  • Foto (VARCHAR 255)

Bueno ya tenemos nuestra tabla hecha y ahora tenemos que empezar a saber que vamos a utilizar en nuestra pagina php para que funcione correctamente.

Vamos a trabajar con 3 archivos:

  1. config.php
  2. funciones.php
  3. index.php

Bien vamos a explicar cada uno y a poner el codigo de cada una.

Config.php

Este archivo nos sirve para definir el nombre de la base de datos(a partir de ahora y en adelante DB), el usuario, la contraseña y el host de nuestra maquina(servidor donde este nuestra web)

Codigo config.php:

<?php
$HOSTNAME = “localhost”;//SERVIDOR
$USERNAME = “root”;        //USUARIO
$PASSWORD = “root”;        //CONTRASEÑA
$DATABASE = “prueba”;    //BASE DE DATOS
?>

Bueno ya tenemos nuestro config.php listo seguimos.

Funciones.php

Este archivo nos va a servir para cojer config.php y ejecutar la conexion

Codigo funciones.php

<?php

function conectar(){
global $HOSTNAME,$USERNAME,$PASSWORD,$DATABASE;
$idcnx = mysql_connect($HOSTNAME, $USERNAME, $PASSWORD) or DIE(mysql_error());
mysql_select_db($DATABASE, $idcnx);
return $idcnx;
}
?>

Bueno no tiene complicacion este archivo hacemos la llamada a la base de datos para conectarnos con los datos de config.php por ahora nada complicado.

Ahora el archivo que vamos a mostrar nuestros registros

Codigo index.php

<?php
include(”config.php”);
include(”funciones.php”);
$cnx = conectar();
$res = mysql_query(”SELECT id,foto,link FROM prueba ORDER BY id ASC”) or die (mysql_error());

?>

<html>
<head>
<title>Novedades</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”estilos.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
<!–
.Estilo1 {color: #FFFFFF}
.Estilo4 {color: #000000}
.textos {    font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #000000;
}
–>
</style>
</head>

<body>
<span class=”textos Estilo1″></span>
<table width=”100%”  border=”0″ cellpadding=”2″ cellspacing=”2″>

<tr>
<th scope=”col”><table width=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr class=”cabeceraBold”>
<td width=”100″ height=”30″ class=”cabeceraBold”>Foto</td>
<td colspan=”2″ class=”cabeceraBold”>&nbsp;</td>
</tr>
<?
if (mysql_num_rows($res) > 0) {
//si hay resultados.
while(list($id,$foto,$link) = mysql_fetch_array($res)){
?>
<tr>
<td valign=”top” class=”texto”> <img src=”../Images_web/<? echo $foto; ?>” width=”100″ height=”100″></td>
<td colspan=”2″ valign=”top” class=”texto”><? echo $link; ?></td>
</tr>
<?
}//fin del while
}else{
//no hay resultados
?>
<tr>
<td colspan=”3″ align=”center”>No hay datos</td>
</tr>
<?
}//fin del if/else de resultados
?>
<tr>
<td height=”30″ colspan=”2″ class=”pie”><p>&nbsp;</p>          </td>
<td width=”86″ height=”30″ align=”right” class=”pie”>&nbsp; </td>
</tr>
</table></th>
</tr>
</table>
</body>
</html>

ATENCION!! NO COPIES EL CODIGO DIRECTAMENTE BAJATE EL ARCHIVO DESDE AQUI

Bueno empiezo por partes en las primeras lineas llamamos a config.php y funciones.php, despues creamos una variables que le pasamos la funcion conectar(),y lo siguiente es crear la sentencia SQL para que busque los resgistros que estan en la tabla links si no lo encuantra genera un error para que podamos saber que es lo que pasa.

Lo siguiente es la pagina HTML que es la que se encarga de ver lo que genera el php nos vamos a la linea que contiene esto:

<?
if (mysql_num_rows($res) > 0) {
//si hay resultados.
while(list($id,$foto,$link) = mysql_fetch_array($res)){
?>

Lo que estamos viendo es un bucle que se encarga de recorrer los registros que hay para mostrar los campos(id,foto,link) si si os habreis dado cuenta que no estan todos los campos que hemos creado, lo he dejado asi para que lo completeis vosotros.

Lo que nos queda ahora es meter dentro del bucle lo que queremos que se muestre asi:

<tr>
<td valign=”top” class=”texto”> <img src=”../Images_web/<? echo $foto; ?>” width=”100″ height=”100″></td>
<td colspan=”2″ valign=”top” class=”texto”><? echo $link; ?></td>
</tr>

Aqui estamos mostrando una imagen que tiene desde la base de datos(ojo no tenemos la imagen en si, tenemos la ruta a ese archivo)y el link.

Despues cerramos el bucle y ya esta!!

<?
}//fin del while
}else{
//no hay resultados
?>
<tr>
<td colspan=”3″ align=”center”>No hay datos</td>
</tr>
<?
}//fin del if/else de resultados
?>

Ya lo tenemos terminado, espero os haya servido.

No te pierdas el proximo capitulo de “como insertar datos en una base de datos con un formulario”

Hasta pronto


Octubre-17-08

Problema CSS IE padding y margin

Posteado por alebaquero sobre Diseño web

Internet Explorer como sabemos es un gran problema para los diseñadores por como genera las paginas y de como se salta el Estandar W3C para la correcta visualización de estas.

Asi que hoy vamos a explicar como tenemos que diseñar el CSS para nuestras cajas encajen como queremos.

El problema en sin es muy simple de entender pero muy dificil de asimilar por que lo hace ya sabeis Microsoft y sus grandes algoritmos, en fin resulta que cuando tienes una caja flotada y le ayades un padding o margin laterales ojo solo laterales, pues el Hijo de su madre de IE duplica los padding o margin segun su valor, una gracia.

Aqui pongo un ejemplo de como interpreta Firefox y Internet Explorer el padding y margin:

Bueno creo que esta bastante claro de como lo representa uno u otro, en el codigo de la derecha en cursiva he puesto la solucion a este problema.

display:inline

con esta linea le decimos al navegador que no le ayada nada si tenemos padding o margin laterales.

Espero que os haya servidor de algo este pequeño tutorial.

Octubre-15-08

Tipografias web 2.0

Posteado por alebaquero sobre Diseño web

Hoy en dia en la red esta la tendencia WEB 2.0 que es como una nueva manera de diseñar y programar las webs de hoy en dia.

Como todo el web 2.0 tiene ciertas caracteristicas que le hacen distinto de otros diseño, una de esos elementos son las tipografias.

He aqui una web donde nos explicacion y informan de las tipografias usadas en varios logos que conoceras al instante.

http://fontfeed.com/archives/the-logos-of-web-20/