Contrabarra Programas y programación

7mar/120

PHP y MySQL – Conexión a la base de datos

Hoy toca hacer la conexión a la base de datos  :

Primero crearemos la página para rellenar la base de datos. Abrimos dreamweaver y en un HTML insertamos un formulario. Esto lo podemos hacer desde la pestaña de formulario si la tenemos abierta o desde "Insertar":

- Desde la pestaña -

- Desde "Insertar" -

Dentro del recuadro rojo que veremos en la página, pondremos una tabla (CONTROL + ALT + T) para meter en cada fila los campos de la base de datos (en mi caso, los campos eran "id_cd", "grupo" y "cd"). Por lo tanto, mi tabla tendrá 4 filas y 2 columnas:

  • Primera fila, primer recuadro. Pondré "Identidad" y en el recuadro de al lado, insertaré un campo de texto al que llamaremos "id_cd", que es el nombre que tiene en la base de datos.
  • Segunda fila, primer recuadro. Pondremos "Grupo" y en el recuadro de al lado, pondremos otro campo de texto con el nombre "grupo".
  • Tercera fila, primer recuadro. Pondremos "CD" y en el recuadro de al lado, otro campo de texto con el nombre "cd".
  • La cuarta fila es para colocar el botón de guardar. Lo seleccionamos y le cambiamos el valor. Le pondremos "Guardar".

IMPORTANTE - Que los campos de texto del formulario se llamen igual que en la base de datos.

Ya tenemos el formulario hecho, ahora, le vamos a decir lo que ha de hacer. En el código de la página, en donde empieza el formulario, localizaremos esta línea:

1
2
3
4
</head>
<body>
<!-- En action, ponemos guardar.php -->
<form id="form1" name="form1" method="post" action="guardar.php">

Lo que hemos hecho es decirle al formulario que debe buscar sus instrucciones en un archivo llamado guardar.php este archivo se comunicará con la base de datos y guardará lo que vayamos añadiendo en el formulario. Bien, guardamos nuestro formulario con el nombre que querais y abrimos un nuevo archivo, este lo guardaremos con el nombre guardar.php. Si hay algo escrito dentro, lo borramos todo y escribimos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
//Creo las variables de conexión
$host="localhost";
$user="root";
$password="";

//Conectamos
mysql_connect("localhost","root","");
//Selecciono la base de datos
mysql_select_db("mismusicas");
// Creo variables para los campos
$grupo = $_POST['grupo'];
$cd = $_POST['cd'];
mysql_query("INSERT INTO cds(grupo,cd) VALUES ('$grupo','$cd')");
//Mensage cuando acaba.
echo 'Datos insertados correctamente';
?>

Lo guardamos y probamos... Acabo de darme cuenta de que no deberia de haber puesto el id_cd en el formulario para rellenar, pues eso lo hace sólo. En fin, o lo eliminais o no lo rellenamos y el resultado en nuestra base de datos es:

Y con esto y un bizcocho, hasta mañana a las 8!!

Archivado en: Bases de datos, PHP No hay comentarios
29feb/120

MYSQL – Creamos una base de datos

Hoy explicaré como crear una base de datos MySQL desde PHPAdmin.

Creamos una base de datos

Lo primero es entrar en PHPAdmin. En mi caso, como instalé XAMP, será "http://localhost/phpmyadmin/".
Una vez dentro clicamos en la pestañita "Bases de datos":

Se abrira una página con todas las bases de datos que tengamos, si es que tenemos. Abajo veremos que pone "Crear nueva base de datos". Como mi base de datos irá de música, le puse el nombre de - mismusicas - Y clicamos en crear.

 

Creamos las tabla

La primera tabla la llamaré - cds - y le asignaré 3 campos y clico en continuar:

Aparecerá entonces algo parecido a esto (digo parecido xq he visto que a mucha gente le sale este menú bastante más sencillo, pero viene a ser lo mismo):

