Beruflich Dokumente
Kultur Dokumente
GUIA DE LABORATORIO #2
Estructuras de control - Sentencias condicionales y matrices
Centro de Cmputo
2 horas con 30 minutos
Lenguajes Interpretados en el Servidor
Ing. Ricardo Ernesto Elas G. / Ing. Miguel Eduardo Garcia O.
I. OBJETIVOS
En esta gua de prctica se espera que los estudiantes logren:
Adquirir amplio dominio en el uso de las sentencias condicionales if.
Utilizar correctamente todas las variantes de la sentencia if (if-else, if-else if-else, if anidados).
Tener conocimiento completo del funcionamiento y utilizacin de una sentencia switch.
Lograr la habilidad de manejar la caracterstica del efecto de cada en cascada de la sentencia switch.
Desarrolle la capacidad de utilizar eficazmente matrices para almacenar valores y acceder a sus valores en
los scripts PHP.
Sea capaz de utilizar estructuras de control repetitivas para trabajar con datos procedentes de una matriz
escalar o asociativa.
Adquiera el dominio de matrices unidimensionales y multidimensionales utilizando ciclos o lazos
repetitivos anidados.
1 / 39
Sentencias condicionales
Las sentencias condicionales se pueden clasificar en dos grupos:
a) Sentencias condicionales if.
i. Sentencia if simple.
ii. Sentencia if-else.
iii. Sentencia if-elseif-else.
b) Sentencia selectiva swicht.
Sentencia if
La sentencia if permite evaluar una expresin condicional y decidir, en base al resultado, si se ejecuta o no un
bloque de cdigo. Si la evaluacin resulta verdadera (true) se ejecuta el bloque de instrucciones y si resulta
falsa (false) no se ejecuta.
PHP proporciona una estructura if que es similar a la de C:
Sintaxis bsica:
<?php
if(expresion) //sentencia;
?>
Sintaxis extendida:
<?php
if(expresion){
//bloque de sentencias;
}
?>
La sintaxis bsica muestra la construccin de una sentencia if cuando esta contiene una sola instruccin. La
sintaxis extendida muestra una sentencia if con varias instrucciones dentro del bloque que encierran las llaves
del if.
Como se describe en la seccin sobre expresiones, expresion se evala a su valor condicional (boolean). Si
expresion se evala como TRUE, PHP ejecutar la sentencia, y si se evala como FALSE, la ignorar y
continuar con la siguiente instruccin despus del if.
El siguiente ejemplo mostrara: $a es mayor que $b, si $a fuera mayor que $b. De no ser as no mostrara nada:
<?php
if($a > $b) print "$a es mayor que $b";
?>
A menudo, se desea tener ms de una sentencia ejecutada de forma condicional. Por supuesto, no hay
necesidad de encerrar cada sentencia con una clusula if. En vez de eso, se pueden agrupar varias sentencias
en un grupo de sentencias. Por ejemplo, este cdigo mostrara $a es mayor que \$b, si $a fuera mayor que $b,
y entonces asignara el valor de $a a $b:
<?php
if($a > $b) {
print "$a es mayor que $b";
$b = $a;
}
?>
?>
Puede haber varios elseif dentro de la misma sentencia if. La primera expresin elseif (si hay alguna) que se
evale como TRUE se ejecutara. En PHP, tambin se puede escribir 'else if' (con dos palabras) y el
comportamiento sera idntico al de un 'elseif' (una sola palabra).
La sentencia elseif se ejecuta slo si la expresin if precedente y cualquier otra expresin elseif precedente se
evalan como FALSE, y la expresin elseif actual se evala como TRUE.
Operador condicional
En PHP se puede utilizar un operador ternario utilizado con frecuencia en el lenguaje C++. Este es el
operador "?:", o tambin llamado operador condicional. Este es un operador ternario que se utiliza para
simplificar la escritura de una sentencia condicional de tipo ifelse, cuando esta contiene nicamente una
sentencia en el bloque if y una sentencia en el bloque else.
La sintaxis de este operador es la siguiente:
(expresion_condicional) ? expresion1 : expresion2 ;
Debe tener en cuenta que si la expresin_condicional se evala como TRUE, se ejecutar expresion1
y si se evala FALSE, se ejecutar expresion2. Como las expresiones devuelven un valor, usted puede
perfectamente asignar la instruccin completa en una variable, como se muestra en el siguiente ejemplo:
$condicion = ($nota >= 6.0) ? "Aprobado" : "Reprobado" ;
Si la expresin condicional resulta verdadera la variable $condicion tendr el valor de "Aprobado", si se
evala como falsa, entonces el valor asignado a $condicion ser "Reprobado".
Sentencia switch
La sentencia switch es similar a una sentencia if con
varias instrucciones elseif. La diferencia est en que en
un if la condicin se evala tanto por la sentencia if
como por los elseif que esta contenga. En cambio, en un
switch, la condicin se evala solamente una vez, luego
el valor obtenido se compara con una serie de valores
de prueba predefinidos. Cada uno de estos valores se
presenta con una sentencia case dentro del switch.
Cuando uno de estos valores coincide con el evaluado
por la condicin se ejecuta el bloque de instrucciones
dentro de ese case de forma secuencial. En caso de que
ninguno de los valores de prueba coincida con el
devuelto por la condicin se ejecutar el bloque de
instrucciones bajo la sentencia default, si es que est
presente, si no lo est, entonces no se ejecutar ninguna
instruccin en el switch.
Nota: Tener en cuenta que al contrario que otros lenguajes de programacin, continue se aplica a switch y
funciona de manera similar a break. Si se tiene un switch dentro de un bucle y se quiere continuar con el paso
siguiente en el bucle externo, usar continue 2.
Matrices en PHP
Una matriz o arreglo es un tipo de dato compuesto que permite almacenar bajo un mismo nombre un
conjunto de valores que pueden ser de tipos de datos diferentes. Cuando se define una matriz se hace de
forma similar a las variables escalares con la diferencia de que la asignacin de valores se debe realizar a cada
una de las posiciones del arreglo. Tambin se puede utilizar en lugar de la asignacin directa estructuras de
control como ciclos repetitivos o funciones para asignar varias posiciones de una vez, como veremos ms
adelante.
b) Matrices asociativas
Estas matrices tambin son conocidas como tablas hash. Se caracterizan por
utilizar una cadena de caracteres como ndice de la matriz. Lo normal es
utilizar una cadena que permita asociar fcilmente el ndice con el valor que
almacena el elemento.
Por ejemplo, se puede crear una matriz llamada $monedas con cuatro
elementos y asociar valores a cada uno de estos elementos de la siguiente
forma:
$monedas["El Salvador"] = "dlar";
$monedas["Guatemala"] = "quetzal";
$monedas["Costa Rica"] = "coln";
$monedas["Honduras"] = "lempira";
Si deseamos mandar a imprimir los valores de este arreglo, deberamos escribir:
echo $monedas["El Salvador"];
echo $monedas["Guatemala"];
echo $monedas["Costa Rica"];
echo $monedas["Honduras"];
O, haciendo uso de estructuras de control repetitivas, con la sentencia foreach:
foreach($monedas as $key => $value){
echo "Moneda de " . $key . ": " . $value . "<br />\n";
}
Tipos de matrices segn el nmero de dimensiones:
a) Matrices unidimensionales
Es una matriz que utiliza un nico ndice para hacer referencia a todos los elementos de la misma. Este ndice
puede ser escalar o asociativo.
b) Matrices multidimensionales
Es una matriz que necesita utilizar ms de un ndice para hacer referencia a un elemento especfico. De todas
las matrices multidimensionales, las ms utilizados son las de dos dimensiones. Los arreglos de tres o ms
dimensiones no se utilizan tanto debido a que son ms difciles de comprender y manejar.
El siguiente bloque de cdigo muestra la definicin de un arreglo multidimensional (con ndices asociativos) y
luego manda a imprimir en la ventana del navegador uno de sus elementos:
<?
$pais=array
(
"espana" =>array
(
"nombre"=>"Espaa",
"lengua"=>"Castellano",
"moneda"=>"Peseta"
),
"francia" =>array
(
"nombre"=>"Francia",
"lengua"=>"Francs",
"moneda"=>"Franco"
)
La funcin array() se utiliza para crear una variable de tipo matriz y asignarle los valores que va a contener en
una sola instruccin. En tanto que, con range() se puede crear una matriz que comienza desde el
$valorinicial y termina con el $valorfinal.
Asignar los elementos de una matriz a variables escalares
PHP proporciona una funcin que permite asignar en una sola instruccin los elementos de una matriz a
variables escalares independientes. Esta funcin es list(), que posee como argumentos las variables escalares
en donde se almacenarn los valores almacenados en las posiciones del arreglo de forma ordenada. La
sintaxis de la funcin es la que se muestra a continuacin:
list ($variable1, $variable2, , $variablen) = $mi_array
Donde,
$mi_array, es la matriz o arreglo del que se extraern los elementos.
$variable1, $variable2, , $variablen, son las variables escalares independientes en las que
se asignarn los diferentes elementos de la matriz.
Funciones importantes para trabajar con matrices
El lenguaje PHP, brinda una cantidad considerable de funciones para facilitar el trabajo con matrices. A
continuacin se brinda informacin detallada de varias de ellas:
Funciones para recorrer una matriz
Cuando se trabaja con matrices, PHP ofrece una serie de funciones que permiten realizar de forma ms fcil y
conveniente esta tarea.
count(): Permite obtener el nmero de elementos que componen la matriz. Es muy til cuando se pretende
realizar un recorrido sobre una matriz utilizando ciclos for, while o do-while. Por ejemplo:
for($i=0; $i<count($matriz); $i++)
sizeof(): Tambin se utilize para obtener el nmero de elementos de una matriz. Por ejemplo:
for($i=0; $i<sizeof($matriz); $i++)
next(): Devuelve el valor del elemento siguiente al actual (si existe), avanzando el puntero interno una
posicin. En caso de que el elemento actual sea el ltimo de la matriz, devuelve false.
prev(): Devuelve el valor del elemento anterior al actual (si existe), retrocediendo el puntero interno una
posicin. En caso de que el elemento actual sea el primero, devuelve false.
current(): Devuelve el valor del elemento situado en la posicin actual del cursor. Si la matriz est vaca o no
hay ms elementos, la funcin devolver false.
foreach
PHP4 y PHP5 incluyen la instruccin foreach, tal como Perl y algunos otros lenguajes. Esta instruccin
permite recorrer los elementos de una matriz de una forma sencilla. La instruccin permite obtener cada uno
de los valores almacenados en el arreglo y asignarlos automticamente en una variable para trabajar con ellos
dentro del bloque de instrucciones del foreach. Tambin es posible obtener el ndice si acaso, se ha utilizado
un matriz asociativa. Hay dos sintaxis; la segunda es una extensin menor, pero til de la primera:
foreach(expresion_array as $value) //sentencias;
foreach(expresion_array as $key => $value) //sentencias;
La primera forma recorre el array dado por expresion_array. En cada iteracin, el valor del elemento
actual se asigna a $value y el puntero interno del array se avanza en una unidad (as en la siguiente
iteracin, se estar apuntando de forma automtica el elemento siguiente).
La segunda manera hace lo mismo, salvo que la clave del elemento actual ser asignada a la variable $key en
cada iteracin.
Notas:
Cuando foreach comienza su primera ejecucin, el puntero interno a la lista (array) se reinicia
automticamente al primer elemento del array. Esto significa que no se necesita llamar a reset() antes de
un bucle foreach.
Hay que tener en cuanta que foreach trabaja con una copia de la lista (array) especificada y no la lista en si,
por ello el puntero de la lista no es modificado como en la construccin each.
10
clave y valor */
=
=
=
=
"a";
"b";
"y";
"z";
foreach($a as $v1) {
foreach ($v1 as $v2) {
print "$v2\n";
}
}
/* foreach ejemplo 5: matriz dinmica */
foreach(array(1, 2, 3, 4, 5) as $v) {
print "$v\n";
}
?>
11
Cantidad
1
1
1
1
IV. PROCEDIMIENTO
Indicaciones: Asegrese de digitar el cdigo de los siguientes ejemplos que se presentan a continuacin.
Tenga en cuenta que ni Sublime Text, ni PHP Designer son compiladores; solamente son editores de cdigo
PHP, por lo tanto los errores de sintaxis los podr observar nicamente hasta que se ejecute el script al cargar
la pgina en el navegador de su preferencia.
Ejemplo 1: En este ejemplo se evaluar si un ao ingresado por un usuario a travs de un formulario resulta
ser bisiesto o no. Primero se crear el formulario html que se guardar como bisiesto.html y luego se crear el
script PHP que procesar el ao ingresado para determinar si resulta ser bisiesto o no.
Archivo 1: bisiesto.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ao bisiesto</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/bisiesto.css" />
<script type="text/javascript" src="js/validatedata.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/butterflybg1280x800.jpg" alt="" />
<div class="wrapper">
<?php
if(!isset($_POST['enviar'])):
?>
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" name="frmdatos">
<h2 class="contact">Aos bisiestos</h2>
<span class="contact">
<label for="txtdato">Probar ao:</label>
</span>
<input type="text" name="year" id="year" value="" maxlength="20" placeholder="(Ingrese
el dato)" /><br />
<span id="numbersOnly">Ingrese nmeros enteros</span>
<input type="submit" name="enviar" id="enviar" value="Probar" />
</form>
<?php
else:
//Script que determina si un ao es bisiesto o no
$year = isset($_POST['year']) ? $_POST['year'] : 0;
if(($year%4 == 0 && $year%100 != 0) || $year%400 == 0):
echo "<p class=\"bisiesto\">";
echo "<span style=\"color:Green;font:bold 10pt 'Lucida Sans';\">El ao $year
es bisiesto</span><br />\n";
echo
"<span
style=\"color:Green;font:bold
10pt
'Lucida
Sans';\"><a
href=\"{$_SERVER['PHP_SELF']}\">Probar otro ao</a>";
echo "</p>";
else:
echo "<p class=\"bisiesto\">";
echo "<span style=\"color:FireBrick;font:bold 10pt 'Lucida Sans';\">El ao
$year no es bisiesto</span><br />\n";
echo
"<span
style=\"color:Green;font:bold
10pt
'Lucida
Sans';\"><a
href=\"{$_SERVER['PHP_SELF']}\">Probar otro ao</a>";
echo "</p>";
endif;
endif;
12
?>
</div>
</body>
</html>
Archivo 2: bisiesto.css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%
}
body
margin-left:50px;
margin-right:50px;
overflow:hidden;
}
#background.source-image
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:-100;
}
p.bisiesto
background:#F8F16D;
}
#numbersOnly {
background: rgba(239,197,202,1);
background: -moz-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background:
-webkit-gradient(left
top,
left
bottom,
color-stop(0%,
rgba(239,197,202,1)),
color-stop(50%,
rgba(210,75,90,1)),
color-stop(51%,
rgba(222,60,79,1)), color-stop(100%, rgba(241,142,153,1)));
background: -webkit-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1)
50%, rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background: -o-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
background: -ms-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%,
rgba(222,60,79,1) 51%, rgba(241,142,153,1) 100%);
color: #fff;
font: bold 1em 'BebasNeueRegular',Arial,Helvetica,'Liberation Sans';
padding: 4px 5px;
visibility:hidden;
}
Archivo 3: formstyle.css
* {
outline: none;
}
body, div, h1, form, fieldset, input, textarea {
margin: 0;
padding: 0;
13
border: 0;
outline: none;
}
html {
height: 100%;
}
html, body {
height: 100%;
}
body {
background: #A4EB90;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A4EB90),
color-stop(1, #55963F)
);
background-image: -o-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -moz-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -webkit-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: -ms-linear-gradient(bottom, #A4EB90 0%, #55963F 100%);
background-image: linear-gradient(to bottom, #A4EB90 0%, #55963F 100%);
font-family: sans-serif;
}
.wrapper{
background:#CCC;
width:800px;
margin: 16px auto;
padding: 10px 30px;
}
h2.contact {
background: url(../img/validatedata.png) no-repeat -16px -50px;
color: #ff5400;
font-family: 'YanoneKaffeesatzRegular';
font-size: 66px;
height: 105px;
padding-left: 150px;
}
span.contact {
color: #4b4b4b;
font-family: 'BebasNeueRegular', Arial;
font-size: 24px;
line-height: 68px;
margin-bottom: 15px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
input[type="text"] {
width: 236px;
}
textarea {
width: 600px;
height: 275px;
}
14
label {
color: #ff5400;
}
input,
textarea,
select {
background-color: rgba(255, 255, 255, 0.4);
border: 5px solid rgba(122, 192, 0, 0.15);
padding: 10px;
font-family: 'YanoneKaffeesatzRegular', Arial;
color: #4b4b4b;
font-size: 24px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
margin-top: -10px;
}
input:focus,
textarea:focus,
select:focus {
background-color: rgba(255,255,255,1);
border: 5px solid #ff5400;
}
input[type="submit"] {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #619702),
color-stop(0.62, #7ac000)
);
background: -moz-linear-gradient(
center bottom,
#619702 23%,
#7ac000 62%
);
border: none; cursor: pointer; color: #fff;
font-size: 24px;
background-color: #7ac000;
padding: 5px 36px 8px 36px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.6);
}
input[type="submit"]:hover {
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #c34000),
color-stop(0.62, #ff5400)
);
background: -moz-linear-gradient(
15
center bottom,
#c34000 23%,
#ff5400 62%
);
color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400;
}
input[type="submit"]:active {
top: 1px;
}
Archivo 4: fonts.css
@font-face {
font-family: 'YanoneKaffeesatzRegular';
src: url('../fonts/YanoneKaffeesatz-Regular-webfont.eot');
src:
url('fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix')
format('embeddedopentype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('../fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular')
format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Archivo 5: validatedata.js
(function(){
//Agregar al manejador de evento load la funcin 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 number = document.getElementById("year");
var resparea = document.getElementById("fact");
// Hacer un recorrido por todos los campos del formulario
if (number.addEventListener){
number.addEventListener("keypress", filter, false);
}
else {
// No utilizamos attachEvent porque no llama a la funcin de controlador
// con el valor correcto de la palabra clave this. En su lugar se invova
// con el manejador de evento onkeypress
number.onkeypress = filter;
}
}
// Este es el controlador keypress que filtra la entrada del usuario
function filter(event) {
16
Ejemplo 2: Se desea calcular el salario o sueldo neto de algn empleado mediante el uso de un formulario de
ingreso de la informacin necesaria para realizar el clculo. El formulario debe solicitar el nombre del
empleado, su sueldo base y, si realiza horas extras, debe ingresarse el nmero de horas extras trabajadas y el
salario por hora extra a pagar. Al enviar los datos del formulario debe mostrarse de forma ordenada toda la
informacin en una boleta de pago, mostrando como dato final el sueldo neto o lquido a pagar, tomando en
cuenta las horas extras. En este formulario de ingreso se ha utilizado validacin en el cliente de la entrada de
datos en los campos de texto del formulario, haciendo uso de JavaScript no intrusivo (investigar sobre este
tema, si no est claro).
Archivo 1: salario.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Preferencia de restaurantes</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel="stylesheet" href="css/salario.css" media="screen" />
<script src="js/disabledtextfields.js"></script>
<script src="js/inputFilter.js"></script>
17
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/bgviolet.jpg" alt="" />
<header>
<h1>Salario empleado</h1>
</header>
<section>
<article>
<div id="empleado">
<form action="salario.php" method="POST" name="salario" id="salario">
<fieldset>
<legend>
<span>Clculo de salario</span>
</legend>
<ol>
<li>
<label>Nombre empleado:</label>
<input type="text" name="empleado" id="txtempleado" size="20" maxlength="50"
allowed="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
messageid="alfabeticchars" />
<span id="alfabeticchars">Solo acepta caracteres alfabticos</span>
</li>
<li>
<label>Sueldo base:</label>
<input type="text" name="sueldobase" id="sueldobase" size="12" maxlength="12"
allowed="0123456789." messageid="numbersonly" />
<span id="numbersonly">Solo acepta nmeros y punto decimal</span>
</li>
<li>
<label>Horas extras:</label>
<fieldset>
<ol>
<li>
<input type="checkbox" name="hextra" id="hextrasi" value="no" />
</li>
</ol>
</fieldset>
</li>
<li>
<label for="numhorasex">Nmero de horas:</label>
<input type="text" name="numhorasex" id="numhorasex" size="4" maxlength="2"
disabled="disabled" allowed="0123456789" messageid="integersonly" />
<span id="integersonly">Solo acepta nmeros enteros</span>
</li>
<li>
<label for="pagohextra">Pago hora extra:</label>
<input type="text" name="pagohextra" id="pagohextra" size="12" maxlength="6"
disabled="disabled" allowed="0123456789." messageid="othernumbersonly" />
<span id="othernumbersonly">Solo acepta nmeros y punto decimal</span>
</li>
<li>
<input type="submit" name="enviar" id="enviar" value="Enviar" class="button"
/>
<input type="reset" name="reset" id="reset" value="Restablecer" class="button"
/>
</li>
</ol>
</fieldset>
</form>
</div>
</article>
</section>
18
</body>
</html>
Archivo 2: salario.css
/* Archivo: salario.css */
* {
margin: 0;
padding: 0;
outline: none;
}
html, body {
height: 100%;
}
body
{
overflow:hidden;
}
h1
{
font:Bold 1.8em Arial,Helvetica,sans-serif;
text-align:center;
-moz-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-webkit-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-o-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
-ms-text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
text-shadow: 4px 4px 3px rgba(150, 150, 150, 0.8);
}
#numbersonly,
#othernumbersonly,
#integersonly,
#alfabeticchars
{
font:Bold 0.8em Arial,Helvetica,sans-serif;
color:Gold;
background: -moz-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -webkit-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -o-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: -ms-linear-gradient(45deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: linear-gradient(135deg, rgb(209,50,53) 30%, rgb(253,46,53) 81%);
background: rgb(209,50,53);
padding: 4px 3px;
visibility:hidden;
display:block;
}
#background.source-image
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index:-100;
}
#empleado
{
width:36%;
min-width:350px;
min-height:600px;
margin:0 auto;
}
/* Estilos para el formulario de ingreso de datos */
19
fieldset
{
background-color:#BFF9C3;
border-style:none;
border-top:1px solid #BFBAB0;
float:left;
clear:both;
margin:0 0 -1em 0;
padding:0 0 1em 0;
position:relative;
width:100%;
}
legend
{
color:#545351;
margin-left:1em;
padding:0;
font-weight:bold;
}
legend span {
font-size: 2em;
font-family:"Myriad Pro",Paladino,serif;
left:0.74em;
top:0;
margin-top: 0.3em;
position: absolute;
}
fieldset ol
{
list-style:none;
padding:3.5em 1em 0 1em;
}
fieldset li
{
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
fieldset .button
{
background-color:Indigo;
border:0 none #FFF;
color:Lavender;
float:none;
font:bold 0.8em Verdana,Helvetica,sans-serif;
height:30px;
margin-left:4em;
width:auto;
}
fieldset label
{
color:Indigo;
float:left;
font:Normal 0.8em Verdana,Helvetica,sans-serif;
margin-right:1em;
text-align:right;
width:12em;
}
fieldset fieldset {
background-color:transparent;
background-image:none;
border-style:none;
margin-bottom:-2.5em;
}
fieldset fieldset legend {
font-weight:normal;
margin-left:0;
}
20
fieldset fieldset ol {
margin:0 0 0 10em;
padding:0;
position:relative;
top:-1em;
}
fieldset fieldset label
float:none;
margin-right:auto;
width:auto;
}
21
color:Orange;
text-decoration:none;
}
Archivo 3: salario.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Calcular Salario</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/salario.css" media="screen" />
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<img id="background" class="source-image" src="bg/bgviolet.jpg" alt="" />
<header>
<h1>Detalle del salario</h1>
</header>
<section>
<article>
<?php
if(isset($_POST['enviar'])){
$empleado = isset($_POST['empleado']) ? $_POST['empleado'] : "";
$sueldobase = isset($_POST['sueldobase']) ? $_POST['sueldobase'] : "";
if(isset($_POST['hextra'])){
$horasextras = isset($_POST['numhorasex']) ? $_POST['numhorasex'] : "0";
$pagohextra = isset($_POST['pagohextra']) ? $_POST['pagohextra'] : "0";
$sueldohextras = $horasextras * $pagohextra;
}
else{
$horasextras = 0;
$sueldohextras = 0;
}
$sueldoneto = $sueldobase + $sueldohextras;
echo "<div><h1>Boleta de pago</h1><br>\n";
echo "<table>\n";
echo "<tr>\n<th colspan=\"2\">\nDetalle del pago\n</th>\n</tr>\n";
echo
"<tr>\n<td>\nEl
empleado
es:
\n</td>\n<td
class=\"number\">\n",$empleado,"\n</td>\n</tr>\n";
echo "<tr>\n<td>\nEl sueldo base es: \n</td>\n<td class=\"number\">\n\$ ",
$sueldobase, "\n</td>\n</tr>\n";
echo
"<tr>\n<td>\nLas
horas
extras
son:
\n</td>\n<td
class=\"number\">\n",$horasextras,"\n</td>\n</tr>\n";
echo "<tr>\n<td>\nEl pago por hora extra es: \n</td>\n<td class=\"number\">\n\$ ",
$sueldohextras, "\n</td>\n</tr>\n";
echo "<tr>\n<th>\nEl sueldo neto devengado es: \n</th>\n<th class=\"number\">\n\$
", $sueldoneto, "\n</th>\n</tr>\n";
echo "</table>\n</div>\n";
}
?>
<div id="back">
<p>
<a href="salario.html">Ingresar otro empleado</a>
</p>
</div>
</article>
</section>
</body>
</html>
Archivo 4: disabledtextfields.js
function disableTextBox(){
22
document.salario.hextra.onclick = function(){
document.salario.numhorasex.disabled = !document.salario.numhorasex.disabled;
document.salario.pagohextra.disabled = !document.salario.pagohextra.disabled;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(disableTextBox);
Archivo 5: inputFilter.js
/***********************************************************************************
* InputFilter.js: Filtrado no intrusivo de pulsaciones de teclas para
*
*
elementos INPUT del formulario.
*
*
*
* Este mdulo hace una bsqueda por todo el documento de los campos
*
* <input type="text" /> de un formulario contenido en un documento web
*
* que contiene atributos no estndar denominados "allowed".
*
* Registra un controlador de evento onkeypress para que cualquiera de
*
* dichos elementos restrinja la entrada del usuario de forma que slo
*
* se puedan introducir los caracteres que aparezcan en el valor de ese atributo. *
* Si el elemento INPUT tambin tiene un atributo denominado "messageid",
*
* el valor de dicho atributo se lleva al id de otro elemento del documento.
*
* Si el usuario digita un carcter que no se permite, el elemento messageid
*
* se hace visible. Si el usuario digita un carcter permitido, el elemento
*
* messageid se oculta.
*
* Este elemento id de mensaje se ha diseado para indicar al usuario el por qu
*
* se ha rechazado una determinada pulsacin de tecla.
*
*
*
* Ac se muestra un ejemplo de cdigo HTML para utilizar este mdulo js.
*
*
Aceptar slo nmeros:
*
*
<input id="integer" type="text" allowed="0123456789" messageid="numbersonly"> *
*
<span id="numbersonly" style="visibility:hidden">Slo nmeros enteros</span> *
*
*
* En los navegadores como Internet Explorer, que no admiten addEventListener(),
*
* el controlador keypress registrado por este mdulo .js sobrescribe cualquier
*
* controlador keypress definido en el HTML.
*
**********************************************************************************/
(function() { // Todo el mdulo se encuentra dentro de una funcin annima
// Cuando el documento se haya cargado totalmente se llama a la funcin
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 inputtags = document.getElementsByTagName("input");
// Hacer un recorrido por todos los campos del formulario
23
24
}
}
})(); // Finalizar la funcin annima esperando ser invocada.
Ejemplo 3: En el siguiente ejemplo se ilustra cmo detectar el idioma en el cliente (navegador del usuario).
Para probar el ejemplo, ser necesario que cambie el idioma predeterminado del navegador, agregando un
nuevo idioma si es necesario y subindolo hasta el primer nivel para que este nuevo idioma sea el
predefinido. Pregunte al docente cmo hacer esto si acaso no lo sabe ud.
Archivo 1: idioma.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Detector de Lenguaje del Navegador</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="css/idioma.css" />
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Idioma del navegador</h1>
</header>
<section>
<?php
//Antes de nada introducimos mensajes en forma de variables
$espanol = "Hola";
$ingles = "Hello";
$aleman = "Hallo";
$frances = "Bonjour";
$italiano = "Ciao";
$portugues = "Ol";
//Ahora leemos del navegador cul es su lengua oficial
$completo = $_SERVER["HTTP_ACCEPT_LANGUAGE"];
$idioma = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,2);
//$idioma=substr($HTTP_ACCEPT_LANGUAGE,0,2);
//Formulamos las posibilidades que se pueden dar
echo "<p>" . $completo . "<br>";
echo $idioma ."</p>\n";
if($idioma == "es"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se está utilizando en el navegador es el
Español: %s </p>\n", $espanol);
}
elseif($idioma == "fr"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se está utilizando en el navegador es el
Francés: %s </p>\n", $frances);
}
elseif($idioma == "en"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se está utilizando en el navegador es el
Inglés: %s </p>\n", $ingles);
}
elseif($idioma == "de"){
echo '<p class="msgOff" onmouseover="this.className=\'msgOn\'"
onmouseout="this.className=\'msgOff\'">';
printf ("El lenguaje que se está utilizando en el navegador es el
25
Archivo 2: idioma.css
#wrapper
width:90%;
margin:0 auto;
}
h1
{
font:Bold 1.8em Arial,Helvetica,sans-serif;
text-align:center;
}
p
{
width:60%;
font:bold 14pt "Palatino Linotype","Book Antiqua",serif;
color:Purple;
}
.msgOff
{
color:Purple;
background-color:Orange;
border:5px outset Purple;
}
.msgOn
{
color:Orange;
background-color:Purple;
border:5px outset Orange;
}
Ejemplo 4: El siguiente script PHP muestra cmo utilizar la funcin date() para manipular la fecha y hora
del sistema. Debe notar que se est estableciendo a nivel de cdigo la zona horaria adecuada para la
ubicacin del pas. Se hace uso de la instruccin switch para asignar los valores del da, el mes y la hora del
sistema.
Archivo 1: fechahora.php
<!DOCTYPE html>
26
<html lang="es">
<head>
<title>Fecha y hora del Sistema</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="css/fechahora.css" />
<script type="text/javascript" src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<?php
//Establecer la zona horaria para el servidor web, de modo que concuerde
//con la hora del pas donde se est ejecutando el script.
date_default_timezone_set("America/El_Salvador");
$dia=date("w");
switch($dia){
case 0: $dia="Domingo";break;
case 1: $dia="Lunes";break;
case 2: $dia="Martes";break;
case 3: $dia="Mircoles";break;
case 4: $dia="Jueves";break;
case 5: $dia="Viernes";break;
case 6: $dia="Sbado";break;
}
$mes=date("n");
switch($mes){
case 1: $mes="Enero";break;
case 2: $mes="Febrero";break;
case 3: $mes="Marzo";break;
case 4: $mes="Abril";break;
case 5: $mes="Mayo";break;
case 6: $mes="Junio";break;
case 7: $mes="Julio";break;
case 8: $mes="Agosto";break;
case 9: $mes="Septiembre";break;
case 10: $mes="Octubre";break;
case 11: $mes="Noviembre";break;
case 12: $mes="Diciembre";break;
}
$numero=date("j");
$anio=date("Y");
$hora = date("g:i a");
printf("<header>\n");
printf("\t<p class=\"fecha\">\n");
printf("Hoy es %s, %d de %s del %d \n</p>\n", $dia, $numero, $mes, $anio);
printf("</header>\n");
printf("<section>\n\t<article>\n");
printf("\t\t<p class=\"hora\">\n");
printf("\t\t\tSon las: %s \n\t\t</p>\n", $hora);
printf("\t</article>\n</section>\n");
?>
</body>
</html>
Archivo 2: fechahora.css
*
{
margin:0;
padding:0;
}
p.fecha
{
background-color:rgb(255,190,200);
border:5px Outset rgb(10,80,10);
color:rgb(130,60,20);
27
font-family:Georgia;
font-size:2em;
font-weight:bold;
margin:auto;
margin-top:12px;
text-align:center;
width:50%;
}
p.hora
{
color:#0F6030;
background-color:#FCFD90;
border:5px Ridge #0C6020;
font-family:Georgia;
font-size:1.5em;
font-weight:bold;
margin:auto;
margin-top:20px;
text-align:center;
width:35%;
}
Ejemplo 5: El siguiente ejemplo permite realizar una encuesta a los visitantes del sitio averiguando de qu
forma se han enterado del sitio. El sitio nicamente reporta el medio que el usuario ha seleccionado, no
realiza conteos. Esto ser posible hasta que veamos archivos o bases de datos.
Archivo1: encuesta.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Encuesta</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/encuesta.css" />
<script src="js/changeformats.js"></script>
<script src="js/modernizr.custom.lis.js"></script>
</head>
<body>
<header>
<h1 class="Off">
Favor responder la pregunta
</h1>
</header>
<section>
<article>
<?php
if(isset($_POST['enviar'])):
$contact = $_POST['contacto'];
switch($contact):
case 'client':
echo "<p>Cliente que visita constantemente el sitio.</p>";
break;
case 'television':
echo "<p>Cliente referido por anuncio televisivo.</p>";
break;
case 'phonebook':
echo "<p>Cliente referido mediante gua telefnica.</p>";
break;
case 'friend':
echo "<p>Cliente referido por amigos.</p>";
break;
//No parece necesario porque el ingreso es por medio de un campo select
default:
28
Archivo 2: encuesta.css
* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
background: rgb(110,133,255);
background: -moz-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: -webkit-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163)
60%);
background: -o-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: -ms-linear-gradient(30deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
background: linear-gradient(120deg, rgb(110,133,255) 30%, rgb(237,241,163) 60%);
}
header h1 {
margin-top: 16px;
margin-bottom: 24px;
}
29
article p
{
color:Navy;
font:bold 1.2em "Calisto MT",Garamond,serif;
}
label
{
color:Navy;
font:bold 0.8em "Myriad Pro",Frutiger,"Lucida Sans",sans-serif;
}
.On
{
background-color:Yellow;
border:6px outset Navy;
color:Navy;
font:bold 2em "Arial Black",Helvetica,sans-serif;
}
.Off
{
background-color:Navy;
border:6px outset Yellow;
color:Yellow;
font:bold 2em "Arial Black",Helvetica,sans-serif;
}
#contacto
{
background-color:Yellow;
color:Navy;
font:bold 9pt Frutiger,"Lucida Sans",sans-serif;
}
#enviar
{
background-color:#33339C;
color:#FEFE20;
font:normal 0.8em Frutiger,sans-serif;
margin-top: 12px;
margin-bottom: 12px;
padding: 8px 0;
width:40%;
}
#enviar:hover
{
background-color:Navy;
color:Yellow;
font-weight:600;
}
Archivo 3: changeformats.js
function findHeaders(){
var headers, i;
headers = document.getElementsByTagName('h1');
for(i=0; i<headers.length; i++){
if(headers[i].className){
headers[i].onmouseover = function(){roll(this);}
headers[i].onmouseout = function(){roll(this);}
}
}
}
function roll(h){
if(h.className == 'On'){
h.className = 'Off';
30
}
else{
h.className = 'On';
}
}
window.onload = function(){
findHeaders();
}
Ejemplo 6: El siguiente ejemplo ilustra cmo utilizar el operador condicional para encontrar el mayor de
tres nmeros ingresados a travs de un formulario. Los campos de texto donde se ingresan los nmeros son
validados con JavaScript para que slo acepten valores enteros (de 0 a 9), mostrando un mensaje en caso de
querer introducir cualquier otro carcter que no sea numrico.
Archivo 1: compararnumeros.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador de palabras</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/formstyle.css" />
<script type="text/javascript" src="js/validar.js"></script>
<!-- Para las versiones anteriores del IE9 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Contador de palabras</h1>
</header>
<section>
<article id="formarea">
<form name="frmpalabras" method="POST" action="compararnum.php">
<fieldset>
<label for="number1">Primer nmero:</label>
<input type="text" name="numero1" id="number1" placeholder="Primer nmero" /><br
/>
<span id="numbersOnly1">Ingrese nmeros enteros</span>
<label for="number2">Segundo nmero:</label>
<input type="text" name="numero2" id="number2" placeholder="Segundo nmero" /><br
/>
<span id="numbersOnly2">Ingrese nmeros enteros</span>
<label for="number3">Tercer nmero:</label>
<input type="text" name="numero3" id="number3" placeholder="Tercer nmero" /><br
/>
<span id="numbersOnly3">Ingrese nmeros enteros</span>
<input type="submit" name="conteo" id="count" value="Enviar" />
</fieldset>
</form>
</article>
</section>
</body>
</html>
Archivo 2: validar.js
(function(){
31
32
var messageElement2
ocultar/mostrar
var messageElement3
ocultar/mostrar
document.getElementById("numbersOnly2");
//
Mensaja
document.getElementById("numbersOnly3");
//
Mensaja
Archivo 3: compararnum.php
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contador de palabras</title>
<meta charset="utf-8" />
<link href="http://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/formstyle.css" />
</head>
<body>
33
<header>
<h1>
Resultados de la comparacin de <?php echo $num1 = isset($_POST['numero1']) ?
$_POST['numero1'] : 0; ?>,
<?php echo $num2 = isset($_POST['numero3']) ? $_POST['numero2'] : 0; ?> y
<?php echo $num3 = isset($_POST['numero3']) ? $_POST['numero3'] : 0; ?>
</h1>
</header>
<section>
<article>
<p class="msg">
<?php
$elmayor = ($num1 > $num2) ? $num1 : $num2;
$elmayor = ($elmayor > $num3) ? $elmayor : $num3;
printf("El nmero mayor es: %d", $elmayor);
?>
</p>
<article>
</section>
</body>
</html>
Archivo 4: formstyle.css
* {
border: 0;
margin: 0;
outline: none;
padding: 0;
}
html {
height: 100%;
}
body {
background: #1e2021; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e2021 1%, #4a4e54 50%, #0c0309 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#1e2021),
color-stop(50%,#4a4e54), color-stop(100%,#0c0309)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* Opera
11.10+ */
background: -ms-linear-gradient(-45deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* IE10+
*/
background: linear-gradient(135deg, #1e2021 1%,#4a4e54 50%,#0c0309 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e2021',
endColorstr='#0c0309',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-family: 'LeagueGothicRegular',Arial,Helvetica,"Liberation Sans";
}
h1 {
font-size: 48px;
color: #9ab;
text-transform: uppercase;
text-align: center;
margin: 16px auto;
text-shadow: 1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
34
35
label {
float: left;
clear: left;
margin: 11px 20px 0 0;
width: 100px;
text-align: right;
font-size: 16px;
color: #445668;
text-transform: uppercase;
text-shadow: 0px 1px 0px #f2f2f2;
}
input {
width: 260px;
height: 35px;
padding: 5px 20px 0px 20px;
margin: 0 0 20px 0;
background: #546a7f; /* Old browsers */
background: -moz-linear-gradient(-45deg, #546a7f 0%, #5e768f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#546a7f),
color-stop(100%,#5e768f)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(-45deg,
#546a7f
0%,#5e768f
100%);
/*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #546a7f 0%,#5e768f 100%); /* IE10+ */
background: linear-gradient(135deg, #546a7f 0%,#5e768f 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#546a7f',
endColorstr='#5e768f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 16px;
color: #f2f2f2;
text-transform: uppercase;
text-shadow: 0px -1px 0px #334f71;
}
input::-webkit-input-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3;
text-shadow: 0px -1px 0px #38506b;
}
input[type=submit] {
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));
36
37
input:focus,
textarea:focus {
background: #668099; /* Old browsers */
background: -moz-linear-gradient(-45deg, #668099 0%, #728eaa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#668099),
color-stop(100%,#728eaa)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(-45deg,
#668099
0%,#728eaa
100%);
/*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #668099 0%,#728eaa 100%); /* IE10+ */
background: linear-gradient(135deg, #668099 0%,#728eaa 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#668099',
endColorstr='#728eaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Archivo 5: font.css
@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic.eot');
src: url('../fonts/League_Gothic.woff') format('woff'),
url('../fonts/League_Gothic.otf') format('opentype'),
url('../fonts/League_Gothic.svg#LeagueGothic') format('svg');
}
V. DISCUSION DE RESULTADOS
1.
2.
Cree un script que a partir de la edad calcule el nmero de das que este ha vivido, tome en cuenta los
aos bisiestos para obtener el clculo exacto de das.
Realice un script que le permita determinar si un carcter ingresado por el usuario a travs de un
formulario, es una vocal (mayscula, minscula o acentuada), una consonante (mayscula o minscula),
un nmero (del 0 al 9) o smbolos (.,;:()""''!?#$%&, etc). En caso de no ser ninguno de estos caracteres,
debe mostrar un mensaje que indique que "el carcter ingresado no se puede procesar".
El nmero de unidades valorativas que puede cursar un estudiante en cada ciclo es determinado de
acuerdo a su CUM:
i. Si el CUM del estudiante es mayor o igual que 7.5, podr cursar un mximo de 32 unidades
valorativas (UV),
ii. Si el CUM del estudiante es mayor o igual que 7.0, pero menor que 7.5, podr cursar un mximo de 24
unidades valorativas (UV).
iii. Si el CUM es mayor o igual que 6.0 y menor que 7.0, podr cursar un mximo de 20 unidades
valorativas.
iv. Si el CUM acumulado es menor que 6.0, podr cursar un mximo de 16 unidades valorativas.
Se pide que realice un formulario en donde se ingresen las notas de 5 materias que el estudiante ha
cursado durante el primer ciclo de estudios y a partir de estas calcular el CUM y en base al valor
obtenido indique el nmero de unidades valorativas que puede cursar el siguiente ciclo.
Puede crear un formulario como el siguiente:
38
VII. BIBLIOGRAFIA
Gutirrez, Abraham / Bravo, Gins. PHP 5 a travs de ejemplos. Editorial Alfaomega RAMA. 1ra edicin.
Mxico. Junio 2005.
Gil Rubio, Francisco Javier/Villaverde, Santiago Alonso/Tejedor Cerbel, Jorge A. Creacin de sitios web
con PHP 5. Editorial McGraw-Hill. 1ra edicin. Madrid, Espaa, 2006.
Doyle, Matt. Fundamentos de PHP Prctico. Editorial Anaya Multimedia. 1. Edicin. Madrid, Espaa.
2010.
John Coggeshall. La Biblia de PHP 5. 1ra Edicin. Editorial Anaya Multimedia. Madrid Espaa.
http://www.php.net/manual/en
39