Ingresar primer objetivo

UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLÓGICOS
ESCUELA DE COMPUTACIÓN
CICLO: 01/2015
Nombre de la Practica:
Lugar de Ejecución:
Tiempo Estimado:
MATERIA:
DOCENTES:
GUIA DE LABORATORIO #4
Funciones en PHP
Centro de Cómputo
2 horas con 30 minutos
Lenguajes Interpretados en el Servidor
Ing. Ricardo Ernesto Elías G. / Ing. Miguel Eduardo García O.
I. OBJETIVOS
Que el estudiante:
 Adquirir el dominio de la sintaxis y el uso de funciones con el lenguaje PHP.
 Lograr la habilidad necesaria para la declaración de funciones con o sin argumentos y con devolución o
no de valores.
 Hacer uso de características avanzadas de las funciones como la lista variable de argumentos, las
funciones variables y recursividad.
 Hacer uso de la modularidad para crear scripts que serán incluidos dentro de un script principal.
II. INTRODUCCION TEORICA
Funciones
Una función es un bloque de código independiente y autónomo que contiene un grupo de instrucciones que
se identifican con un nombre. Las funciones pueden invocarse todas las veces que se requiera desde cualquier
punto de un script. El código de las funciones puede aparecer dentro del script que se esté realizando o puede
ser parte de un script independiente que será llamado como archivo de inclusión (otro script PHP invocado).
Generalmente, cuando se realizan scripts con PHP las instrucciones se ejecutan conforme van siendo
procesadas por el intérprete del lenguaje. Sin embargo, a la hora de realizar scripts más complejos, hay
ocasiones en las que el mismo código ha de ser ejecutado más de una vez. Para estos casos sería útil que el
lenguaje de programación permitiera dividir el código en segmentos más pequeños, de forma que cada
bloque de código PHP pudiera ser agrupado bajo un identificador para que pudiera ser accedido de forma
independiente.
PHP permite la creación de funciones que permiten recoger todos los aspectos planteados anteriormente. Una
función permite desarrollar una tarea concreta y bien definida. Se encuentra separada del resto de
instrucciones del programa y se le asigna un nombre para que posteriormente pueda ser llamada desde otro
punto del script, o incluso, desde otro script. Es a través del nombre de la función que se pueden ejecutar las
instrucciones contenidas en la función tantas veces como sea necesario. La utilización de funciones permite
que un script aparezca escrito como una lista de referencias a las tareas que se deben hacer para crear una
página de respuesta.
Las funciones también pueden o no, aceptar parámetros o argumentos externos de los que dependa el proceso
que deba realizarse para posteriormente devolver un valor.
Sintaxis de las funciones en PHP
En su forma más compleja una función se declara con la palabra reservada function. A continuación, se debe
declarar el nombre de la función y posteriormente, y entre paréntesis, cada uno de los argumentos que
1 / 65
Guía # 4: Funciones en PHP
recibirá separados por coma. En el caso más simple, sólo se colocan los paréntesis vacíos inmediatamente
después del nombre de la función. Después de cerrar los paréntesis debe abrir llaves y colocar las
instrucciones que realizará la función para luego cerrar la llave. La sintaxis se muestra a continuación:
function nombre_funcion([$param1, $param2, … , $paramn]){
//bloque de instrucciones PHP
}
Como se puede ver, son necesarios los siguientes componentes en la declaración de una función:
 La palabra reservada function que debe utilizarse para indicar al intérprete de PHP que se va a
crear una nueva función
 nombre_funcion indica el nombre con el que se va a identificar la función dentro del script PHP
para su posterior llamada.
 $param1, $param2, ... , $paramn representan los parámetros necesarios para que la función pueda
ser ejecutada. Los parámetros han de expresarse siempre entre paréntesis y separados por comas.
Incluso si la función no necesitara ningún parámetro, deberán utilizarse los paréntesis.
 Bloque de instrucciones PHP, representa el conjunto de sentencias o instrucciones que se van
a ejecutar cada vez que se haga una llamada a la función.
Argumentos o parámetros de la función
El diseño de una función puede o debería incluir la aceptación opcional de uno o más argumentos o
parámetros que representarán valores que se pasan desde el exterior a la función. Esto permite que la función
sea independiente del exterior, haciéndola más portable.
Se puede entender un argumento o parámetro como una variable con ámbito local a la función que sirve para
almacenar valores que son pasados a la función.
Los argumentos o parámetros se especifican colocando nombres de variables entre los paréntesis de la
definición de la función:
function myfunction($parametro1, $parametro2){
//Código de la función
}
Devolución de valores
Casi siempre será importante que la función creada devuelva un valor antes de finalizar la ejecución. Aunque
también existirán casos en los que la función pudiera realizar una tarea sin que devuelva valor alguno. La
palabra reservada utilizada para devolver valores en las funciones de PHP es return, igual que en otros
lenguajes que usted ya conoce. Veamos los siguientes ejemplos:
function square ($num) {
return $num * $num;
}
echo square(4); // obtiene ’16’.
------------------------------------------function residuo($dividendo, $divisor){
$res = $dividendo % $divisor;
return $res;
}
No se puede devolver múltiples valores desde una función, pero un efecto similar se puede conseguir
devolviendo una lista.
function small_numbers(){
return array(0, 1, 2);
}
list($zero, $one, $two) = small_numbers();
Lenguajes Interpretados en el Servidor
2
Guía # 4: Funciones en PHP
Apunte importante:
 Recuerde que a los valores que se le aportan a una función desde el exterior se les denomina parámetros o
argumentos de la función. Los parámetros actúan como variables dentro de la función. Estas variables no
pueden utilizarse fuera de ese ámbito.
 El valor que devuelva la función debe ser enviado utilizando la palabra reservada return y a continuación el
nombre de la variable que contiene el resultado que se desea retornar al punto de llamada.
Ventajas del uso de funciones
a) Simplificación de código
Las funciones hacen que el código de un script sea más fácil de leer, por tanto, lo hacen más entendible y
más agradable a la vista del que tenga que leer el código. Esto es, porque evita el tener que repetir varias
veces un segmento de código dentro de un mismo script. En lugar de ello se escribe una sola vez y luego
dentro del script solamente hacemos la llamada a la función, en lugar de volverlo a escribir.
b) Reutilización de código
Permite que otros scripts, a parte del script donde se digitó el código de la función, puedan hacer uso de
dicha función. Esto evita la carga del programador de tener que escribir la misma funcionalidad en
diferentes scripts.
c) Modularidad
El uso de funciones permite que las modificaciones al código sean menos trabajosas para el programador,
porque en lugar de tener que cambiar el mismo código en varios lugares de un script, solamente se
modifica el código de la función y los scripts que la llaman no sufren modificación alguna (al menos, en la
mayor parte de los casos).
Funcionamiento de una función en PHP
Aunque el comportamiento puede variar en algunos casos, la mayoría de las funciones siguen un proceso
como el siguiente, una vez que son invocadas:
1. Aceptan uno, o más, valores, conocidos como argumentos, desde el script que la llama,
2. Realizan un proceso utilizando dichos valores (argumentos o parámetros), y
3. Devuelven el resultado y el control del programa al script que hizo la llamada.
Aspecto de una función en PHP
Características de las funciones de PHP (versión 4.2.X en adelante)
1. PHP no hace distinción entre mayúsculas y minúsculas para los nombres de las funciones. Pese a ello se
recomienda ser consistente en el código que se escribe de tal forma que si se nombró a una función
Cambiar, utilizar en el código siempre Cambiar, y no utilizar indistintamente, cambiar, CAMBIAR,
CAMbiar, etc.
Lenguajes Interpretados en el Servidor
3
Guía # 4: Funciones en PHP
2.
3.
4.
5.
Al igual que con las variables, podemos hacer referencia (una llamada) a una función antes de definirla en
el código. Existe una excepción, que se da cuando la función ha sido definida condicionalmente. En ese
caso la definición debe preceder a la llamada.
No se puede redefinir una función o eliminar su definición. Esto se debe a que PHP no soporta sobrecarga
de funciones como otros lenguajes de programación. Por ejemplo C++.
Las últimas versiones de PHP, (4 o superior) soportan el uso de lista variable de argumentos en las
funciones.
Se pueden utilizar parámetros por defecto en las funciones asignándole un valor inicial dentro de la
definición de los parámetros de la función.
Tipos de funciones.
En PHP podemos utilizar las funciones incorporadas del lenguaje (abs(), list(), array(), chr(), intval(), trim(),
substr(), printf(), time(), date(), etc.) o pueden realizarse funciones definidas por el usuario.
Las funciones incorporadas del lenguaje se comportan de la forma predeterminada para la que fueron
creadas. Existen muchas funciones incorporadas o predefinidas en PHP. Algunas ya las hemos utilizado en
guías anteriores. Por ejemplo: gettype(), settype(), print(), printf(), substr(), date(), etc.
Las funciones definidas por el usuario, o personalizadas, son creadas por el programador y su funcionalidad
y utilidad dependen en gran medida de la habilidad del programador. La ventaja de las segundas es que el
programador posee un control completo sobre ellas, ya que puede hacer que una función se comporte
exactamente del modo que se desea.
Parámetros de las funciones
La información puede suministrarse a las funciones mediante la lista de parámetros, una lista de variables
y/o constantes separadas por comas.
PHP soporta pasar parámetros por valor (el comportamiento por defecto), por referencia, y parámetros por
defecto. Listas de longitud variable de parámetros sólo están soportadas en PHP4 y posteriores. Un efecto
similar puede conseguirse en PHP3 pasando un array de parámetros a la función:
function takes_array($input) {
echo "$input[0] + $input[1] = ", $input[0]+$input[1];
}
Pasar parámetros por referencia
Por defecto, los parámetros de una función se pasan por valor (de manera que si se cambia el valor del
argumento dentro de la función, el valor pasado fuera de ella no se ve alterado). Si se desea permitir a una
función modificar el valor de sus parámetros, deben ser pasados por referencia.
Para hacer que una función pase sus parámetros por referencia existen dos métodos:
 Anteponiendo un símbolo de ampersand (&) al nombre del parámetro o argumento en la definición de la
función. Esto hará que siempre que se mande un parámetro a la función en la llamada, este será enviado
por referencia. Por ejemplo:
function add_some_extra(&$string){
$string .= ' y algo más.';
}
$str = ’Esto es una cadena, ’;
add_some_extra($str);
echo $str; // Saca ’Esto es una cadena, y algo más.’