Hay que rellenarlo, y para hacerlo explicaré para que sirve cada cosa más o menos:

    • CAMPO - Es el nombre que le daremos al campo. Por ejemplo "Nombre" o "Apellidos"...
    • TIPO:
      • INT o INTEGER - Es un entero de tamaño normal.
      • VARCHAR - Cadena de carácteres. Tienen límite (255)
      • TEXT - Cadena de carácteres que excede el límite (255)
      • DATE - Para colocar fechas
    • LONGITUD - Aquí se decide cuantos carácteres como máximo dejaremos poner. Para el campo de id_cd no le puse nada, pero en los otros dos puse un límite de 30 carácteres.
    • PREDETERMINADO 2 Tenemos un menú desplegable que explico ahora explicaré y un campo de texto en el que pondremos el valor por defecto.
      • NONE - Nada
      • COMO FUERA DEFINIDO - Pondrá lo que hayamos escrito en el campo de texto predefinido
      • NULL - Lo ponemos si queremos decir que puede estar vacio
      • CURRENT_TIMESTAMP - Cuando metes un dato en la tabla, aquí quedaría la fecha (del servidor) en que se hizo.
    • COTEJAMIENTO - Tipo de codificación de la base de datos
    • ATRIBUTOS:
      • BINARY - Tiene cadenas de carácteres binarios.
      • UNSIGNED - El valor es siempre positivo. Si tenemos de -255 a +255, quedaria de 0 a 510
      • UNSIGNED ZEROFILL - Hace lo mismo que el anterios y además rellena los espacios vacios con ceros. Así si ponemos un 1 y hemos especificado que la longitud sea de 3, el número que finalmente veremos será " 001 "
      • ON UPDATE CURRENT_TIMESTAMP - Es para los tipos fecha. Si no rellenamos la casilla de tipo fecha, se quedará la fecha registrada en ese momento por el servidor.
    • NULO - Aceptamos datos vacios o no los aceptamos
    • AUTO_INCREMENT - Incremente en 1 el valor. Por ejemplo, cuando escribamos los datos del primer CD, en el campo "ID_CD" saldrá un 1. Cuando pongamos los datos del segundo CD, saldrá un 2 xq se incrementará el valor.
    • MIME-TYPE - Sirve para colocar archivos de audio, video, imagen... + Información.
    • TRANSFORMACIÓN DEL NAVEGADOR:
TRANSFORMACIÓN DEL NAVEGADOR DESCRIPCIÓN
application/octetstream: download Muestra un enlace para descargar los datos binarios del campo
application/octetstream: hex Muestra los datos en representación hexadecimal
image/jpeg: inline Muestra una miniatura de imagen que puede abrirse mediante un clic;

opciones: width, height en píxeles (mantiene la proporción original)
image/jpeg: link Enlace a la imagen
image/png: inline Ver imagen
text/plain: dateformat Toma un campo TIME, TIMESTAMP o DATETIME y lo formatea usando su formato de fechas local.
text/plain: external LINUX SOLAMENTE: Ejecuta una aplicación externa y alimenta el fielddata mediante input estándar. Retorna el output estándar de la aplicación. El predeterminado es Tidy, para mostrar código HTML agradable para la impresión.
text/plain: formatted Mantiene el formato original del campo
text/plain: imagelink Muestra una imagen y un enlace, el campo contiene el nombre del archivo; la primera opción es un prefijo como "http://dominio.com/", la segunda opción es el ancho en píxeles, el tercero es el alto.
text/plain: link Muestra un enlace, el campo contiene el nombre del archivo; la primera opción es un prefijo como "http://dominio.com/", la segunda opción es un título para el enlace.
text/plain: longToIpv4 -- No he encontrado ninguna descripción --
text/plain: sql Formatea el texto como una consulta SQL y resalta la sintaxis.
text/plain: substr Muestra una parte de una cadena de caracteres. La primera opción es el número de caracteres a pasar por alto desde el principio de la cadena de caracteres (Predeterminado: 0). La segunda opción es el número de caracteres a mostrar (Predeterminado: hasta el final de la cadena de caracteres). La tercera opción es la cadena de caracteres a adjuntar y/o anteponer cuando haya truncamiento (Predeterminado: "...").

(Información de la tabla sacada de la ayuda)

  • OPCIONES DE TRANSFORMACIÓN - Según hayamos escogido en el campo anterior, aquí se especifican por ejemplo en una imagen, su tamaño.

Algunas de las opciones las entiendo muy bien, pero hay de otras que... Creo que ya iré probando para saber bien su utilidad.

Volviendo a la edición de los campos. Como veis en la imagen de arriba, no hace falta ponerlo todo, todo. A mi me ha quedado así:

id_cd

.- Campo - id_cd
.- Tipo - INT
.- Longitud/Valores - 10
.- Predeterminado - NONE
.- Atributos - UNSIGNED ZEROFILL
.- AUTO_INCREMENT - Activado

Grupo

.- Campo - Grupo
.- Tipo - VARCHAR
.- Longitud/Valores - 30
.- Predeterminado - NONE
.- Cotejamiento - Latin1_spanish_ci

CD

.- Campo - CD
.- Tipo - VARCHAR
.- Longitud/Valores - 30
.- Predeterminado - NONE
.- Cotejamiento - Latin1_spanish_ci

Despues de hacer esto guardamos.
Ahora le diremos a la tabla que el campo id_cd hará de clave primaria.

Y ahora ya sólo nos queda meter datos para probarla. De momento lo haremos desde esta misma página, ya más adelante haremos una página de registros en PHP.
Vamos a la pestañita "insertar" y rellenamos los campos donde dice valor. No ponemos nada en el de id_cd, para que lo haga la tabla sola. Asi pues sólo ponemos el grupo y el CD.

Cuando queramos ver los registros que hemos puesto, iremos a la pestaña "Examinar" por si queremos editar alguna cosa.

Y ya por hoy hemos acabado.
Saluditos!!!!

Archivado en: Bases de datos No hay comentarios
23feb/120

JQUERY – Ahorrando trabajo con los themes

La semana pasada hable sobre como modificar el css del theme de nuestra web para móbiles.
Esto es una pequeña ampliación. Hay páginas que nos ofrecen un recurso muy bueno para trabajar este tema con un mínimo de esfuerzo.

ONBILE

En esta página nos ofrecen poder crear una página web para móbiles escogiendo entre varios themes ya preparados, escoges color, escoges un theme sobre las secciones que más o menos se adapten a lo que vas a crear y finalmente editas cada página pudiendo poner el logo, testos, título, botones, más secciones...

La verdad es que esta muy bien, es gratuito y te alojan la web.

jquerymobile

En esta otra página lo que podremos hacer es crear nuestro propios estilos visualmente arrastrando los colores y colocandolos en la parte que queremos afectar. También podemos afinal el color con el panel de la izquierda. Como vereis, podemos hacer como con el dreamweaver que nos hace varios temas de colores (A, B, C...) y descargarlos:

Saluditos!!!

Archivado en: jquery, Mobiles No hay comentarios
16feb/120

JQUERY – Cambiar theme de web para móbiles

Cuando queremos crear una web para móbiles, en dreamweaver tenemos unas plantillas:

Y la página que nos sale es algo así:

Y si la probamos. veremos esto:

En que tenemos que fijarnos para hacer nuestras modificaciones?

Pues debemos buscar la hoja CSS, copiarla y guardarla.
Lo que vemos en esta imagen son las hojas adjuntas a nuestra página. Estas hojas adjuntas no las tenemos nosotros, entonces, para modificarlas hay que descargarlas.

Podemos clicar en cada una de ellas, copiar el contenido y guardarlo en una nueva hoja teniendo en cuenta su terminación.
Por ejemplo:

  • Clico en la hoja de estilos.
  • Selecciono todo el texto que aparece y lo copio (CONTROL + C).
  • Creo un nuevo archivo - Página en blanco // CSS -
  • Pegamos lo que hemos copiado (CONTROL + V) y lo guardamos con el nombre que queramos.

Si copiamos los scripts, los guardamos como ".js" (javascript).

Una vez tengamos los archivos en casa, tenemos que darle la ruta al HTML. El código de la cabecera que veremos será algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- La etiqueta head abre la cabecera del HTML -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Entre las etiquetas de title le ponemos un nombre a la página -->
<title>Prueba theme</title>

<!-- Aquí esta lo que nos interesa, las rutas de los archivos externos que debemos cambiar-->
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

<!-- Aquí termina la cabecera de la página -->
</head>
<body>

Yo guardé mis archivos en una carpeta llamada estilo y les puse los mismos nombres, pero que sepais que se pueden cambiar.
Entonces mis rutas quedarian así:

1
2
3
4
5
6
7
<!-- Hago el cambio de rutas-->
<link href="estilo/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="estilo/jquery-1.5.min.js" type="text/javascript"></script>
<script src="estilo/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

<!-- Aquí termina la cabecera de la página -->
</head>

Sencillo, no?
Ahora lo que haremos será separar los diferentes themes que trae por defecto. Abrimos la hoja de estilos y empezamos la búsqueda.

Que tenemos que buscar?

Veamos esta imágen y comento:

He marcado unos selectores (palabras rosas que empiezan por un punto) que van siempre detrás de una llave (marcada en azul clarito). Justo despues de la llave yo he ido haciendo enter para tener todos los selectores a la izquierda bien colocaditos y me sea más fácil leer el código (manias que tengo). También he marcado el final de estos selectores que como vemos en la imagen, los de arriba acaban en "a" y los de más abajo en "b". Hay un total de 5 letras "a, b, c, d, e" y cada letra es un theme diferente.