Anteponer el símbolo de ampersand (&) al nombre del parámetro en la llamada a la función. Este método
se debe aplicar si se desea pasar una variable por referencia a una función que no toma el parámetro por
referencia por defecto; es decir, si no se especificó en la definición de la función.
$num = 10;
function called_function($number){
//En la declaración no indica que
//el parámetro sea por referencia
$number = $number +1;
Lenguajes Interpretados en el Servidor
4
Guía # 4: Funciones en PHP
echo $number, "\n";
}
called_function(&$num);
//Se le pasa el parámetro por
//referencia a la función
echo $num, "\n";
Parámetros por defecto
Una función puede definir valores por defecto para los parámetros escalares estilo C++. Esto significa que si
al llamar a una función, que requiere parámetros, estos no se especifican, se le asignará a estos un valor por
defecto. Veamos el siguiente ejemplo:
function makecoffee($type = "cappucino"){
return "Hacer una taza de $type.\n";
}
echo makecoffee();
//Se llama a la función sin indicar parámetro
echo makecoffee("espresso"); //Se llama a la función usando parámetro
La salida del fragmento anterior es:
Hacer una taza de cappucino.
Hacer una taza de expresso.
El valor por defecto tiene que ser una valor literal, y no una variable o miembro de una clase.
En PHP 4.0 también es posible especificar unset como parámetro por defecto. Esto significa que el argumento
no tomará ningún valor en absoluto si el valor no es suministrado.
Destacar que cuando se usan parámetros por defecto, estos tienen que estar a la derecha de cualquier
parámetro sin valor por defecto; de otra manera las cosas no funcionarán de la forma esperada. Considera el
siguiente fragmento de código:
function makeyogurt ($type = "acidophilus", $flavour) {
return "Haciendo un bol de $type $flavour.\n";
}
echo makeyogurt ("mora"); // No funcionará de la manera esperada
La salida del ejemplo anterior es:
Warning: Missing argument 2 in call to makeyogurt() in usr/local/etc/httpd/htdocs/php3test/functest.html on line 41
Haciendo un bol de mora.
Y ahora, compáralo con:
function makeyogurt ($flavour, $type = "acidophilus") {
return "Haciendo un bol de $type $flavour.\n";
}
echo makeyogurt ("mora"); // funciona como se esperaba
La salida de este ejemplo es:
Haciendo un bol de acidophilus mora.
Funciones variables
En la mayoría de casos las llamadas a función se realizan con el identificador de la función de forma directa,
sin embargo, en PHP es posible asignar el identificador a una variable de cadena y hacer que en la llamada a
función se utilice esta variable en lugar del nombre o identificador de la función. Por ejemplo:
$funcion = "potencia";
$valor = 3;
echo "$valor elevado al cuadrado es: " . $funcion(3) . "<br />";
Lenguajes Interpretados en el Servidor
5
Guía # 4: Funciones en PHP
//Definición de la función sqrt
function sqrt($numero){
return $numero * $numero;
}
Aunque este ejemplo es bastante trivial, el verdadero potencial de las funciones variables se puede
experimentar al realizar retrollamadas (callbacks), definiendo una matriz (array) con los nombres de varias
funciones haciendo que un ciclo o lazo recorra los nombres de las funciones para que realice cada una el
cálculo con uno o varios valores con las distintas funciones definidas. Por ejemplo:
$trigFunctions = array("sin", "cos", "tan"); //Funciones predefinidas PHP
$degrees = 30;
foreach($trigFunctions as $myfunction){
echo "\$myfunction(\$degrees) = " . $myfunction(deg2rad($degrees))
. "<br />";
}
Alcance de las variables en PHP.
La palabra alcance o ámbito hace referencia a las partes del programa que pueden tener acceso a una variable.
La vida de una variable es el tiempo durante el cual existe.
En PHP las variables pueden tener tres tipos de alcance:
a) Local.
Las variables locales son visibles dentro de una función y su vida acaba justo cuando la ejecución de la
función termina. Por defecto, todas las variables que se declaran dentro de una función son locales en la
función. Esto significa que estas variables no son accesibles desde fuera de la función y mueren cuando la
función termina.
Ejemplo:
<?php
//Variable global, visible afuera de las funciones
$friend = "Carlos";
function who(){
//Variable local que muere cuando acaba la función
$friend = "Juan";
printf("<p>Dentro de la función tu amigo es: %s.</p>", $friend);
}
//Llamada a la función who()
who();
printf("<p>Fuera de la función tu amigo es: %s.</p>", $friend);
?>
Al ejecutar el script obtenemos lo siguiente:
b) Global.
Las variables globales son visibles en todo un script, y normalmente no lo son para una función. Dentro
de una función no se puede acceder a las variables que se han declarado fuera de ella, a menos que la
pasemos por referencia a la función en forma de argumento. Otra forma de hacer que una función acceda
a una variable externa a la función es utilizando la palabra reservada global antes del nombre de la
variable.
Ejemplo: Usando argumento por referencia
<!DOCTYPE html>
<html lang="es">
<head>
<title>Argumento a función</title>
Lenguajes Interpretados en el Servidor
6
Guía # 4: Funciones en PHP
</head>
<body>
<?php
//function raise_sal(&$salary){
function raise_sal(&$salary){
//global $salary;
$salary *=
1.1;
}
$salary = 50000;
//raise_sal();
raise_sal($salary);
?>
¡Felicidades!, su nuevo salario es: . <?= "$" . $salary ?><br />
</body>
</html>
Al ejecutar el script obtenemos lo siguiente:
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Argumento a función</title>
</head>
<body>
<?php
function raise_sal(){
$GLOBALS['salary'] *= 1.1;
}
$salary = 50000;
raise_sal();
?>
¡Felicidades!, su nuevo salario es: . <?= "$" . $salary ?><br />
</body>
</html>
El resultado es:
c)
Estático.
Las variables estáticas son locales en una función, pero retienen su valor entre distintas llamadas a la
misma. Una variable estática no es visible fuera de la función, pero no muere cuando la función acaba.
Cuando se inicializa una variable estática, esta no pierde su valor entre las distintas llamadas, recuerda el
valor que tenía en la llamada anterior. Estas variables mueren hasta que termina el script.
Ejemplo:
<?php
function trackname(){
static $count = 0;
$count++;
echo "<p>Has ingresado a esta página $count veces</p>";
}
//Invocar varias veces a la función trackname()
trackname();
trackname();
trackname();
trackname();
?>
Lenguajes Interpretados en el Servidor
7
Guía # 4: Funciones en PHP
El resultado es:
Funciones incorporadas de PHP
PHP proporciona un gran número de funciones incorporadas, que
ya están listas para su utilización inmediata. Lo único que debe
hacerse es invocarlas, para lo que necesitará conocer su sintaxis, los
argumentos que se requieren para hacer la llamada a la función y el
tipo de valor que devuelve para asignarlo a alguna variable u
operar con el resultado en el punto de llamada a la función dentro
del script principal.
Entre los tipos de funciones más utilizados están:
 Funciones para manejo de caracteres.
En PHP existen funciones que permiten trabajar con cadenas de caracteres que podemos dividir en varias
subcategorías. Por ejemplo, funciones para limpiar espacios en blanco, como trim(), ltrim(), rtrim() o
chop(), funciones para cambiar de mayúsculas a minúsculas y viceversa, como strtolower() y strtoupper(),
funciones para obtener partes de una cadena o un indicador de posición de coincidencia de una subcadena
dentro de otra cadena; es decir obtener subcadenas de una cadena más larga, como substr(), strpos(),
strstr(), explode(), etc.
 Funciones de búsqueda, reemplazo y comparación en cadenas.
Estas funciones permiten realizar búsqueda de una cadena dentro de otra más larga, reemplazar ciertos
caracteres de una cadena por otros o comparar una cadena con otra, como htmlentities(), substr_replace(),
str_ireplace(), strcmp(), strncmp(), strcasecmp(), etc.
 Funciones de fecha y hora.
Estas funciones permiten trabajar con fechas en PHP, ya sea para obtener algo conocido como la marca de
tiempo de la era UNIX o para mostrar datos específicos de una fecha y hora, como el día, el mes, el año, la
hora, los minutos y hasta los segundos. Las funciones de fecha de PHP son, entre otras: time(), mktime(),
date(), checkdate(), date_default_timezone_get(), date_default_timezone_set(), etc.
 Funciones para manejo de archivos y directorios.
Otro conjunto de funciones útiles, en este caso para el manejo de archivos, son las funciones: fopen(),
fread(), fwrite(), feof(), fgetc(), fgets(), fputs(), fseek(), rewind(), ftell(), fclose(), etc.
 Funciones para manejo de expresiones regulares.
También existen algunas funciones de PHP relacionadas con el manejo de expresiones regulares. Entre
estas se pueden mencionar: preg_match(), preg_match_all(), preg_replace(), preg_split(), etc.
 Funciones para trabajo con bases de datos.