Os enseño un trozo de código de como me ha quedado a mi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* THEME A */
 
 .ui-bar-a{border:1px solid #2a2a2a;background:#111;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #000;background-image:-moz-linear-gradient(top,#3c3c3c,#111);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111));-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"}
 .ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button{font-family:Helvetica,Arial,sans-serif}
 .ui-bar-a .ui-link-inherit{color:#fff}
 .ui-bar-a .ui-link{color:#7cc4e7;font-weight:bold}
 .ui-body-a{border:1px solid #2a2a2a;background:#222;color:#fff;text-shadow:0 1px 0 #000;font-weight:normal;background-image:-moz-linear-gradient(top,#666,#222);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#222));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"}
 .ui-body-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{font-family:Helvetica,Arial,sans-serif}
 .ui-body-a .ui-link-inherit{color:#fff}
 .ui-body-a .ui-link{color:#2489ce;font-weight:bold}
 .ui-br{border-bottom:1px solid rgba(130,130,130,.3)}
 .ui-btn-up-a{border:1px solid #222;background:#333;font-weight:bold;color:#fff;cursor:pointer;text-shadow:0 -1px 1px #000;text-decoration:none;background-image:-moz-linear-gradient(top,#555,#333);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555),color-stop(1,#333));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"}
 .ui-btn-up-a a.ui-link-inherit{color:#fff}
 .ui-btn-hover-a{border:1px solid #000;background:#444;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #000;text-decoration:none;background-image:-moz-linear-gradient(top,#666,#444);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#444));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444')"}
 .ui-btn-hover-a a.ui-link-inherit{color:#fff}
 .ui-btn-down-a{border:1px solid #000;background:#3d3d3d;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #000;background-image:-moz-linear-gradient(top,#333,#5a5a5a);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#333),color-stop(1,#5a5a5a));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"}
 .ui-btn-down-a a.ui-link-inherit{color:#fff}
 .ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a{font-family:Helvetica,Arial,sans-serif}
 
/* THEME B */
 
 .ui-bar-b{border:1px solid #456f9a;background:#5e87b0;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #254f7a;background-image:-moz-linear-gradient(top,#81a8ce,#5e87b0);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#81a8ce),color-stop(1,#5e87b0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#81a8ce', EndColorStr='#5e87b0')"}
 .ui-bar-b,.ui-bar-b input,.ui-bar-b select,.ui-bar-b textarea,.ui-bar-b button{font-family:Helvetica,Arial,sans-serif}
 .ui-bar-b .ui-link-inherit{color:#fff}
 .ui-bar-b .ui-link{color:#7cc4e7;font-weight:bold}
 .ui-body-b{border:1px solid #c6c6c6;background:#ccc;color:#333;text-shadow:0 1px 0 #fff;font-weight:normal;background-image:-moz-linear-gradient(top,#e6e6e6,#ccc);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(1,#ccc));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6', EndColorStr='#cccccc')"}
 .ui-body-b,.ui-body-b input,.ui-body-b select,.ui-body-b textarea,.ui-body-b button{font-family:Helvetica,Arial,sans-serif}
 .ui-body-b .ui-link-inherit{color:#333}
 .ui-body-b .ui-link{color:#2489ce;font-weight:bold}
 .ui-btn-up-b{border:1px solid #145072;background:#2567ab;font-weight:bold;color:#fff;cursor:pointer;text-shadow:0 -1px 1px #145072;text-decoration:none;background-image:-moz-linear-gradient(top,#4e89c5,#2567ab);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#5f9cc5),color-stop(1,#396b9e));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#4e89c5', EndColorStr='#2567ab')"}
 .ui-btn-up-b a.ui-link-inherit{color:#fff}
 .ui-btn-hover-b{border:1px solid #00516e;background:#4b88b6;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #014d68;background-image:-moz-linear-gradient(top,#72b0d4,#4b88b6);text-decoration:none;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#72b0d4),color-stop(1,#4b88b6));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#72b0d4', EndColorStr='#4b88b6')"}
 .ui-btn-hover-b a.ui-link-inherit{color:#fff}
 .ui-btn-down-b{border:1px solid #225377;background:#4e89c5;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #225377;background-image:-moz-linear-gradient(top,#396b9e,#4e89c5);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#396b9e),color-stop(1,#4e89c5));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#396b9e', EndColorStr='#4e89c5')"}
 .ui-btn-down-b a.ui-link-inherit{color:#fff}
 .ui-btn-up-b,.ui-btn-hover-b,.ui-btn-down-b{font-family:Helvetica,Arial,sans-serif}
 
/* THEME C */
 
 .ui-bar-c{border:1px solid #b3b3b3;background:#e9eaeb;color:#3e3e3e;font-weight:bold;text-shadow:0 1px 1px #fff;background-image:-moz-linear-gradient(top,#f0f0f0,#e9eaeb);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(1,#e9eaeb));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"}
 .ui-bar-c,.ui-bar-c input,.ui-bar-c select,.ui-bar-c textarea,.ui-bar-c button{font-family:Helvetica,Arial,sans-serif}
Como puedo ver cada theme?

Pues nos vamos a nuestra página HTML y seleccionamos la primera hoja, que como veis se marca de color azul:

Y en el código ponemos lo siguiente:

1
2
3
4
5
6
7
</head>
<!-- Después de la cabecera viene el cuerpo del archivo (body), que es donde se coloca todo -->
<body>
<!-- Esta es la parte que nos interesa. Esta etiqueta div, nos dice que hay una página -->
<!-- a la que yo he llamado "inici" y le he puesto el theme "a" -->
<div data-role="page" id="inici"  data-theme="a">
        <div data-role="header">

Podemos ir probando los themes que tenemos y crear de nuevos.

Cómo puedo hacer el mio?

Muy fácil, copiamos todo un theme y lo añadimos a la cola. El mio se llamará "f" y el código me quedaria así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* THEME E */
 
 .ui-bar-e .ui-link-inherit{color:#333}
 .ui-bar-e .ui-link{color:#2489ce;font-weight:bold}
 .ui-body-e{border:1px solid #f7c942;color:#333;text-shadow:0 1px 0 #fff;background:#faeb9e;background-image:-moz-linear-gradient(top,#fff,#faeb9e);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#faeb9e));-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"}
 .ui-body-e,.ui-body-e input,.ui-body-e select,.ui-body-e textarea,.ui-body-e button{font-family:Helvetica,Arial,sans-serif}
 .ui-body-e .ui-link-inherit{color:#333}
 .ui-body-e .ui-link{color:#2489ce;font-weight:bold}
 .ui-btn-up-e{border:1px solid #f7c942;background:#fadb4e;font-weight:bold;color:#333;cursor:pointer;text-shadow:0 1px 1px #fe3;text-decoration:none;text-shadow:0 1px 0 #fff;background-image:-moz-linear-gradient(top,#fceda7,#fadb4e);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fceda7),color-stop(1,#fadb4e));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"}
 .ui-btn-up-e a.ui-link-inherit{color:#333}
 .ui-btn-hover-e{border:1px solid #e79952;background:#fbe26f;font-weight:bold;color:#111;text-decoration:none;text-shadow:0 1px 1px #fff;background-image:-moz-linear-gradient(top,#fcf0b5,#fbe26f);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fcf0b5),color-stop(1,#fbe26f));-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"}
 .ui-btn-hover-e a.ui-link-inherit{color:#333}
 .ui-btn-down-e{border:1px solid #f7c942;background:#fceda7;font-weight:bold;color:#111;text-shadow:0 1px 1px #fff;background-image:-moz-linear-gradient(top,#fadb4e,#fceda7);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fadb4e),color-stop(1,#fceda7));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#fadb4e', EndColorStr='#fceda7')"}
 .ui-btn-down-e a.ui-link-inherit{color:#333}
 .ui-btn-up-e,.ui-btn-hover-e,.ui-btn-down-e{font-family:Helvetica,Arial,sans-serif}
 a.ui-link-inherit{text-decoration:none!important}
 .ui-btn-active{border:1px solid #155678;background:#4596ce;font-weight:bold;color:#fff;cursor:pointer;text-shadow:0 -1px 1px #145072;text-decoration:none;background-image:-moz-linear-gradient(top,#85bae4,#5393c5);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#85bae4),color-stop(1,#5393c5));-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')";outline:0}
 
 
 /* THEME F */
   
 .ui-bar-f{border:1px solid #2a2a2a;background:#111;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #000;background-image:-moz-linear-gradient(top,#3c3c3c,#111);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111));-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"}
 .ui-bar-f,.ui-bar-f input,.ui-bar-f select,.ui-bar-f textarea,.ui-bar-f button{font-family:Helvetica,Arial,sans-serif}
 .ui-bar-f .ui-link-inherit{color:#fff}
 .ui-bar-f .ui-link{color:#7cc4e7;font-weight:bold}
 .ui-body-f{border:1px solid #2a2a2a;background:#222;color:#fff;text-shadow:0 1px 0 #202020;font-weight:normal;background-image:-moz-linear-gradient(top,#666,#222);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#222));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')"}
 .ui-body-f,.ui-body-f input,.ui-body-f select,.ui-body-f textarea,.ui-body-f button{font-family:Helvetica,Arial,sans-serif}
 .ui-body-f .ui-link-inherit{color:#fff}
 .ui-body-f .ui-link{color:#A13A3E;font-weight:bold}
 .ui-br{border-bottom:1px solid rgba(130,130,130,.3)}
 .ui-btn-up-f{border:1px solid #222;background:#333;font-weight:bold;color:#fff;cursor:pointer;text-shadow:0 -1px 1px #000;text-decoration:none;background-image:-moz-linear-gradient(top,#555,#333);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555),color-stop(1,#333));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"}
 .ui-btn-up-f a.ui-link-inherit{color:#fff}
 .ui-btn-hover-f{border:1px solid #000;background:#444;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #000;text-decoration:none;background-image:-moz-linear-gradient(top,#666,#444);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#444));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#444444')"}
 .ui-btn-hover-f a.ui-link-inherit{color:#fff}
 .ui-btn-down-f{border:1px solid #000;background:#3d3d3d;font-weight:bold;color:#fff;text-shadow:0 -1px 1px #000;background-image:-moz-linear-gradient(top,#333,#5a5a5a);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#333),color-stop(1,#5a5a5a));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"}
 .ui-btn-down-f a.ui-link-inherit{color:#fff}
 .ui-btn-up-f,.ui-btn-hover-f,.ui-btn-down-f{font-family:Helvetica,Arial,sans-serif}

El resultado de mi theme f es este:

Ya veis que la página es toda oscura y que los enlaces son granates :-) los cambios no son espectaculares pero por lo menos si quereis hacer un theme con colores adecuados a vuestras web, ya sabeis por donde empezar.
Yo por hoy lo dejo ya.

Saluditos!!

Archivado en: jquery, Mobiles No hay comentarios
1feb/120

PHP – Formulario

Hoy me pongo con los formularios de envio.

Para empezar hemos de crear en HTML lo que será el formulario:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<title>Formularios</title>
<meta name="Contrabarra" content="Veloxia Network">
<body>
<table width="343" border="0">
  <tr>
    <td>Nombre</td>
    <td><form name="form1" method="post" action="enviar.php">
      <input type="text" name="nombre">
    </form></td>
  </tr>
  <tr>
    <td>Apellidos</td>
    <td> <input type="text" name="apellidos"></td>
  </tr>
  <tr>
    <td>DNI</td>
    <td><input type="text" name="DNI"></td>
  </tr>
  <tr>
    <td>Direcci&oacute;n</td>
    <td><textarea name="direccion"></textarea></td>
  </tr>
  <tr>
    <td>C.P</td>
    <td><input type="text" name="cp"></td>
  </tr>
  <tr>
    <td>Tel.</td>
    <td><input type="text" name="tel"></td>
  </tr>
  <tr>
    <td>Modo de pago</td>
    <td><select name="cuotas" size="1" id="cuotas">
      <option value="transferencia bancaria">Transferencia bancaria</option>
      <option value="contra reembolso">Contra reembolso</option>
      <option value="Paypal">Paypal</option>
    </select></td>
  </tr>
  <tr>
    <td>Comentarios</td>
    <td><textarea name="comentarios"></textarea></td>
  </tr>
  <tr>
    <td><input type="submit" name="Submit" value="Enviar"></td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

El resultado de lo que he hecho es el siguiente:

Que es lo que hay que tener en cuenta del formulario?
Pues sobretodo la línea 9 donde dice:

1
<td><form name="form1" method="post" action="enviar.php">

Que nos indica que llamará a un archivo llamado "enviar.php" hay que tenerlo presente si después queremos cambiar los nombres de los archivos y es ahí dende está el código que cogerá los datos, los procesará y los enviará al correo.

Ahora nos ponemos con PHP. Creamos un archivo nuevo y colocamos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
$email = $_POST['email'];

$header .= 'From: ' . $email . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje .= "Fecha de envio " . date('d/m/Y', time());
$mensaje .= " \r\nNom: " . $_POST['nombre'] . " \r\n";
$mensaje .= "Cognoms: " . $_POST['apellidos'] . " \r\n";
$mensaje .= "DNI: " . $_POST['dni'] . " \r\n";
$mensaje .= "Direccio: " . $_POST['direccion'] . " \r\n";
$mensaje .= "CP: " . $_POST['cp'] . " \r\n";
$mensaje .= "Tel: " . $_POST['tel'] . " \r\n";
$mensaje .= "Pago: " . $_POST['cuotas'] . " \r\n";
$mensaje .= "E-mail: " . $_POST['email'] . " \r\n";
$mensaje .= "Missatge: " . $_POST['notas'] . " \r\n";

$para = 'info@contrabarra.es';
$asunto = 'Formulario de contrabarra';

mail($para, $asunto, $mensaje, $header);

echo "Missatge enviat correctament"
?>

Y lo guardamos con el nombre de enviar.php Ahora lo subimos a nuestro servidor y listos! Ya tenemos un formulario de envio.

Quiero cambiar cosas!!

.- En la línea 20 del archivo en PHP, veremos que hay una variable llamada $para, ahí es donde debemos cambiar mi correo por el vuestro.

.- Para cambiar el asunto del mensage, lo veremos en la línea de abajo, la 21.

.- El texto que nos sale cuando el formulario se ha enviado, lo cambiaremos en la línea 25 (mi mensage esta en catalan )

Y con esto y un bizcocho, hasta mañana a las 8!

Archivado en: PHP No hay comentarios
18ene/120

WORDPRESS – Plugin NextGEN (Galeria de imágenes)

Hoy hablaré de un plugin para crear galerias de imágenes. El que escogí fué  "NextGen".

Primero hay que ir a plugins y buscarlo:

Lo instalamos normalmente y lo activamos.

Veremos que nos sale una opción más en wordpress:

Clicaremos en "Add Gallery / Images" y le daremos un nombre a nuestra Galeria:

Luego clicaremos en "Upload Images" y subiremos las imágenes. Escogeremos la galerian.

Y ahora que ya tenemos la galeria creada podemos ir a "Manage Galery" para retocar las miniaturas, darles nombre a las fotos, descripción...

Cuando hayamos acabado del retoque, creamos una nueva entrada o página y clicamos en el botóncito de añadir la galeria:

Nos saltará una ventanita donde escogeremos cual galeria vamos a colocar:

Y esto es todo.

Un ejemplo que conozco que lleva esta galeria es bsmatics.

 

Aquí os dejo un videotutorial de lo explicado:

 

Un saludo!!!

Archivado en: Wordpress No hay comentarios
4ene/120

PHP – Expresiones

Las expresiones son el conjunto de variables y operadores que generan un resultado cuando se completa el proceso, es cualquier tipo de código que evalúa un valor.
Un aspecto muy importante de la evaluación de una expresión es el orden de los operadores, que según se lean, darán un resultado u otro.

Pongamos un ejemplo:

3 + 2 * 7 = 17

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$A = 3;
$B = 2;
$C = 7;
/* La operación que realiza primero
es 2*7 y al resultado le suma 3 */
echo "3 + 2 * 7 = ";
echo $D = $A + $B * $C;
/* Ahora cambiaremos mediante paréntesis
el orden de las operaciones */
echo "<br>(3 + 2) * 7 = ";
echo $D = ($A + $B) * $C;
?>

El resultado es este:

El orden de operadores es:

  • () - Paréntesis
  • ^ - Exponenciación
  • * / - Multiplicar y dividir
  • + - - Suma y resta
  • Mod - Resto de una división
  • = <> > < >= <= - Igual, distinto, mayor, menor, mayor o igual, menor o igual
  • Not - No se cumple que
  • And - Y se cumple que
  • Or - O se cumple que

Y esto es todo por hoy!
Saluditos!!!

Archivado en: PHP No hay comentarios
27dic/111

PHP – Operadores

Para hoy un repaso a los operadores.
Los operadores son símbolos a los que PHP les a asignado una operación. Por ejemplo, el símbolo de suma "+" servirá para sumar.
Tenemos operadores:

  • Aritméticos
    • $a + $b -> sumar
    • $a - $b -> restar
    • $a * $b -> multiplicar
    • $a / $b -> dividir
    • $a % $b -> resto
  • Asignación - Es el que le da un valor a una variable.
    • $a = 5;
  • Comparación
    • $a == - IGUAL - Si a es igual a b $b
    • $a === $b - IDENTICO - Si a es igual a b y son del mismo tipo.
    • $a != $b - DIFERENTE - Si a no es igual a b.
    • $a !== $b - NO IDENTICO - Si a no es identico a b o no son del mismo tipo.
    • $a < $b - MENOR - Si a es menor a b
    • $a > $b - MAYOR - Si a es mayor a b
    • $a <= $b - MAYOR O IGUAL QUE -Si a es mayor o igual a b.
  • Lógicos
    • $a and $b - (AND) Y - True si a y b son verdaderos.
    • $a && $b - (AND) Y - True si a y b son verdaderos.
    • $a or $b - (OR) O INCLUSO - True si a o b son verdaderos
    • $a || $b - (OR) O INCLUSO - True si a o b son verdaderos
    • $a xor $b (XOR) O EXCLUSIVO - True si a o b son verdaderos, pero no los dos.
    • ! $a - (NOT) NO - True si a no es verdadero.

Para el texto tenemos el punto que concatena:

1
2
3
4
5
6
<?php
//a tiene un valor de texto
$a = "Hola ";
//b tiene como valor la variable a más la palabra asignada.
$b = $a . "Contrabarra!";
?>

Definición de CONCATENAR = Enlazar, unir.

Y esto es todo por hoy!

Archivado en: PHP 1 Comentario
20dic/110

PHP – Las constantes

Pues igual que en AS3, las constantes son datos que no varian.
Por ejemplo:

  • El número PI
  • El número del DNI
  • Tu nombre

Crearemos una constante utilizando la función define ():

1
2
3
4
5
6
<?php
// Definimos la constante
define ("NAVIDAD","  Diciembre");
//Mostramos en pantalla el resultado
echo NAVIDAD;
?>

Como vemos, para definir una constante, primero le damos un nombre y después le asignamos el contenido. Las constantes, al igual que las variables, distinguen mayusculas de minusculas. Por comodidad a la hora de leer nuestro código, procuraremos ponerles el nombre en mayusculas.

Otra cosa a tener en cuenta de las constantes es que sólo pueden tener valores escalares. Esto quiere decir que los valores pueden ordenarse (de la A a la Z, de mayor a menor...).

Aquí unos ejemplos de algunas constantes predefinidas ya por PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head><title>Constantes de contrabarra</title></head>
<body>

<?php
//__FILE__ Constante que nos devolverá
//la ruta de nuestro archivo
echo "La ruta completa de este archivo es: ";
echo __FILE__;
//__LINE__ Constante que nos devolverá
//el número de la línea
//También cuentan los espacios en blanco.
echo "<br>Esta es la línea: ",__LINE__, "del archivo";
//PHP_OS Sistema operativo del servidor
echo "<br>El sistema operativo del servidor es ",PHP_OS;
//PHP_VERSION Nos dice la versión
//de nuestro PHP
echo "<br>Esta es la version de PHP que utilizo" ,PHP_VERSION;
?>

</body>
</html>

Este código lo he guardado como hoja de PHP en mi servidor casero. El resultado fué este:

 

Y con esto y un bizcocho... Hasta mañana a las 8!!

Archivado en: PHP No hay comentarios
7dic/110

PHP – Apuntes de inicio. Como utilizar variables.

Esto son apuntes generales para poder empezar:

  • Los delimitadores estándar para PHP son:
    1
    <?php Aqui escribo el script ?>
  • Otra forma de delimitar es a través de HTML:
    1
    <script language="PHP"> Aquí el script en php </script>
  • Finalizaremos siempre las instrucciones con punto y coma " ; "
  • Los comentarios los escribiremos entre las siguientes etiquetas:
    1
    2
    /* Esto es un comentario muy largo, de varias parrafadas si se quiere */
    //esto tambien es un comentario, pero de una sola línea
  • Todas las variables empiezan por el signo de dolar " $ "
    • No es necesario declararlas
    • Los nombres de las variables deben empezar por letras o guion bajo.
    • Hay que tener en cuenta que distingue mayusculas de minusculas, por lo que una variable llamada $apunto no es lo mismo que &Apunto

Hay que tener mucho cuidado con las variables si no se declaran. A mi, personalmente, me gusta más declararlas xq se me hace más fácil la programación. Que entendemos por declarar??

A la hora de poner una variable en nuestros códigos, decimos que la declaramos. De esta forma le damos un nombre, un tipo de valor (texo, número...) y el valor.

Ejemplo para declarar una variable:

1
2
3
4
$texto = "variable de texto"; // string
$numero = 2; // integer
$numero_real = 4,79; // double
$valor = true; // boleana

Nos fijaremos en que la única variable cuyo valor está entre comillas es la de texto. Esto es importante. Las cadenas de texto SIEMPRE van entre comillas, sino, daria error.

Y con esto y un bizcocho... Hasta mañana a las 8!!

Archivado en: PHP No hay comentarios
   Entradas anteriores »

 

mayo 2012
L M X J V S D
« mar    
 123456
78910111213
14151617181920
21222324252627
28293031  

Categorías

Sitios de interés