Las funciones para trabajar con bases de datos en PHP son diversas, dependiendo del tipo de gestor de
bases de datos con el que se desea conectar. Es así que PHP proporciona un amplio número de funciones
para trabajar con bases de datos MySQL, PostgreSQL, MSSQL e incluso Oracle, entre otras. En el caso de
MySQL se puede trabajar usando las extensiones de MySQLi que son las más recomendadas por su
rapidez
como
mysqli_connect(),
mysqli_query(),
mysqli_fetch_array(),
mysqli_fetch_assoc(),
mysqli_fetch_object, mysqli_errno(), etc.
Lenguajes Interpretados en el Servidor
8
Guía # 4: Funciones en PHP
Modularidad
En PHP es posible hacer uso de la característica de modularidad utilizando las sentencias include() o require()
para implementar la reutilización del código definido en archivos con código PHP. La sintaxis de estas
sentencias son las siguientes:
include('nombre_de_archivo');
----------------------------require('nombre_de_archivo');
NOTA: Los paréntesis son opcionales. Si no se incluyen debe dejar espacio entre la palabra reservada include|require
y el delimitador de cadena, que puede ser comilla simple o doble.
En la sintaxis anterior ‘nombre_de_archivo’ es el nombre del archivo que se desea incluir o evaluar dentro del script
que utiliza esta sentencia.
Las instrucciones include() y require() son prácticamente idénticas, lo único que las diferencia es la forma en
que procesan los errores; es decir, mientras que include() devuelve una advertencia (warning) cuando se
produce un fallo por no encontrar el archivo que se pretende incluir, require() devolverá un error fatal al
producirse el mismo problema.
Existen dos variantes de estas funciones que se denominan include_once() y require_once(), respectivamente.
Lo que las diferencia de las anteriores es que evitan un posible conflicto en caso de intentar incluir varias
veces el mismo archivo.
Un de las aplicaciones más útiles de estas funciones o de sus variantes es proporcionar modularidad en los
programas o secuencias de comando PHP. También se pueden utilizar para incluir librerías de funciones o
bibliotecas de clase.
A manera de ejemplo concreto, puede imaginar una página que se divide en varias secciones lógicas, que
luego son invocadas por un script principal que invoca a todas las partes para armar toda la página. Observe
la imagen:
La modularidad permite que se pueda dividir un script en scripts más pequeños y manejables que permitan
realizar modificaciones de forma más rápida y ordenada; es decir, si en algún momento debe hacerse un
cambio importante en un sitio creado con PHP, la modularidad permitiría modificar lo menos posible los
scripts de la aplicación. Debería ser en la mayoría de los casos un sólo script el que debería de modificarse.
Esto es una enorme ventaja para el programador.
III. MATERIALES Y EQUIPO
Para la realización de la guía de práctica se requerirá lo siguiente:
No. Material
1
Guía de práctica #4: Funciones en PHP
Lenguajes Interpretados en el Servidor
9
Cantidad
1
Guía # 4: Funciones en PHP
2
3
Computadora con WampServer, Sublime Text y PHP Designer instalados
Memoria USB o disco flexible
1
1
IV. PROCEDIMIENTO
Indicaciones: Asegúrese de digitar el código de los siguientes ejemplos que se presentan a continuación.
Tenga en cuenta que el PHP Designer no es compilador solamente un editor. Por lo tanto, los errores de
sintaxis los podrá observar únicamente hasta que se ejecute el script cargando la página en el navegador de su
preferencia.
Ejercicio #1: El siguiente ejemplo muestra cómo generar una tabla de multiplicar solicitando el número de
la tabla al usuario a través de un formulario, luego, haciendo uso de una función se obtiene el valor
ingresado y se crea la tabla de multiplicar de ese número. Note que esta función no recibe argumentos ni
retorna valor alguno. Se valida el valor numérico que el usuario ingresa haciendo uso de validación en el
cliente con JavaScript.
Archivo 1: entrada.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Introducción de datos</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/form.css" />
<link
href='http://fonts.googleapis.com/css?family=Days+One'
rel='stylesheet'
type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>
<body>
<header id="D3">
<h1>Ejemplo de uso de Función</h1>
</header>
<section>
<article>
<form method="POST" action="tabla.php" name="frmingreso" id="frmingreso" class="elegantaero">
<h1>
Cálculo del
<span>factorial de un número</span>
</h1>
<ul>
<li class="campo">
<label for="txtnumero">Número: </label>
<input
type="text"
name="txtnumero"
id="txtnumero"
maxlength="3"
placeholder="(Ingrese un número entero)" pattern="[0-9]{1,3}" required="required" /><br />
<span id="numbersOnly">Ingrese números enteros</span>
</li>
<li class="campo">
<input type="submit" name="enviar" value="Mostrar" class="button" /> 
<input type="reset" name="limpiar" value="Cancelar" class="button" />
</li>
</ul>
</form>
</article>
</section>
</body>
</html>
Lenguajes Interpretados en el Servidor
10
Guía # 4: Funciones en PHP
Archivo 2: form.css
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
body {
/* Old browsers */
background: #f5f6f6;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3
80%, #f5f6f6 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f5f6f6),
color-stop(21%,#dbdce2),
color-stop(49%,#b8bac6),
color-stop(80%,#dddfe3),
colorstop(100%,#f5f6f6));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3
80%,#f5f6f6 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3
80%,#f5f6f6 100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3
80%,#f5f6f6 100%);
/* W3C */
background:
linear-gradient(135deg,
#f5f6f6
0%,#dbdce2
21%,#b8bac6
49%,#dddfe3
80%,#f5f6f6 100%);
/* IE6-9 fallback on horizontal gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f5f6f6',
endColorstr='#f5f6f6',GradientType=1 );
font-size:15px;
}
#D3 {
background:rgba(115,130,10,.75);
border-bottom:1px solid rgba(215,68,78,.1);
box-shadow: 0px 5px 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,.4);
-moz-box-shadow: 0px 5px 10px rgba(0,0,0,.4);
-0-box-shadow: 0px 5px 10px rgba(0,0,0,.4);
margin-bottom:16px;
margin-top:16px;
text-align:center;
width:100%;
}
#D3 h1 {
font-family:'Days One',sans-serif;
font-size:3.6em;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
Lenguajes Interpretados en el Servidor
11
Guía # 4: Funciones en PHP
0
0
0
0
3px 5px rgba(0,0,0,.2),
5px 10px rgba(0,0,0,.25),
10px 10px rgba(0,0,0,.2),
20px 20px rgba(0,0,0,.15);
}
/* Estilo del formulario Elegant Aero */
.elegant-aero {
/* Old browsers */
background: #aebcbf;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #aebcbf 0%, #555a5b 50%, #686870 51%, #6e7774
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf),
color-stop(50%,#555a5b), color-stop(51%,#686870), color-stop(100%,#6e7774));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* W3C */
background: linear-gradient(135deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774 100%);
/* IE6-9 fallback on horizontal gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#aebcbf',
endColorstr='#6e7774',GradientType=1 );
margin-left:auto;
margin-right:auto;
max-width: 500px;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
}
.elegant-aero h1 {
font: 2.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 10px 10px 10px 20px;
display: block;
/* Old browsers */
background: #ffb76b;
/* FF3.6+ */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b),
color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
/* W3C */
background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04
100%);
/* IE6-9 */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffb76b',
endColorstr='#ff7f04',GradientType=0 );
Lenguajes Interpretados en el Servidor
12
Guía # 4: Funciones en PHP
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
.elegant-aero h1>span {
display: block;
font-size: 0.5em;
}
.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
width: 20%;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero
textarea, .elegant-aero select {
box-shadow: inset 0px 1px 6px #ECF3F5;
color: #888;
border: 1px solid #C5E2FF;
background: #FBFBFB;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
outline: 0;
padding: 0px 0px 0px 5px;
width: 70%;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.elegant-aero select {
background: #fbfbfb url('down-arrow.png') no-repeat right;
background: #fbfbfb url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
}
.elegant-aero .button{
Lenguajes Interpretados en el Servidor
13
Guía # 4: Funciones en PHP
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
font-weight: Bold;
padding: 10px 30px 10px 30px;
text-shadow: 1px 1px 1px #5079A3;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
#numbersOnly
{
background:#ff3019;
border:3px groove rgb(50,50,120);
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
-md-border-radius:15px;
border-radius:15px;
color:White;
font:Bold 8pt "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
padding:6px 8px;
visibility:hidden;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:block;
line-height:2.1em;
}
Archivo 3: tabla.css
#tablamulti, #enlace {
margin:0 auto;
width:18%;
}
#enlace
{
font:normal 12pt "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
text-align:center;
}
caption
{
color:rgb(30,30,30);
font:bold 11pt "Lucida Sans",Tahoma,Helvetica,sans-serif;
padding-bottom:6px;
padding-top:6px;
text-align:center;
}
table
{
border:3px groove rgb(111,3,6);
border-collapse:collapse;
Lenguajes Interpretados en el Servidor
14
Guía # 4: Funciones en PHP
}
th
{
background-color:rgb(233,122,155);
border:2px solid rgb(111,5,9);
border-collapse:collapse;
font:bold 12pt "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
text-align:center;
}
td
{
border-collapse:collapse;
border:2px solid rgb(111,5,9);
background-color:rgb(225,225,225);
text-align:center;
font:normal 11pt "Lucida Sans",Tahoma,Helvetica,sans-serif;
}
Archivo 4: tabla.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tablas de multiplicar</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/tabla.css" />
</head>
<body>
<section>
<article>
<?php
function escribir_tabla(){
$num = (isset($_POST['txtnumero']) && is_int(intval($_POST['txtnumero']))) ?
$_POST['txtnumero'] : 0;
if($num != 0){
echo "<div id=\"tablamulti\">\n";
echo "<table>\n";
echo "\t<caption>Tabla del $num</caption>\n";
echo "\t<thead>\n\t\t<tr>\n\t\t\t<th colspan=\"3\">\n";
echo "\t\t\t\tTabla del número $num\n";
echo "\t\t\t\n</th>\t\t\n</tr>\t</thead>\n";
echo "\t<tbody>\n";
for($i=1; $i<=20; $i++){
echo "\t\t<tr>\n";
echo "\t\t\t<td>\n\t\t\t\t", $num, " * ", $i, "\t\t\t</td>\n";
echo "\t\t\t<td>\n\t\t\t\t = \t\t\t</td>\n";
echo "\t\t\t<td>\n\t\t\t\t", $num*$i, "\t\t\t</td>\n";
echo "\t\t</tr>\n";
}
echo "\t</tbody>\n";
echo "</table>\n";
echo "</div>\n";
}
else{
die(
"<p class=\"error\">El valor ingresado debe ser un número entero mayor que
cero.</p>\n
<div id=\"enlace\">\t\n<a href=\"entrada.html\">Regresar</a>\n</div>\n"
);
}
}
escribir_tabla();
echo "<div id=\"enlace\">\t\n<a href=\"entrada.html\">Regresar</a>\n</div>\n";
Lenguajes Interpretados en el Servidor
15
Guía # 4: Funciones en PHP
?>
</article>
</section>
</body>
</html>
Archivo 5: validar.js
(function(){
//Agregar al manejador de evento load la función init())
if (window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
// Buscar en el documento todos los elementos INPUT de tipo texto, ya que
// solamente en ellos se va a registrar un controlador de evento.
function init(){
var inputtag = document.getElementById("txtnumero");
// Hacer un recorrido por todos los campos del formulario
if (inputtag.addEventListener){
inputtag.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la función de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
inputtag.onkeypress = filter;
}
}
// Este es el controlador keypress que filtra la entrada del usuario
function filter(event) {
// Obtener el objeto event y el código de carácter de la tecla pulsada
// de forma compatible con todos los navegadores
// Objeto de evento de la tecla
var e = event || window.event;
// tecla que se ha pulsado
var code = e.charCode || e.keyCode;
//
//
if
//
if
//
if
Si se ha pulsado una tecla de función de cualquier tipo, no filtrarla
Tecla de función (solo para Firefox)
(e.charCode == 0) return true;
Se mantienen presionadas Ctrl o Alt
(e.ctrlKey || e.altKey) return true;
Carácter de Ctrl en tabla ASCII
(code < 32) return true;
// Dejar pasar teclas de retroceso (BackSpace), tabulación (Tab), entrada (Enter),
// escape (Scape) y espacios en blanco (SpaceBar)
if (code==0 || code==8 || code==9 || code==13 || code==27 || code==32) return
true;
// Buscar la información de los caracteres válidos para este campo de entrada
// Caracteres válidos
var allowed = "0123456789";
// Mensaja a ocultar/mostrar
var messageElement = document.getElementById("numbersOnly");
// Convertir el código de carácter a su carácter correspondiente
var c = String.fromCharCode(code);
// Comprobar si el carácter está dentro del conjunto de caracteres permitidos
if (allowed.indexOf(c) != -1) {
// Si c es un carácter legal, ocultar el mensaje, si es que existe.
Lenguajes Interpretados en el Servidor
16
Guía # 4: Funciones en PHP
if (messageElement) messageElement.style.visibility = "hidden";
return true; // Aceptar el carácter
}
else {
// Si c no está en el conjunto de caracteres permitidos, mostrar el mensaje
if (messageElement) messageElement.style.visibility = "visible";
// Y rechazar este evento keypress
if (e.preventDefault) e.preventDefault();
if (e.returnValue) e.returnValue = false;
return false;
}
}
})();
El resultado visible en su navegador deber lucir así:
Lenguajes Interpretados en el Servidor
17
Guía # 4: Funciones en PHP
Ejercicio #2: El siguiente ejemplo muestra cómo generar la serie de Fibonacci solicitando al usuario el
número de términos de la serie generada. Este dato es validado en el cliente y en el servidor.
Archivo 1: fibonacci.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Serie de Fibonacci</title>
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/form.css" />
<link rel="stylesheet" href="css/niko.css" />
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
</head>
<body>
<header id="vintage">
<h1>Serie de Fibonacci con recursividad</h1>
</header>
<section>
<article>
<?php
//Función de Fibonacci recursiva
function fibonacci($n){
if(($n == 0) || ($n == 1)) return $n;
return fibonacci($n - 2) + fibonacci($n - 1);
}
if(isset($_GET['enviar'])):
//Verificando el correcto ingreso de los datos
$numero1 = isset($_GET['txtnumero']) ? $_GET['txtnumero'] : -1;
if($numero1 == -1):
$backlink = "\t<p>El valor del campo no es válido</p>\n";
$backlink
.=
"\t<a
class=\"a-btn\"
href=\"{$_SERVER['PHP_SELF']}\"
title=\"Regresar\">\n";
$backlink .= "\t\t<span class=\"a-btn-symbol\">J</span>\n";
$backlink .= "\t\t<span class=\"a-btn-text\">Ingresar dato</span>\n";
$backlink .= "\t\t<span class=\"a-btn-slide-text\">nuevamente</span>\n";
$backlink .= "\t</a>\n";
echo $backlink;
exit(0);
endif;
$tabla = "<table>\n";
$tabla .= "<caption>Generando serie de Fibonacci</caption>\n";
$tabla .= "<thead>\n\t";
$tabla .= "<tr>\n\t\t<th scope=\"col\">\n\t\t\tSecuencia\n\t\t</th>\n\t\t";
$tabla .= "<th scope=\"col\">\n\t\t\tValor\n\t\t</th>\n";
$tabla .= "<thead>\n";
$tabla .= "<tbody>\n\t";
$i = 0;
while($i <= $numero1){
$class = $i%2 == 0 ? "odd" : "even";
$tabla .= "<tr class=\"$class\">\n\t\t<td>\n\t\t\tF<sub>$i</sub>\n\t\t</td>\n";
$tabla .= "\n\t\t<td>\n\t\t\t" . fibonacci($i) . "\n\t\t</td>\n</tr>\n";
$i++;
}
$tabla .= "<tbody>\n</table>\n";
echo $tabla;
echo "<br />\n<a href=\"{$_SERVER['PHP_SELF']}\" title=\"Regresar\" class=\"abtn\">";
echo "\t\t<span class=\"a-btn-symbol\">J</span>\n";
echo "\t\t<span class=\"a-btn-text\">Ingresar</span>\n";
echo "\t\t<span class=\"a-btn-slide-text\">nuevos datos</span></a>";
else:
Lenguajes Interpretados en el Servidor
18
Guía # 4: Funciones en PHP
?>
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="GET" class="elegant-aero">
<fieldset>
<h1>
Serie de
<span>Fibonacci</span>
</h1>
<ul>
<li class="campo">
<label for="numero1">Valores para serie: </label>
<input type="text" name="txtnumero" id="txtnumero" size="4" maxlength="3"
pattern="[0-9]{1,3}" required />
<span id="numbersOnly">Ingrese números</span>
</li>
<li class="campo">
<input type="submit" name="enviar" value="Generar" class="button" /> 
<input type="reset" name="limpiar" value="Cancelar" class="button" />
</li>
</ul>
</fieldset>
</form>
<?php endif; ?>
</article>
</section>
</body>
</html>
Archivo 2: fonts.css
@font-face {
font-family: 'LeagueGothic';
src: url('../fonts/League_Gothic.eot');
src: url('../fonts/League_Gothic.eot?#iefix') format('embedded-opentype'),
url('../fonts/League_Gothic.woff') format('woff'),
url('../fonts/League_Gothic.ttf') format('truetype'),
url('../fonts/League_Gothic.svg#LeagueGothic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'WebSymbolsRegular';
src: url('../fonts/websymbols-regular-webfont.eot');
src:
url('../fonts/websymbols-regular-webfont.eot?#iefix')
format('embeddedopentype'),
url('../fonts/websymbols-regular-webfont.woff') format('woff'),
url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Archivo 3: form.css
/* Estilo del formulario Elegant Aero */
.elegant-aero {
/* Old browsers */
background: #aebcbf;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #aebcbf 0%, #555a5b 50%, #686870 51%, #6e7774
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf),
color-stop(50%,#555a5b), color-stop(51%,#686870), color-stop(100%,#6e7774));
Lenguajes Interpretados en el Servidor
19
Guía # 4: Funciones en PHP
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774
100%);
/* W3C */
background: linear-gradient(135deg, #aebcbf 0%,#555a5b 50%,#686870 51%,#6e7774 100%);
/* IE6-9 fallback on horizontal gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#aebcbf',
endColorstr='#6e7774',GradientType=1 );
margin-left:auto;
margin-right:auto;
max-width: 500px;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
}
.elegant-aero h1 {
font: 2.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 10px 10px 10px 20px;
display: block;
/* Old browsers */
background: #ffb76b;
/* FF3.6+ */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b),
color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);
/* W3C */
background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04
100%);
/* IE6-9 */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffb76b',
endColorstr='#ff7f04',GradientType=0 );
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
.elegant-aero h1>span {
display: block;
font-size: 0.5em;
}
.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
Lenguajes Interpretados en el Servidor
20
Guía # 4: Funciones en PHP
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
width: 20%;
}
.elegant-aero
input[type="text"],
.elegant-aero
input[type="email"],
textarea, .elegant-aero select {
box-shadow: inset 0px 1px 6px #ECF3F5;
color: #888;
border: 1px solid #C5E2FF;
background: #FBFBFB;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
outline: 0;
padding: 0px 0px 0px 5px;
width: 70%;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.elegant-aero select {
background: #fbfbfb url('down-arrow.png') no-repeat right;
background: #fbfbfb url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
}
.elegant-aero .button{
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
font-weight: Bold;
padding: 10px 30px 10px 30px;
text-shadow: 1px 1px 1px #5079A3;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
#numbersOnly
{
Lenguajes Interpretados en el Servidor
21
.elegant-aero
Guía # 4: Funciones en PHP
background:#ff3019;
border:3px groove rgb(50,50,120);
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
-md-border-radius:15px;
border-radius:15px;
color:White;
font:Bold 8pt "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
padding:6px 8px;
visibility:hidden;
}
ul
{
list-style-type: none;
margin: 10px;
padding: 0;
}
li
{
display: block;
line-height: 2em;
}
Archivo 4: niko.css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
}
#vintage h1 {
text-align: center;
margin: 15px auto;
font-family: "LeagueGothic",sans-serif;
font-size: 4em;
text-transform: uppercase;
color: Olive;
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}
table {
border-collapse: collapse;
font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin: 0 auto;
width:24%;
}
caption {
font-size: 400%;
text-indent: -10000px;
}
thead tr {
Lenguajes Interpretados en el Servidor
22
Guía # 4: Funciones en PHP
/* Old browsers */
background: #9dd53a;
/* FF3.6+ */
background: -moz-linear-gradient(45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#9dd53a),
color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a
100%);
/* IE10+ */
background: -ms-linear-gradient(45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a
100%);
/* W3C */
background: linear-gradient(45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
/* IE6-9 fallback on horizontal gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=1 );
border-top: 1px solid black;
border-bottom: 1px solid black;
}
tfoot tr {
background-color: #FFFFFF;
}
thead th {
padding: 0.5em;
white-space: nowrap;
}
tfoot th {
font-size: 110%;
text-align: right;
padding-right: 0.5em;
letter-spacing: 1px;
background:
}
tfoot td {
padding-left: 0.5em;
color: red;
font-size: 110%;
font-weight: 600;
}
tfoot td:hover {
background-color: red;
color: white;
}
tr {
background-color: #EAFDFF;
}
tr.odd {
background-color: #E4EDC9;
}
Lenguajes Interpretados en el Servidor
23
Guía # 4: Funciones en PHP
tbody tr:hover {
background-color: #AAFF99;
}
td, th {
border: 1px dotted #CCCCCC;
}
tbody td {
padding: 0.5em;
text-align: center;
}
td a:link, th a:link {
color: black;
}
td a:visited, th a:visited {
color: black;
text-decoration: line-through;
}
td a:hover, th a:hover {
color: purple;
text-decoration: underline;
}
td:last-child a:hover {
color: red;
text-decoration: underline overline;
}
/* Estilos para los enlaces */
a {
text-decoration: none;
}
.a-btn{
background:#9cedef;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#b7f2f4,0),colorstop(#7ce7ea,1));
background:-webkit-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%);
background:-moz-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%);
background:-o-linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%);
background:linear-gradient(top, #b7f2f4 0%, #7ce7ea 100%);
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr='#b7f2f4',
endColorstr='#7ce7ea',GradientType=0 );
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:10px 30px 10px 70px;
position:relative;
float:left;
display:block;
left:43%;
margin:12px auto;
overflow:hidden;
border:1px solid #90c6c8;
border-color:#90c6c8 #78bdc0 #65b6ba;
-webkit-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0
rgba(255,255,255,0.8);
-moz-box-shadow:0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0
rgba(255,255,255,0.8);
Lenguajes Interpretados en el Servidor
24
Guía # 4: Funciones en PHP
box-shadow:0px -5px 0px 0px #458a8c,
rgba(255,255,255,0.8);
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
0
1px
.a-btn-symbol{
font-family:'WebSymbolsRegular', cursive;
color:#437b7d;
text-shadow:0 1px 0 #bef3f5;
font-size:20px;
position:absolute;
left:20px;
width:20px;
text-align:center;
line-height:32px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn-text{
font-size:20px;
color:#437b7d;
text-shadow:0 1px 0 #bef3f5;
line-height:16px;
font-weight:bold;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
display:block;
}
.a-btn-slide-text{
font-family:Arial, sans-serif;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
color:#555;
text-shadow:0px 1px 1px rgba(255,255,255,0.9);
}
.a-btn:hover{
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
-ms-transform:scale(1.05);
-o-transform:scale(1.05);
transform:scale(1.05);
}
.a-btn:hover .a-btn-symbol{
opacity:0.5;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.a-btn:active{
-webkit-transform:scale(0.95);
-moz-transform:scale(0.95);
Lenguajes Interpretados en el Servidor
25
1px
#d5d5d5,
inset
0
1px
0
Guía # 4: Funciones en PHP
-ms-transform:scale(0.95);
-o-transform:scale(0.95);
transform:scale(0.95);
-webkit-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px
rgba(255,255,255,0.8), 0px 1px 1px 2px #fff;
-moz-box-shadow:0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px
rgba(255,255,255,0.8), 0px 1px 1px 2px #fff;
box-shadow:0px
0px
0px
1px
#458a8c,
0
1px
1px
#d5d5d5,
inset
0
1px
rgba(255,255,255,0.8), 0px 1px 1px 2px #fff;
}
0
0
0
Archivo 5: validar.js (el mismo script del Ejercicio #6).
Resultado de la ejecución en el navegador:
Ejercicio #3: En este ejemplo se ilustra cómo utilizar la característica de funciones variables que se pueden
emplear en PHP. Se tiene una matriz con distintos valores de monedas que se desean convertir a cinco
tipos de monedas diferentes.
Lenguajes Interpretados en el Servidor
26
Guía # 4: Funciones en PHP
Archivo 1: monedas.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Convertir entre monedas</title>
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/monedas.css" />
</head>
<body>
<header id="boardgame">
<h1>Equivalencias entre monedas</h1><hr>
</header>
<?php
$conversion = array("aDolares","aQuetzal","aLempira","aCordova","aColon");
$precios = array(500,750,1000,1500,3000,7500,12000);
//Funciones para usar como funciones variables
//y hacer la tabla de llamadas que permitirá
//invocar a las funciones del array con retrollamadas
function aDolares($dato){
return sprintf("%02.2f", $dato*0.11425);
}
function aQuetzal($dato){
return sprintf("%02.2f", $dato*0.87214);
}
function aLempira($dato){
return sprintf("%02.2f", $dato*2.14132);
}
function aCordova($dato){
return sprintf("%02.2f", $dato*2.60470);
}
function aColon($dato){
return sprintf("%02.2f", $dato*58.1205);
}
?>
<section>
<article>
<table class="column-options">
<thead>
<tr>
<th>Colones (sv)</th>
<th>Dólares (sv)</th>
<th>Quetzales (gt)</th>
<th>Lempiras (ho)</th>
<th>Córdovas (ni)</th>
<th>Colones (cr)</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<sizeof($precios);$i++){
if($i%2 == 0){
echo "\t<tr>\n";
}
else{
echo "\t<tr class=\"odd\">\n";
}
echo "\t\t<td>\t\t¢ " . $precios[$i] . "\t\t</td>\n\t\t";
for($j=0; $j<sizeof($conversion); $j++):
$resultado = $conversion[$j];
switch($resultado):
case "aDolares":
$signo = "$";
Lenguajes Interpretados en el Servidor
27
Guía # 4: Funciones en PHP
break;
case "aQuetzal":
$signo = "Q";
break;
case "aLempira":
$signo = "L$";
break;
case "aCordova":
$signo = "C$";
break;
case "aColon":
$signo = "¢";
break;
endswitch;
echo "<td>\t\t$signo " .
"\t\t</td>\n\t";
endfor;
echo "\t</tr>\n";
}
?>
</table>
</article>
</section>
</body>
</html>
number_format($resultado($precios[$i]),3,".",",")
Archivo 2: fonts.css
@font-face {
font-family: 'LeagueGothic';
src: url('../fonts/League_Gothic.eot');
src: url('../fonts/League_Gothic.eot?#iefix') format('embedded-opentype'),
url('../fonts/League_Gothic.woff') format('woff'),
url('../fonts/League_Gothic.ttf') format('truetype'),
url('../fonts/League_Gothic.svg#LeagueGothic') format('svg');
font-weight: normal;
font-style: normal;
}
Archivo 3: monedas.css
*
{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body
{
font-size: 16px;
background-image: url(../img/coins.jpg);
background-position: fixed;
background-repeat: repeat;
}
article
{
left: 50%;
margin-left: -31%;
position: relative;
width: 62%;
}
Lenguajes Interpretados en el Servidor
28
.
Guía # 4: Funciones en PHP
#boardgame h1 {
color: #fff;
font-family: "LeagueGothic",sans-serif;
font-size: 4em;
margin: 30px auto;
text-align: center;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px
0 #5ac7ff;
text-transform: uppercase;
}
/* Estilos para la tabla */
.column-options {
border-collapse: collapse;
border-bottom: 1px solid #d6d6d6;
}
.column-options th, .column-options td {
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
color: #434343;
background-color: #f7f7f7;
border-left:1px solid #ffffff;
border-right:1px solid #dcdcdc;
}
.column-options th {
font-size: 140%;
font-weight: normal;
letter-spacing: 0.12em;
text-shadow: -1px -1px 1px #999;
color: #fff;
background-color: #0cb08b;
padding: 12px 0px 8px 0px;
border-bottom: 1px solid #d6d6d6;
}
.column-options td {
text-shadow:1px 1px 0 #fff;
padding:12px 14px 12px 14px;
text-align:center;
}
.column-options .odd td {
background-color: #ededed;
}
.column-options th:first-child {
border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
}
.column-options th:last-child {
border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
}
.column-options th:last-child, .column-options td:last-child {
border-right: 0px;
}
.column-options a.button {
font-size: 70%;
Lenguajes Interpretados en el Servidor
29
Guía # 4: Funciones en PHP
text-shadow: none;
text-decoration: none;
text-align:center;
text-shadow: -1px -1px 1px #72aebd;
text-transform:uppercase;
letter-spacing: 0.10em;
color:#fff;
padding: 7px 10px 4px 10px;
border-radius: 5px;
background-color:#00CC99;
border-top: 1px solid #90f2da;
border-right:1px solid #00a97f;
border-bottom:1px solid #008765;
border-left: 1px solid #7dd2bd;
box-shadow: 2px 1px 2px #ccc;
margin:10px 5px 10px 5px;
display:block;
}
.column-options a.button:hover {
position:relative;
top:1px;
left:1px;
background-color:#00CCFF;
border-top: 1px solid #9aebff;
border-right:1px solid #08acd5;
border-bottom:1px solid #07a1c8;
border-left: 1px solid #92def1;
box-shadow: -1px -1px 2px #ccc;
}
El resultado visible en el navegador sería:
Ejercicio #4: El siguiente ejemplo implementa funciones con lista variable de argumentos para obtener el
mayor de una lista de números. Los números son proporcionados directamente en el script PHP.
Archivo 1: elmayor.php
<!DOCTYPE html>
<html lang="es">
Lenguajes Interpretados en el Servidor
30
Guía # 4: Funciones en PHP
<head>
<meta charset="utf-8" />
<title>Trabajando con funciones de lista variable de argumentos</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald" />
<link rel="stylesheet" href="css/elmayor.css" />
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<header>
<h1>Mayor de una lista de números</h1>
</header>
<section>
<article id="leftcol">
<?php
function elMayor(){
$num_args = func_num_args();
$args = func_get_args();
//$elmayor = ($dato1 > $dato2) ? $dato1 : $dato2;
$elmayor = $args[0];
for($i=1; $i<$num_args; $i++){
$elmayor = ($elmayor > $args[$i]) ? $elmayor : func_get_arg($i);
}
return $elmayor;
}
echo "El mayor de 58, 167, 242, 85, 31, 109, -26, 81, 16, 126 es: " .
"<h2>" . elMayor(58, 167, 242, 85, 31, 109, -26, 81, 16, 126) . "</h2>";
?>
</article>
<article id="rightcol">
<?php
echo "El mayor de 61, 37, 75, 184, 42, -303, 43, 56, -121, 226, 172, 78, 6, 86 es: " .
"<h2>" . elMayor(61, 37, 75, 184, 42, -303, 43, 56, -121, 226, 172, 78, 6, 86) .
"</h2>";
?>
</article>
<section>
</body>
</html>
Archivo 2: elmayor.css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-size: 16px;
}
body {
font-size: 16px;
margin: 0 auto;
min-width: ;
width: 80%;
}
section {
height: auto;
margin: 24px auto;
min-width: 350px;
width: 86%;
Lenguajes Interpretados en el Servidor
31
Guía # 4: Funciones en PHP
}
#leftcol
{
/* Old browsers */
background: #ff9c3a;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #ff9c3a 0%, #f29b30 50%, #ff7c00 51%, #ff7f04
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff9c3a),
color-stop(50%,#f29b30), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #ff9c3a 0%,#f29b30 50%,#ff7c00 51%,#ff7f04
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #ff9c3a 0%,#f29b30 50%,#ff7c00 51%,#ff7f04
100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #ff9c3a 0%,#f29b30 50%,#ff7c00 51%,#ff7f04
100%);
/* W3C */
background: linear-gradient(135deg, #ff9c3a 0%,#f29b30 50%,#ff7c00 51%,#ff7f04 100%);
/* IE6-9 fallback on horizontal gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ff9c3a',
endColorstr='#ff7f04',GradientType=1 );
border: solid 1px black;
-webkit-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-o-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-ms-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
color: #e6e9e9;
display:inline-block;
margin-left: 16px;
margin-right: 16px;
padding: 24px 18px;
min-width:140px;
height: 400px;
width: 42%;
}
#rightcol
{
/* Old browsers */
background: #bc5ab6;
/* FF3.6+ */
background: -moz-linear-gradient(-45deg, #bc5ab6 0%, #963789 50%, #8e008c 51%, #c1309d
100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#bc5ab6),
color-stop(50%,#963789), color-stop(51%,#8e008c), color-stop(100%,#c1309d));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(-45deg, #bc5ab6 0%,#963789 50%,#8e008c 51%,#c1309d
100%);
/* Opera 11.10+ */
background: -o-linear-gradient(-45deg, #bc5ab6 0%,#963789 50%,#8e008c 51%,#c1309d
100%);
/* IE10+ */
background: -ms-linear-gradient(-45deg, #bc5ab6 0%,#963789 50%,#8e008c 51%,#c1309d
100%);
/* W3C */
background: linear-gradient(135deg, #bc5ab6 0%,#963789 50%,#8e008c 51%,#c1309d 100%);
/* IE6-9 fallback on horizontal gradient */
Lenguajes Interpretados en el Servidor
32
Guía # 4: Funciones en PHP
filter:
progid:DXImageTransform.Microsoft.gradient(
endColorstr='#c1309d',GradientType=1 );
border: solid 1px black;
-webkit-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-o-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
-ms-box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
box-shadow: 12px 12px 12px 0px rgba(0,0,0,0.75);
color: #f0f0f0;
float:left;
margin-left: 16px;
margin-right: 16px;
padding: 24px 18px;
min-width:200px;
height: 400px;
width: 42%;
}
startColorstr='#bc5ab6',
article
{
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
font: 1em "Lucida Sans Unicode",Helvetica,sans-serif;
height: 10em;
min-height: 6em;
width: 40%;
}
body
{
background-image:
background-image:
background-image:
background-image:
85%);
background-image:
background-image:
linear-gradient(bottom, rgb(68,0,243) 18%, rgb(74,50,160) 85%);
-o-linear-gradient(bottom, rgb(68,0,243) 18%, rgb(74,50,160) 85%);
-moz-linear-gradient(bottom, rgb(68,0,243) 18%, rgb(74,50,160) 85%);
-webkit-linear-gradient(bottom, rgb(68,0,243) 18%, rgb(74,50,160)
-ms-linear-gradient(bottom, rgb(68,0,243) 18%, rgb(74,50,160) 85%);
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18,
rgb(68,0,243)),
color-stop(0.85,
rgb(74,50,160))
);
font-size: 15px;
height: 100%;
width: 100%;
}
header h1
{
color: #dcdfdc;
font-family: 'Oswald';
font-size: 3.6em;
text-align: center;
text-shadow: 0px 1px 0px
0px 2px 0px
0px 3px 0px
0px 4px 0px
0px 5px 0px
0px 6px 0px
0px 7px 0px
0px 8px 7px
#999,
#888,
#777,
#666,
#555,
#444,
#333,
#001135;
Lenguajes Interpretados en el Servidor
33
Guía # 4: Funciones en PHP
}
El resultado visualizado en un navegador debería ser el siguiente:
Ejercicio #5: En este ejemplo se ingresan varias edades con validación en el cliente con JavaScript que
permite ingresar solo edades numéricamente correctas. Al enviar los datos ingresados en un cuadro de lista
se calcula en el servidor el promedio de las edades ingresadas y cada una de las edades que se ingresaron.
Archivo 1: edades.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Edades de personas</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Andika" />
<link rel="stylesheet" media="screen" href="css/edades.css" />
<script type="text/javascript" src="js/agregar.js"></script>
<script type="text/javascript" src="js/validatefield.js"></script>
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<section>
<article>
<form name="frmedades" action="promedioedad.php" method="POST">
<fieldset>
<legend><span>Edades de personas:</span></legend>
<ul>
<li>
<label for="edad">Ingreso de edades:</label>
<div class="campo">
<input type="text" name="edad" id="edad" maxlength="60" />
<input type="reset" name="agregar" id="agregar" value="Agregar" /><br />
<span id="numbersOnly">
El campo sólo acepta números.
</span>
</div>
</li>
<li>
<label for="ingresados">Edades ingresadas:</label>
<div class="campo">
<select name="ingresados[]" id="ingresados" size="6"
multiple="multiple"></select>
Lenguajes Interpretados en el Servidor
34
Guía # 4: Funciones en PHP
</div>
</li>
<li>
<div class="campo">
<input type="submit" name="enviar" id="enviar" value="Enviar"
class="boton" />
</div>
</li>
</ul>
</fieldset>
</form>
</body>
</article>
</section>
</html>
Archivo 2: promedioedad.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Productos de la tienda</title>
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/sticky-table.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttledebounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/modernizr.custom.lis.js"></script>
<script src="js/jquery.stickyheader.js"></script>
</head>
<body>
<section>
<article class="component">
<table>
<thead>
<th class="head">Edades ingresadas</th>
</thead>
<tbody>
<?php
if(isset($_POST['enviar'])){
if(isset($_POST['ingresados'])){
calcularedadprom($_POST['ingresados']);
}
else{
$msgerr = "No hay edades que procesar.";
$edades = array($msgerr);
calcularedadprom($edades);
}
}
// Función para calcular el promedio de las edades
function calcularedadprom($edades){
$promedades = 0;
$contador = 0;
$celdas = "";
if(is_array($edades)){
foreach($edades as $edad){
$celdas .= "\n\t<tr>\n\t\t<td class=\"username\">\n\t\t\t$edad\n\t\t</td>\n\t</tr>\n</tbody>\n";
$promedades += $edad;
$contador++;
}
Lenguajes Interpretados en el Servidor
35
Guía # 4: Funciones en PHP
$promedades /= $contador;
$promedades = number_format($promedades, 2, ".", ",");
$celdas .= "<tfoot>\n";
$celdas .= "<tr>\n\t\t<th>\n\t\t\tLa edad promedio es:
$promedades\n\t\t</th>\n\t</tr>\n";
$celdas .= "</tfoot>\n";
echo $celdas;
}
else{
$celdas .= "\n\t<tr>\n\t\t<td class=\"username\">\n\t\t\t$edades\n\t\t</td>\n\t</tr>\n</tbody>\n";
echo $celdas;
}
}
?>
</table>
</article>
<!-- Librerías de jQuery para hacer el efecto stycky-headers -->
<script src="js/jquery.stickyheader.js"></script>
</section>
</body>
</html>
Archivo 3: fonts.css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons.eot');
src:url('../fonts/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons.woff') format('woff'),
url('../fonts/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}
Archivo 4: edades.css
*
{
border:0;
padding:0;
}
html, body {
height: 100%;
}
body {
font-size: 15px;
}
#numbersOnly
{
background-color:Red;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
color:Gold;
font:Bold 0.9em Arial,Helvetica,sans-serif;
display:block;
opacity:0.8;
padding:4px 5px;
Lenguajes Interpretados en el Servidor
36
Guía # 4: Funciones en PHP
visibility:hidden;
}
fieldset
{
background-color:rgb(190,220,230);
border:6px ridge rgb(50,100,150);
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
border-radius:15px;
left:-23%;
margin-left:50%;
padding:16px 18px;
position:relative;
width:46%;
}
legend span
{
display:block;
border:3px ridge rgb(50,100,150);
background-color:rgb(20,20,100);
font:bold 1em "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
color:rgb(225,250,250);
padding:2px 5px;
}
label
{
font:normal 1em "Arial Rounded MT Bold","Century Gothic",Helvetica,sans-serif;
color:rgb(30,60,100);
display:block;
float:left;
width:30%;
text-align:right;
padding-top:0.6em;
padding-bottom:0.6em;
}
.campo
{
display:block;
float:right;
font:Normal 0.9em "Century Gothic","Arial Rounded MT Bold",Helvetica,sans-serif;
position:relative;
width:68%;
}
input[type="text"] {
color: Navy;
font: Normal 1em 'Oswald',Arial,Helvetica,'Liberation Sans';
line-height: 1.4em;
height: 1.4em;
width: 40%;
}
select {
color: Navy;
font: Normal 1em 'Oswald',Arial,Helvetica,'Liberation Sans';
line-height: 1.4em;
width:44%;
}
input#agregar {
/* Estilo de borde del botón */
Lenguajes Interpretados en el Servidor
37
Guía # 4: Funciones en PHP
border:2px groove #7c93ba;
/* Forzar el cambio de tipo de cursor al posicionar
el puntero del ratón encima del botón */
cursor:pointer;
/* Agregar relleno al contenido del botón */
padding: 5px 25px;
/* Dar efecto de gradiente al color de fondo del botón */
/* Para navegadores antiguos que no soporten gradiente
colocar un color sólido */
background-color:#6b6dbb;
background: -webkit-gradient(linear, left top, left bottom, from(#88add7),
to(#6b6dbb));
background: -webkit-linear-gradient(top, #88add7, #6b6dbb);
background: -moz-linear-gradient(top, #88add7, #6b6dbb);
background: -o-linear-gradient(top, #88add7, #6b6dbb);
background: linear-gradient(top, #88add7, #6b6dbb);
/* Estilo del texto del botón */
font-family:Oswald, Arial, sans-serif;
color:#fff;
font-size:1.1em;
letter-spacing:.1em;
font-variant:small-caps;
/* Definir bordes redondeados en las esquinas de la derecha */
-webkit-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-o-border-radius: 0 15px 15px 0;
-ms-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
/* Añadir un tanto de sombra al botón */
-webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
-moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
-o-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
-ms-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
input#agregar:hover,
input#agregar:focus {
color:#edebda;
/* Reducir tamaño de la sombra para para producir efecto de botón presionado */
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-ms-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}
.boton
{
/* Colocar relleno al contenido del botón */
padding: 4px 20px;
/* Poner efecto de gradiente para el color de fondo del botón */
/* Para navegadores antiguos que no soportan gradientes colocar un color sólido */
background:#ffae00;
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:2px outset #dad9d8;
/* Estilos para el texto */
font-family:Andika, Arial, sans-serif;
font-size:1.1em;
letter-spacing:0.05em;
color:#fff;
Lenguajes Interpretados en el Servidor
38
Guía # 4: Funciones en PHP
text-shadow: 0px 1px 10px #000;
/* Agregar el efecto de esquinas redondeadas para los bordes del botón */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
/* Agregar efecto de sombra al botón */
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-o-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-ms-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
}
.boton:hover,
.boton:focus {
border:2px solid #dad9d8;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
line-height:2.1em;
display:block;
}
Archivo 5: sticky-table.css
.component {
line-height: 1.5em;
margin: 0 auto;
padding: 0.5em 0 0.6em;
max-width: 1000px;
overflow: hidden;
width: 24%;
}
.component .filler {
font-family: 'Lato',Arial,Helvetica,'Liberation Sans';
color: #d3d3d3;
}
table {
background: #fff;
border-collapse: collapse;
font-family: 'Lato',Arial,Helvetica,'Liberation Sans';
margin: 0 auto;
margin-bottom: 3em;
width: 80%;
}
td, th {
padding: 0.65em 1em;
text-align: center;
}
td.err {
background-color: #e992b9;
Lenguajes Interpretados en el Servidor
39
Guía # 4: Funciones en PHP
color: #fff;
font-size: 0.75em;
line-height: 1;
text-align: center;
}
th {
background-color: #3c88b6;
font-family: 'Lato';
font-weight: bold;
color: #fff;
white-space: nowrap;
}
tbody th {
background-color: #2ea879;
Lato
}
tbody tr:nth-child(2n-1) {
background-color: #d6cdad;
transition: all .125s ease-in-out;
}
tbody tr:hover {
background-color: rgba(125,110,90,.3);
}
/* For appearance */
.sticky-wrap {
overflow-x: auto;
overflow-y: hidden;
position: relative;
margin: 1.2em 0;
width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .125s ease-in-out;
z-index: 50;
/* Previene que se estire la tabla a tamaño completo */
width: auto;
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
width: 100%; /* Force stretch */
z-index: 100;
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
Lenguajes Interpretados en el Servidor
40
Guía # 4: Funciones en PHP
}
.sticky-wrap td,
.sticky-wrap th {
box-sizing: border-box;
}
Archivo 6: agregar.js
function addEvent(obj, evType, fn){
if(obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else{
return false;
}
}
function initForms(){
document.getElementById("agregar").onclick = function(){
addProducts(document.frmedades.ingresados, document.frmedades.edad.value);
}
document.getElementById("enviar").onclick = function(){
var contador = 0;
for(var i=0; i<document.frmedades.ingresados.options.length; i++){
if(document.frmedades.ingresados.options[i].selected){
contador++;
}
}
if(contador == 0){
alert("No se han seleccionado elementos.");
return false;
}
}
}
function addProducts(optionMenu, value){
var posicion = optionMenu.length;
optionMenu[posicion] = new Option(value, value);
}
addEvent(window, 'load', initForms);
Archivo 7: validatefield.js
function init(){
var inputtag = document.getElementById("edad");
(inputtag.addEventListener) ? inputtag.addEventListener("keypress", numbersOnly,
false) : inputtag.onkeypress = numbersOnly;
}
// Este es el controlador keypress que filtra la entrada del usuario
function numbersOnly(event) {
// Obtener el objeto event y el código de carácter de la tecla pulsada
// de forma compatible con todos los navegadores
var e = event || window.event;
// Objeto de evento de la tecla
var code = e.charCode || e.keyCode;
// tecla que se ha pulsado
// Si se ha pulsado una tecla de función de cualquier tipo, no filtrarla
Lenguajes Interpretados en el Servidor
41
Guía # 4: Funciones en PHP
if(e.charCode == 0) return true;
// Tecla de función (solo para Firefox)
if(e.ctrlKey || e.altKey) return true; // Se mantienen presionadas Ctrl o Alt
if(code < 32) return true;
// Carácter de Ctrl en tabla ASCII
// Dejar pasar teclas de retroceso (BackSpace), tabulación (Tab), entrada (Enter),
// escape (Scape) y espacios en blanco (SpaceBar)
if(code==0 || code==8 || code==9 || code==13 || code==27 || code==32) return true;
// Buscar la información de los caracteres válidos para este campo de entrada
var allowed = "0123456789";
// Caracteres válidos
var messageElement = document.getElementById("numbersOnly"); // Mensaja a
ocultar/mostrar
// Convertir el código de carácter a su carácter correspondiente
var c = String.fromCharCode(code);
// Comprobar si el carácter está dentro del conjunto de caracteres permitidos
if (allowed.indexOf(c) != -1) {
// Si c es un carácter legal, ocultar el mensaje, si es que existe.
if(messageElement) messageElement.style.visibility = "hidden";
return true; // Aceptar el carácter
}
else {
// Si c no está en el conjunto de caracteres permitidos, mostrar el mensaje
if(messageElement) messageElement.style.visibility = "visible";
// Y rechazar este evento keypress
if(e.preventDefault) e.preventDefault();
if(e.returnValue) e.returnValue = false;
return false;
}
}
addEvent(window, 'load', init);
El resultado que se puede observar al ejecutar el script con cualquier navegador sería el siguiente:
Ejercicio #6: El siguiente ejemplo ilustra cómo manejar el envío de campos de formulario de tipo select y
checkbox cuando en ambos casos se maneja el nombre del campo como una matriz dentro del script PHP.
Se crea una función en script del lado del servidor que procesará los datos seleccionados en ambos tipos de
Lenguajes Interpretados en el Servidor
42
Guía # 4: Funciones en PHP
campos, teniendo en cuenta que en el caso de los datos seleccionados en el campo de formulario de tipo
select se creará una lista desordenada (ol), mientras que en el caso de los checkbox que utilizan el mismo
nombre en todos los campos creados con ciudades, se creará una lista ordenada (ul). En la función se
utilizan dos argumentos, el primero que debe ser la matriz con los datos de la lista y el segundo que indica
el tipo de lista que se quiere crear donde los únicos valores posibles deberían ser: "ul", "ol" .
Archivo 1: selectfields.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Estilo de checkboxes, radios y multi select</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Bitter" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"
/>
<link rel="stylesheet" href="css/jquery.multiselect.css" />
<link rel="stylesheet" href="css/fields.css" />
<script type="text/javascript" src="js/checkFields.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$("#location").multiselect();
});
</script>
</head>
<body>
<header>
<h1 class="inset">Ciudades y destinos de vacación</h1>
</header>
<section>
<article>
<div class="form-style">
<form name="frmdestinos" action="destinos.php" method="POST">
<h1>
Selección de
<span>países y ciudades</span>
</h1>
<select name="location[]" multiple="multiple" size="5" id="location">
<option value="Guatemala">Guatemala</option>
<option value="El Salvador">El Salvador</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Honduras">Honduras</option>
<option value="Panamá">Panamá</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Belice">Belice</option>
</select><br />
<div id="places">
<input type="checkbox" name="place[]" id="place1" value="Ciudad de Guatemala" />
<label for="place1"><span></span>Ciudad de Guatemala</label><br />
<input type="checkbox" name="place[]" id="place2" value="Antigua Guatemala" />
<label for="place2"><span></span>Antigua Guatemala</label><br />
<input type="checkbox" name="place[]" id="place3" value="Panajachel" />
<label for="place3"><span></span>Panajachel</label><br />
<input
type="checkbox"
name="place[]"
id="place4"
value="San
Salvador"
checked="checked" />
<label for="place4"><span></span>San Salvador</label><br />
<input type="checkbox" name="place[]" id="place5" value="Santa Ana" />
Lenguajes Interpretados en el Servidor
43
Guía # 4: Funciones en PHP
<label for="place5"><span></span>Santa Ana</label><br />
<input type="checkbox" name="place[]" id="place6" value="Santa Miguel" />
<label for="place6"><span></span>Santa Miguel</label><br />
<input type="checkbox" name="place[]" id="place7" value="San José" />
<label for="place7"><span></span>San José</label><br />
<input type="checkbox" name="place[]" id="place8" value="Puntarenas" />
<label for="place8"><span></span>Puntarenas</label><br />
<input type="checkbox" name="place[]" id="place9" value="San Pedro Sula" />
<label for="place9"><span></span>San Pedro Sula</label><br />
<input type="checkbox" name="place[]" id="place10" value="Tegucigalpa" />
<label for="place10"><span></span>Tegucigalpa</label><br />
<input type="checkbox" name="place[]" id="place11" value="Granada" />
<label for="place11"><span></span>Granada</label><br />
<input type="checkbox" name="place[]" id="place12" value="Ciudad de Panamá" />
<label for="place12"><span></span>Ciudad de Panamá</label><br />
<input type="checkbox" name="place[]" id="place13" value="Colón" />
<label for="place13"><span></span>Colón</label><br />
<input type="checkbox" name="place[]" id="place14" value="Colón" />
<label for="place14"><span></span>Belmopán</label><br />
</div>
<input type="submit" name="submit" id="enviar" value="Enviar" class="button" />
<input type="reset" name="cancel" value="Cancelar" class="button" />
</form>
</div>
</article>
</section>
</body>
</html>
Archivo 2: destinos.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ciudades de destino</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Bitter" />
<link rel="stylesheet" href="css/fields.css" />
<meta charset="utf-8" />
</head>
<body>
<header>
<h1 class="inset">Ciudades de destino</h1>
</header>
<section>
<div class="form-style">
<?php
//La función espera una matriz con una lista ($lista)
//ya sea de países o ciudades y un parámetro opcional
//con el tipo de lista que tendrá un valor por defecto "ul"
function createList($lista, $tipo="ul"){
//Inicializando variables para ambos tipos de listas HTML
$ullist = "";
$ollist = "";
switch($tipo):
case "ul":
$ullist .= "<article id=\"countries\">\n";
$ullist .= "\t<h1>\n";
$ullist .= "\t\tPaíses y ciudades\n";
$ullist .= "\t\t<span>seleccionadas</span>\n";
$ullist .= "\t</h1>\n";
$ullist .= "\t<ul class=\"imglist\">\n";
foreach($lista as $key => $value):
$ullist .= "\t\t<li><a href=\"javascript:void(0)\">$key =>
Lenguajes Interpretados en el Servidor
44
Guía # 4: Funciones en PHP
$value</a></li>\n";
endforeach;
$ullist .= "\t</ul>\n";
$ullist .= "</article>\n";
print $ullist;
break;
case "ol":
$ollist .= "<article id=\"cities\">\n";
$ollist .= "\t<h1><span>Países</span></h1>\n";
$ollist .= "\t<div class=\"numberlist\">\n";
$ollist .= "\t\t<ol>\n";
foreach($lista as $key => $value):
$ollist
.=
"\t\t\t<li><a
href=\"javascript:void(0)\">$key
$value</a></li>\n";
endforeach;
$ollist .= "\t\t</ol>\n";
$ollist .= "\t</div>\n";
$ollist .= "</article>";
print $ollist;
break;
default:
print "<p>No está definido este tipo de lista</p>";
break;
endswitch;
}
=>
//Inicia el procesamiento del formulario
if(isset($_POST['submit'])):
//Análisis de los elementos de campo select
if(is_array($_POST['location'])):
//Si se tiene una matriz invocar a la función
//createList para crear la lista UL
createList($_POST['location']);
else:
echo "Se esperaba una lista, no un valor escalar.";
exit(0);
endif;
//Análisis de los elementos checkbox
extract($_POST);
if(is_array($place)):
createList($place, "ol");
endif;
else:
print "<p>El procesamiento del formulario requiere que se haya presionado el botón
Enviar.</p>";
print "<a href=\"selectfields.html\">Regresar</a>";
exit(0);
endif;
?>
</div>
</section>
</body>
</html>
Archivo 3: fonts.css
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
Lenguajes Interpretados en el Servidor
45
Guía # 4: Funciones en PHP
url('../fonts/fontawesome-webfont.svg#LeagueGothic') format('svg');
font-weight: normal;
font-style: normal;
}
Archivo 4: fields.css
/* Encabezados clase inset */
header .inset {
color:#238290;
font-family:'Bitter';
font-size:4em;
font-weight:Bold;
text-align:center;
text-shadow:-3px -3px 3px #fff,
0 0 1px #888,
3px 3px 3px #000;
opacity:0.5;
}
/* Contenedor del formulario */
.form-style {
width:480px;
padding:24px;
margin:40px auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 20px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style h1 > span{
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
/* Estilo de los checkboxes */
#places {
margin-top: 16px;
margin-bottom: 16px;
}
#places input[type="checkbox"]:not(old),
Lenguajes Interpretados en el Servidor
46
Guía # 4: Funciones en PHP
#places input[type="radio"]:not(old) {
font-size : 1em;
margin
: 0;
opacity
: 0;
padding
: 0;
width
: 2em;
}
#places input[type="checkbox"]:not(old) + label,
#places input[type="radio"]:not(old) + label{
color
: #c77405;
display
: inline-block;
font-family : 'Trebuchet';
font-size
: 1.2em;
line-height : 1.5em;
margin-left : -2em;
}
#places input[type="checkbox"]:not(old) + label > span,
#places input[type="radio"]:not(old) + label > span{
background
: #c77405;
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
border
: 0.0625em solid rgb(192,192,192);
border-radius
: 0.25em;
display
: inline-block;
height
: 0.875em;
margin
: 0.25em 0.5em 0.25em 0.25em;
vertical-align
: bottom;
width
: 0.875em;
}
#places input[type="checkbox"]:not(old):checked + label > span,
#places input[type="radio"]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
#places input[type="checkbox"]:not(old):checked + label > span:before{
color
: #c77405;
content
: '\f00c';
display
: block;
font-family : 'FontAwesome';
font-size
: 0.875em;
font-weight : bold;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
width
: 1em;
}
#places input[type="radio"]:not(old):checked + label > span > span{
background
: rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
Lenguajes Interpretados en el Servidor
47
Guía # 4: Funciones en PHP
background-image
border
border-radius
display
height
margin
width
:
:
:
:
:
:
:
linear-gradient(rgb(179,217,140),rgb(153,204,102));
0.0625em solid rgb(115,153,77);
0.125em;
block;
0.5em;
0.125em;
0.5em;
}
/* Estilo para los botones de formulario */
.button {
border:2px groove #7c93ba;
/* Forces the cursor to change to a hand when the button is hovered */
cursor:pointer;
padding: 5px 25px;
/* Give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more
info */
/* Required for browsers that don't support gradients */
background-color:#6b6dbb;
background: -webkit-gradient(linear, left top, left bottom, from(#88add7),
to(#6b6dbb));
background: -webkit-linear-gradient(top, #88add7, #6b6dbb);
background: -moz-linear-gradient(top, #88add7, #6b6dbb);
background: -o-linear-gradient(top, #88add7, #6b6dbb);
background: linear-gradient(top, #88add7, #6b6dbb);
/* Style to the text inside the button */
/* Andkia is available at http://www.google.com/webfonts/specimen/Andika */
font-family:Andika, Arial, sans-serif;
color:#fff;
font-size:1.1em;
letter-spacing:.1em;
font-variant:small-caps;
/* Give the corners a small curve */
-webkit-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
/* Add a drop shadow to the button */
-webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
-moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
.button:hover, .button:focus {
color:#edebda;
/* Reduce the spread of the shadow to give a pushed effect */
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}
/* Estilos de las listas HTML */
.form-style ul {
margin-bottom: 42px;
}
/* Estilos para listas numeradas con círculos */
.numberlist {
width:480px;
}
.numberlist ol{
counter-reset: li;
list-style: none;
Lenguajes Interpretados en el Servidor
48
Guía # 4: Funciones en PHP
*list-style: decimal;
font: 15px 'Trebuchet MS','Lucida Sans';
padding: 0;
margin-bottom: 4em;
}
.numberlist ol ol{
margin: 0 0 0 2em;
}
.numberlist a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #87ceeb;
color: #fff;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
}
.numberlist a:hover{
background: #cbe7f8;
color: #333;
text-decoration: none;
}
.numberlist a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}
ul.imglist {
font: 15px "Trebuchet MS","Lucida Sans";
line-height: 24px;
/* list-style: outside url("../img/arrow.png") disc; */
list-style: none;
margin-bottom: 42px;
padding: 0px;
}
ul.imglist li {
background-image: url("../img/arrow.png");
background-position: 0 50%;
background-repeat: no-repeat;
Lenguajes Interpretados en el Servidor
49
Guía # 4: Funciones en PHP
color: #FFF;
list-style: none outside none;
padding-left: 32px;
}
ul.imglist li a:hover {
background: #ffac39;
color: #222;
text-decoration: none;
}
ul.imglist a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .4em 0;
background: #fea500;
color: #fff;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
}
Archivo 5: jquery.multiselect.css
.ui-multiselect {
padding:2px 0 2px 4px;
text-align:left;
}
.ui-multiselect span.ui-icon {
float:right;
}
.ui-multiselect-single .ui-multiselect-checkboxes input {
position:absolute !important;
top: auto !important;
left:-9999px;
}
.ui-multiselect-single .ui-multiselect-checkboxes label {
padding:5px !important;
}
.ui-multiselect-header {
margin-bottom:3px;
padding:3px 0 3px 4px;
}
.ui-multiselect-header ul {
font-size:0.9em;
}
.ui-multiselect-header ul li {
float:left;
padding:0 10px 0 0;
}
.ui-multiselect-header a {
text-decoration:none;
}
Lenguajes Interpretados en el Servidor
50
Guía # 4: Funciones en PHP
.ui-multiselect-header a:hover {
text-decoration:underline;
}
.ui-multiselect-header span.ui-icon {
float:left;
}
.ui-multiselect-header li.ui-multiselect-close {
float:right;
text-align:right;
padding-right:0;
}
.ui-multiselect-menu {
display:none;
padding:3px;
position:absolute;
z-index:10000;
text-align: left;
}
.ui-multiselect-checkboxes {
position:relative /* fixes bug in IE6/7 */;
overflow-y:auto;
}
.ui-multiselect-checkboxes label {
cursor:default;
display:block;
border:1px solid transparent;
padding:3px 1px;
}
.ui-multiselect-checkboxes label input {
position:relative;
top:1px;
}
.ui-multiselect-checkboxes li {
clear:both;
font-size:0.9em;
padding-right:3px;
}
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label {
text-align:center;
font-weight:bold;
border-bottom:1px solid;
}
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a {
display:block;
padding:3px;
margin:1px 0;
text-decoration:none;
}
/* Remueve bordes de elementos label en IE6
ocasionado porque IE6 no soporta transparencia */
* html .ui-multiselect-checkboxes label {
border:none;
}
Lenguajes Interpretados en el Servidor
51
Guía # 4: Funciones en PHP
Archivo 6: checkFields.js
function addEvent(obj, evType, fn){
if(obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else{
return false;
}
}
function initForms(){
var btnenviar = document.getElementById("enviar");
btnenviar.onclick = function(){
//Verificar si hay un país seleccionado en el campo select
var contador = 0;
for(var i=0; i<document.frmdestinos.location.options.length; i++){
if(document.frmdestinos.location.options[i].selected){
contador++
}
}
if(contador == 0){
alert("No ha seleccionado ningún país.");
return false;
}
//Verificar si existe un campo marcado en las casillas
//de verificación con las ciudades
kontador = 0;
for(var j=0; j<document.frmdestinos["place[]"].length; j++){
if(document.frmdestinos["place[]"][j].checked){
kontador++;
}
}
if(kontador == 0){
alert("Debe seleccionar al menos una ciudad.");
return false;
}
}
}
addEvent(window, 'load', initForms);
Archivo 7: jquery.multiselect.js
Este archivo se podrá descargar con los recursos de la guía de práctica.
El resultado que podrá visualizar si ejecuta el script selectfields.html en el navegador de su preferencia,
debería ser el siguiente:
Lenguajes Interpretados en el Servidor
52
Guía # 4: Funciones en PHP
Lenguajes Interpretados en el Servidor
53
Guía # 4: Funciones en PHP
Ejercicio #7: El siguiente ejemplo muestra cómo constuir una aplicación modular creando un sitio web en
partes, primero con un archivo denominado header.php, luego el footer.inc.php y el archivo
header.inc.php. Ambos archivos son integrados en home.php para armar la página principal de un sitio
web. Esta técnica de construcción es llamada modularidad, ya que se utilizan archivos .inc.php
Archivo 1: sitio.php
<?php
require('header.inc.php');
?>
<body>
<div id="pagewrap">
<!-- #header y #nav -->
<?php
require('nav.inc.php');
?>
<!-- /#header y #nav -->
<!-- #content -->
<?php
require('content.php');
?>
<!-- /#content -->
<!-- #sidebar -->
<?php
require('sidebar.php');
?>
<!-- /#sidebar -->
<!-- #footer -->
<?php
require('footer.inc.php');
?>
<!-- /#footer -->
</div>
<!-- /#pagewrap -->
</body>
</html>
Archivo 2: header.inc.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Web adaptable con Media Queries</title>
<!--css -->
<link rel="stylesheet" href="css/style.css" />
<!-- <link href="media-queries.css" rel="stylesheet" type="text/css"> -->
<!-- html5.js - IE 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js - IE 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script>
<![endif]-->
</head>
Archivo 3: nav.inc.php
<header id="header">
<hgroup>
<img src="img/logo.png" id="logo" alt="logo"
Lenguajes Interpretados en el Servidor
54
>
Guía # 4: Funciones en PHP
<h1 id="site-description">Responsive Design con CSS3 Media Queries</h1>
</hgroup>
<nav>
<ul id="main-nav" class="clearfix">
<?php
$menuoptions = array("Home", "Quiénes somos", "Servicios", "Portafolio",
"Blog", "Contacto");
$listitems = "";
foreach($menuoptions as $item):
$listitems .= "\t<li>\n\n<a
href=\"javascript:void(0);\">$item</a>\n</li>\n";
endforeach;
echo $listitems;
?>
</ul>
</nav>
<!-- nav -->
<form id="searchform" action="javascript:void(0);">
<input id="s" placeholder="Search" type="search">
</form>
</header>
Archivo 4: content.php
<div id="content">
<article class="post clearfix">
<h2 class="post-title"><a href="#">HTML5</a></h2>
<figure class="post-imagen">
<img src="img/html5-imagen.jpg">
</figure>
<p>
<strong>HTML5</strong>
(<em><strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup
<strong>L</strong>anguage</em>, versión 5) es la quinta revisión importante
del lenguaje básico de la
<a href="http://es.wikipedia.org/wiki/World_Wide_Web" title="World Wide Web">World
Wide Web</a>,
<a href="http://es.wikipedia.org/wiki/HTML" title="HTML">HTML</a>.
HTML5 especifica dos variantes de sintaxis para HTML:
un «clásico» HTML (text/html), la variante conocida
como <em>HTML5</em> y una variante
<a href="http://es.wikipedia.org/wiki/XHTML" title="XHTML">XHTML</a>
conocida como sintaxis <em>XHTML5</em> que deberá
ser servida como XML (XHTML) (application/xhtml+xml).
<a href="http://es.wikipedia.org/wiki/HTML5#cite_note-w3cSpec-0">1</a>
<a href="http://es.wikipedia.org/wiki/HTML5#cite_note-franganilloHTML5-1">2</a>
Esta es la primera vez que HTML y XHTML se han desarrollado
en paralelo.
</p>
<p>
Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya
es usado
por múltiples desarrolladores web por sus avances, mejoras y ventajas.
</p>
<p>
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas,
se
le recomienda al usuario común actualizar a la versión más nueva, para poder
disfrutar
de todo el potencial que provee HTML5.
</p>
</article>
<article class="post clearfix">
Lenguajes Interpretados en el Servidor
55
Guía # 4: Funciones en PHP
<h2 class="post-title"><a href="#">CSS3</a></h2>
<figure class="post-imagen">
<img src="img/css3-imagen.jpg">
</figure>
<p>
El nombre <strong>hojas de estilo en cascada</strong> viene del
<a href="http://es.wikipedia.org/wiki/Idioma_ingl%C3%A9s" title="Idioma
inglés">inglés</a>
<em>Cascading Style Sheets</em>, del que toma sus siglas.
CSS es un lenguaje usado para definir la presentación de
un documento estructurado escrito en
<a href="http://es.wikipedia.org/wiki/HTML" title="HTML">HTML</a>
o <a href="http://es.wikipedia.org/wiki/XML" title="XML">XML</a>
<a href="http://es.wikipedia.org/wiki/CSS3#cite_note-1">2</a>
(y por extensión en <a href="http://es.wikipedia.org/wiki/XHTML"
title="XHTML">XHTML</a>).
</p>
<p>
El <a href="http://es.wikipedia.org/wiki/W3C" title="W3C">W3C</a>
(World Wide Web Consortium) es el encargado de formular la especificación de las
<a href="http://es.wikipedia.org/wiki/Hojas_de_estilo" title="Hojas de
estilo">hojas de estilo</a> que servirán de estándar para los
<a href="http://es.wikipedia.org/wiki/Agentes_de_usuario" title="Agentes de
usuario">agentes de usuario</a> o
<a href="http://es.wikipedia.org/wiki/Navegadores"
title="Navegadores">navegadores</a>.<br>
La idea que se encuentra detrás del desarrollo de CSS es separar la
<em>estructura</em> de un documento de su <em>presentación</em>.
</p>
</article>
<!-- /.post -->
</div>
Archivo 5: sidebar.php
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitulo">Noticias</h4>
<ul>
<?php
$submenuoptions = array(
"Diseño Web",
"Diseño Gráfico",
"WordPress",
"Joomla",
"Drupal",
"Redes Sociales",
"SEO"
);
$listsubmenu = "";
foreach($submenuoptions as $itemsub):
$listsubmenu
.=
href=\"javascript:void(0);\">$itemsub</a>\n</li>\n";
endforeach;
echo $listsubmenu;
?>
</ul>
</section>
<section class="widget">
<h4 class="widgettitulo">Sitos Web</h4>
<ul>
<?php
$externallinks = array(
Lenguajes Interpretados en el Servidor
56
"\n<li>\n\n<a
Guía # 4: Funciones en PHP
"http://www.tutosytips.com/"
"http://www.wordpress.org.com/"
"http://www.Joomla.org/"
"http://www.twetter.com/"
"http://www.facebook.com/"
"http://www.youtube.com/"
"javascript:void(0);" => "SEO"
=>
=>
=>
=>
=>
=>
"Tutosytips.com",
"Wordpress",
"Joomla",
"Twetter",
"Facebook",
"YouTube",
);
$listext = "";
foreach($externallinks as $extlink => $extitem):
$listext .= "\n<li>\n\n<a href=\"$extlink\">$extitem</a>\n</li>\n";
endforeach;
echo $listext;
?>
</ul>
</section>
</aside>
Archivo 6: footer.inc.php
<footer id="footer">
<p>Tutorial por <a href="http://tutosytips.com/">tutosytips</a></p>
</footer>
<!-- footer -->
Archivo 7: style.css
/***************************************************************
* Resetear estilos por defecto definidos por los navegadores
*
***************************************************************/
html, body, address, blockquote, div, dl, form,
h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr,
button, del, ins, map, object, a, abbr, acronym,
b, bdo, big, br, cite, code, dfn, em,
i, img, kbd, q, samp, small, span, strong,
sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
margin: 0;
}
/***************************************************************
* ESTILOS GENERALES
*
***************************************************************/
body {
/* background: #0d1424 url(../img/waves_bg.jpg) repeat center top; */
background: #0d1424 url(../img/bg-blue.jpg) repeat center top;
font: .81em/150% Arial, Helvetica, sans-serif;
color: #666;
Lenguajes Interpretados en el Servidor
57
Guía # 4: Funciones en PHP
}
a {
color: #026acb;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 1.2em;
padding: 0;
}
/* list */
ul, ol {
margin: 1em 0 1.4em 24px;
padding: 0;
line-height: 140%;
}
li {
margin: 0 0 .5em 0;
padding: 0;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1.4em;
margin: 20px 0 .4em;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
}
input[type=search] {
-webkit-appearance: none;
outline: none;
}
#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
position: relative;
height: 160px;
}
/* site description */
#site-description {
color: #FFFFFF;
left: 160px;
Lenguajes Interpretados en el Servidor
58
Guía # 4: Funciones en PHP
position: absolute;
top: 30px;
}
#searchform {
position: absolute;
right: 10px;
bottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
width: 140px;
float: right;
background: #fff;
border: none;
padding: 6px 10px;
/* border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
behavior: url(htc/border-radius.htc);
/* box shadow */
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
/* transition */
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
#main-nav {
width: 100%;
background: #ccc;
margin: 0;
padding: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
/* gradient */
background: #6a6a6a url(../img/nav-bar-bg.png) repeat-x;
background:
-webkit-gradient(linear,
left
top,
left
bottom,
from(#b9b9b9),
to(#6a6a6a));
background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
behavior: url(htc/border-radius.htc);
/* box shadow */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
Lenguajes Interpretados en el Servidor
59
Guía # 4: Funciones en PHP
#main-nav li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#main-nav li:first-child {
margin-left: 10px;
}
#main-nav a {
line-height: 100%;
font-weight: bold;
color: #fff;
display: block;
padding: 14px 15px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
color: #fff;
background: #474747;
/* gradient */
background:
-webkit-gradient(linear,
left
top,
left
to(#797979));
background: -moz-linear-gradient(top, #cdcdcd, #797979);
background: linear-gradient(-90deg, #cdcdcd, #797979);
}
#content {
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
behavior: url(htc/border-radius.htc);
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
h2.post-title {
background: #888;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
behavior: url(htc/border-radius.htc);
padding: 0px 5px ;
border-top: 1px solid #889;
border-bottom: 1px solid #889;
Lenguajes Interpretados en el Servidor
60
bottom,
from(#cdcdcd),
Guía # 4: Funciones en PHP
text-align: center;
}
h2.post-title a {
color: #FFFFFF;
font-size: 0.9em;
text-shadow: 1px 1px 2px #333333;
}
.post {
margin-bottom: 20px;
}
.post-title {
margin: 0 0 5px;
padding: 0;
font: bold 26px/120% Arial, Helvetica, sans-serif;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 260px;
}
#sidebar {
width: 280px;
float: right;
margin: 30px 0 30px;
}
.widget {
background: #402c80;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
behavior: url(htc/border-radius.htc);
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widgettitulo {
background: none repeat scroll 0 0 #9f7ce9;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
Lenguajes Interpretados en el Servidor
61
Guía # 4: Funciones en PHP
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
behavior: url(htc/border-radius.htc);
color: #FFFFFF;
margin: 0 0 5px;
padding: 6px 0;
text-align: center;
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 2px 0;
list-style: none;
clear: both;
border-top: solid 1px #eee;
}
section.widget ul li a {
color: #fff;
font-weight: bold;
font-style: italic;
font-size: 1em;
padding: 11px;
display: block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease-out;
}
section.widget ul li a:hover {
background: #fff;
color: #6B6B6B !important;
text-decoration: none;
}
/*---FOOTER---*/
#footer {
background: linear-gradient(-90deg, #b9b9b9, #6a6a6a) repeat scroll 0 0 rgba(0, 0, 0,
0);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
behavior: url(htc/border-radius.htc);
clear: both;
color: #333333;
font-size: 90%;
text-align: center;
}
#footer p {
padding: 8px 10px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
Lenguajes Interpretados en el Servidor
62
Guía # 4: Funciones en PHP
#footer a {
color: #fff;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }
.clearfix {
display: inline-block;
}
.clearfix {
display: block; zoom: 1;
}
/****************************************************
*
CONDICIONALES DE MEDIA QUERIES
*
****************************************************/
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 230px;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#searchform {
position: absolute;
top: 5px;
right: 0;
z-index: 100;
height: 40px;
}
#searchform #s {
width: 70px;
}
#searchform #s:focus {
width: 150px;
Lenguajes Interpretados en el Servidor
63
Guía # 4: Funciones en PHP
}
#main-nav {
position: static;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
/* site description */
#site-description {
margin: 0 0 15px;
position: static;
text-align: center;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 180px;
}
#sidebar {
width: 100%;
margin: 0;
float: none;
}
#sidebar .widget {
padding: 3% 4%;
margin: 0 0 10px;
}
}
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
figure.post-imagen img {
float: left;
margin: 5px;
max-width: 130px;
}
}
El resultado:
Lenguajes Interpretados en el Servidor
64
Guía # 4: Funciones en PHP
V. DISCUSION DE RESULTADOS
1. Realice un script PHP que utilice una función para que dada una lista de números enteros ingresada
por el usuario (como mínimo 2 números) permita encontrar el número mayor y menor de dicha lista
utilizando dos funciones con lista variable de argumentos, una para encontrar el número mayor y
otra para encontrar el número menor. Los números deben ser ingresados mediante un campo input
de tipo número (type="number") que mediante un botón agregar se añadirán en un campo select de
múltiple selección, del mismo modo que el ejemplo de las edades. Cuando se hayan ingresado varios
número, el usuario debe seleccionar todos o una cantidad de valores ingresados que no debe ser
menor que dos. Si se intenta enviar uno solo o ninguno de los número debe lanzarse un mensaje de
alerta con JavaScript. La solución debe permitir visualizar la lista de números ingresados e indicar
cuáles han sido el número mayor y el número menor encontrados por sus funciones.
2. Haciendo uso de la modularidad descrita en el ejemplo 7 del procedimiento, cree una página web que
incluya un archivo PHP para la sección head de la página que incluya la Definición de Tipo de
Documento, otro para la sección footer, el menú de navegación principal, la sección content y la
sección sidebar. Tiene que tomar un diseño distinto del que se mostró en el ejemplo. Puede ser la
misma distribución en las mismas posiciones, pero tiene que utilizar una hoja de estilo
completamente diferente y con manejo de adaptabilidad para distintos tipos de dispositivo y
resoluciones de pantalla.
VI. INVESTIGACIÓN COMPLEMENTARIA
1. Investigue la utilización de las funciones include_once() y require_once() e indique la diferencia o
diferencias que tienen con respecto a sus homólogas include() y require().
2. Investigue sobre el uso de funciones anónimas en PHP, indicando los motivos por los cuáles pueden
ser utilizadas e implemente un ejemplo simple de cada caso.
VII. BIBLIOGRAFIA






Cabezas Granado, Luis Miguel. PHP 6 Manual Imprescindible. 1ra. Edición. Editorial Anaya Multimedia.
Madrid, España. 2010.
Doyle, Matt. Fundamentos de PHP Práctico. Editorial Anaya Multimedia. 1ª. Edición. Madrid, España.
2010.
Gutiérrez, Abraham / Bravo, Ginés. PHP 5 a través de ejemplos. Editorial Alfaomega RAMA. 1ra edición.
México. Junio 2005.
Gil Rubio, Francisco Javier/Villaverde, Santiago Alonso/Tejedor Cerbel, Jorge A. Creación de sitios web
con PHP 5. Editorial McGraw-Hill. 1ra edición. Madrid, España, 2006.
John Coggeshall. La Biblia de PHP 5. 1ra Edición. Editorial Anaya Multimedia. Madrid España.
http://www.php.net/manual/en
Lenguajes Interpretados en el Servidor
65