Nombre del producto (caja de texto)
valor del producto (caja de texto)
Botón aceptar (cuando se oprima este botón
Nos debe aparecer abajo el nombre del producto que escribimos primero, el valor del producto y el valor del producto con el iva ya fuera 16% o 19%)
Escogio a la azar 2 personas de cada grupo y una entregaba la memoria USB donde debía estar el proyecto Guardado y tener informacion, estar actualizada y la otra persona entregaba el cuaderno o carpeta Actualizado
Los grupos de trabajo asignados el día de clase NO SE DEBEN REUNIR, debido a que no existirá trabajo de proyecto del periodo para trabajar en casa.
El trabajo de proyecto grupal se realizará en horas de clase.
Se publicaran los ejercicios(herramientas funcionales) propios que se necesitan para la construcción del proyecto.
Cada integrante debe descargar los ejercicios.
Dichos ejercicios, cada alumno debe realizarle modificaciones y así entender la mecanica de los mismos.
Los ejercicios deben estar almacenados en memoria usb personal.
Si los integrantes de un grupo no alcanzan a terminar el proyecto, el docente se queda con el trabajo y a la siguiente clase el docente le entrega nuevamente el trabajo consignado y así podrá terminar el proyecto.
Si algún integrante de cualquier grupo:
No descarga por su propio medio los ejercicios, ni realiza los ejercicios así no le funcionen, el estudiante se hace acreedor de un trabajo de proyecto individual, como tambien queda registrado automáticamente para la realización del acumulativo.
No participa en la realización del proyecto, queda registrado automáticamente para la realización del acumulativo.
No tiene memoria usb de los ejercicios(herramientas) indicadas en esta publicación, queda registrado automáticamente para la realización del acumulativo.
Si en la realización de los proyectos no alcanzamos a realizar las exposiciones, el criterio de evaluación será 100% escrito individual.
Si todo el grado/grupo trabaja a favor del conocimiento y se observa que TODOS han trabajado en sus respectivos proyectos de su grupo, le realizaré a dicho grado/grupo una EXECELENTE Oferta de Nota.
-INDICACIONES
GHG Nombre de la carpeta del proyecto debe llamarse: 10a_grupo##
Debe tener un templete.
Debe tener completa navegación.
(Derechos.html )debe ir vinculada a la pagina principal, en este modulo debe encontrarse la foto de cada uno de los integrantes al lado derecho de la foto sus nombres y apellidos y debajo debe estar la url del blog de quien corresponde.
Todos los tittle del template deben tener como nombre:---> proyectogrupo_10a
HTML5 nos permite definir patrones de validación para los diferentes campos de un formulario sin utilizar ni una sola línea de javascript. Esta característica nos permite ahorrarnos algunas solicitudes inadecuadas y el consiguiente gasto innecesario de recursos del servidor, aunque sin duda la principal ventaja es la mejora de la experiencia del usuario.
Es importante anotar que la validación de formularios con HTML5, al igual que la validación con javascript, se realiza en el lado del cliente (navegador web) y, por tanto, puede ser modificada por el usuario o ignorada totalmente. Esto quiere decir que las cuestiones relativas a la seguridad del formulario no deben basarse en esta validación ni es sustituta de la validación server-side.
Métodos de validación de formularios con HTML5
HTML5 ofrece diferentes métodos de validación de formularios client-side utilizando diferentes atributos para el elemento <input>. Los más destacados son type, pattern y required. Veamos cada uno de estos atributos y ejemplos de uso. Las imágenes ilustrativas son obtenidas utilizando el navegador firefox y pueden variar si se utiliza otro navegador.
El atributo type
Con el atributo type indicamos al navegador el tipo de control que debe ejercer sobre el elemento <input>. Ya en HTML4 nos acostumbramos a <input type="text" /> pero a partir de HTML5 podemos utilizar una amplia gama:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Si los datos introducidos en el campo del formulario no coinciden con el tipo especificado, el navegador lanzará un aviso al usuario y el formulario no se enviará. Por ejemplo, podemos requerir que se introduzca una dirección de correo electrónico:
<inputtype="email"name="email">
Dará el siguiente aviso si se introduce un email no válido:
Validación email con HTML5 type=”email”
Es el propio navegador el que valida los datos introducidos según el tipo especificado. La validación para algunos valores de type puede ser muy diferente de unos países a otros y por ello algunos tipos no son universalmente soportados. Por ejemplo, el type="tel", utilizado para números de teléfono, necesita un patrón de validación diferente para diferentes países y regiones. La solución para seguir con HTML5 y no utilizar javascript es definir patrones de validación propios con el atributo pattern.
El atributo pattern
Este atributo es sencillamente espectacular. Nos permite definir patrones de validación client-side personalizados sin prácticamente límite. El valor de este atributo ha de ser un formato de datos con notación de expresión regular javascript. Las expresiones regulares, conocidas como regex (del inglés regular expression), son incluidas en prácticamente todos los lenguajes de programación y permiten validar una cadena de texto frente a palabras, caracteres y patrones de una forma muy flexible a la vez que concisa.
Al poner un regex como valor del atributo pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario. Familiarizarse con las expresiones regulares puede llevar algún tiempo y práctica, puedes empezar con la documentación para regex en javascript ofrecida por mozilla.
Por ejemplo, en España un número de teléfono fijo comienza por 9 o por 8 y un número móvil comienza por 6 o por 7 y en ambos casos le sigue un número de 8 dígitos. Un regex para aceptar números de teléfono de España podría ser:
<labelfor="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label><inputtype="text"pattern="^[9|8|7|6]\d{8}$">
Este regex dice: aceptar sólo un número que comiencen por 9, 8, 6 o 7 seguido de 8 dígitos. En caso de introducir un número incorrecto saldría el siguiente aviso:
Validación teléfono español con HTML5 y el atributo pattern
Para utilizar el atributo pattern es recomendable utilizar el type="text" y no un type de los predefinidos en HTML5 que ya cuentan con patrones de validación en el propio navegador. Mezclar ambos puede llevar a resultados inesperados.
Personalizar avisos con el atributo title
En los ejemplos anteriores los avisos mostrados eran elegidos por el navegador. A través del atributo title podemos personalizar estos avisos. Por ejemplo:
<inputtype="text"name="twitter_username"pattern="^@?(\w){1,15}$"title="Este no parece un usuario de twitter válido">
Con el pattern anterior se aceptaría una cadena de texto de 15 letras que no contenga caracteres especiales (ñ, vocales acentuadas, etc). La cadena puede comenzar por @ o no. Con esta regla se aceptarían sólo nombres de usuario de twitter válidos y se lanzaría el siguiente aviso personalizado si se introduce uno no válido:
Validación usuario twitter con HTML5 y el atributo pattern con aviso personalizado
El atributo required
Tal y como su nombre indica, este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner required o required="required". Por ejemplo:
<inputtype="text"name="twitter_username"pattern="^@?(\w){1,15}$"title="Este no parece un usuario de twitter válido"required>
Si el <input> anterior se deja vacío se mostrará el siguiente aviso:
Aviso de campo obligatorio con atributo required en HTML5
Recuerda que:
La validación de formularios con HTML5 ahorrará bastante trabajo de desarrollo al no tener que validar con javascript
El soporte entre distintos navegadores está bastante extendido, salvo algunos tipos que requieren la especificación de expresiones regulares para su validación
A través del atributo pattern las posibilidades son infinitas y podemos validar cualquier formato de datos que deseemos
La seguridad de la validación con HTML5 es igual que la seguridad de la validación con javascript: ninguna. Ambas son validaciones client-side y nunca deben sustituir la validación server-side
Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.
Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a› /* La modal */
‹div id=”modal”›
‹a href=”#cerrar”›‹/a›
‹div id=”modalContent”›
‹h1›Soy una ventana modal‹/h1›
‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
‹a href=”#cerrar”›X‹/a›
‹/div›
‹/div›
Código
CSS: /* Creamos unos estilos para el botón */ .btn{ position:relative; padding:8px 16px; font-family:'psychotik'; font-size:1.2em; font-weight:normal; color:#fff; text-shadow:none; border-radius:16px; background:#00A6B6; box-shadow:inset 2px 2px 1px #007f8b; } .btn:hover{ background:#FF9C00; box-shadow:inset 2px 2px 1px #995f02; } /* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */ #modalContent{ position:absolute; top:50%; left:50%; z-index:6; margin:-2% 0px 0px -150px; float:left; width:300px; color:#fff; line-height:22px; padding:15px; border-radius:5px; background:#00A6B6; border:1px solid #fff; box-shadow:0px 2px 1px #999; } /* ... los estilos de la ventana central ... */ #modal{ position:fixed; top:0px; left:0px; z-index:5; float:left; width:100%; height:100%; background:rgba(0,0,0,0.2); display:none; opacity:0; } /* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */ #modal > a{ position:fixed; top:0px; left:0px; z-index:1; float:left; width:100%; height:100%; } El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal :target{ display:block!important; opacity:1!important; } /* Un botón de cerrar para no despistar al usuario */ #modalContent > a{ position:absolute; top:-4px; right:-4px; color:#00A6B6; border-radius:2px; background:#fff; padding:4px;
Hemos visto que podemos asociar un fragmento de programa a un clic sobre un elemento de una página web. El problema es que si el fragmento es muy grande, el resultado puede resultar difícil de leer. Una alternativa más compacta es crear pequeños "bloques de programa", que llamaremos funciones.
5.1. Una función básica
En su forma más básica, una función nos permite agrupar varias órdenes y dar un nombre a ese conjunto. Así, el ejemplo del apartado 4.5 se podría reescribir así:
<html>
<body>
<script>
function calcularSuma()
{
var casilla1=document.getElementById("num1");
var n1 = casilla1.value;
var casilla2=document.getElementById("num2");
var n2 = casilla2.value;
var resultado=document.getElementById("resultado");
resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
resultado.style.color = "blue";
}
</script>
<form>
Primer numero:
<input type="text" name="num1" id="num1" />
<br />
Segundo numero:
<input type="text" name="num2" id="num2" />
<br />
<p id="resultado">Suma: </p>
<button type="button" onclick='calcularSuma()'>Calcular suma</button>
</form>
</body>
</html>
5.2. Funciones "personalizables"
No siempre querremos que una función maneje los mismos datos. Por ejemplo, si queremos que una función compruebe si los datos que el usuario ha introducido en una casilla son válidos, es innecesario crear una función para cada casilla. Es preferible crear una única función a la que le podamos indicar qué casilla concreta ha de verificar. Para ese, podemos indicar "parámetros" a la función, que detallaremos en el paréntesis que sigue a su nombre, así:
<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
var casilla1=document.getElementById( numero1 );
var n1 = casilla1.value;
var casilla2=document.getElementById( numero2 );
var n2 = casilla2.value;
var resultado=document.getElementById( posicionResultado );
resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
resultado.style.color = "blue";
}
</script>
<form>
Primer numero:
<input type="text" name="num1" id="num1" />
<br />
Segundo numero:
<input type="text" name="num2" id="num2" />
<br />
<p id="resultado">Suma: </p>
<button type="button"
onclick="calcularSuma('num1', 'num2', 'resultado');">
Calcular suma</button>
</form>
</body>
</html>
En este caso, la función "calcularSuma" recibe tres datos: la primera casilla, la segunda casilla y la posición en la que queremos mostrar el resultado; al llamar a la función, deberemos rellenar esos detalles con los datos reales de las casillas que queramos usar. Así, podemos aplicar esa misma función a bloques distintos de casillas, como en este ejemplo:
<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
var casilla1=document.getElementById( numero1 );
var n1 = casilla1.value;
var casilla2=document.getElementById( numero2 );
var n2 = casilla2.value;
var resultado=document.getElementById( posicionResultado );
resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
resultado.style.color = "blue";
}
</script>
<form>
Primer numero:
<input type="text" name="num1" id="num1" />
<br />
Segundo numero:
<input type="text" name="num2" id="num2" />
<br />
<p id="resultado">Suma: </p>
<button type="button"
onclick="calcularSuma('num1', 'num2', 'resultado');">
Calcular suma</button>
</form>
<form>
Primer numero alternativo:
<input type="text" name="num3" id="num3" />
<br />
Segundo numero alternativo:
<input type="text" name="num4" id="num4" />
<br />
<p id="resultado2">Suma: </p>
<button type="button"
onclick="calcularSuma('num3', 'num4', 'resultado2');">
Calcular suma</button>
</form>
</body>
</html>
Manual JavaScript. Funciones
<html>
<head>
<script type="text/javascript">
function ver_confirm()
{
var name=confirm("Pulsa un botón")
if (name==true)
{
document.write("Has pulsado el botón Aceptar");
}
else
{
document.write("Has pulsado el botón Cancelar");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="ver_confirm()"
value="Mostrar una ventana de confirmación">
</form>
</body>
</html>
En este ejemplo abriremos una ventana permitiendo controlar su aspecto:
El primer parámetro de open es la dirección que queremos mostrar en la ventana. El segundo es el nombre que queremos darle a la ventana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y último parámetro nos permite definir el aspecto de la ventana según los datos que le indicamos.
El siguiente ejemplo nos muestra el uso de location para conseguir la dirección de la página actual en la que nos encontramos o bien ir a una página diferente:
Nota: Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior. En el siguiente ejemplo vemos como avanzar a una posición específica de la ventana:
En el siguiente ejemplo, vemos como retrasar la ejecución del programa durante un tiempo determinado:
<html>
<head>
<script language="javascript">
function timeout()
{
setTimeout("alert('Esta ventana aparece un seg. después _
de que hayas pulsado el botón')", 1000)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="timeout()"
value="Cuenta atrás">
</form>
</body>
</html>
Un par de detalles sobre este último ejemplo: La función setTimeout tiene dos parámetros como puede verse, una cadena de texto que representa un código JavaScript a ejecutar cuando hayan pasado el número de milisegundos del segundo parámetro.
Para terminar esta galería de ejemplos, veamos como cambiar una imagen por otra en la página:
La propiedad más interesante de los objetos Web a los que podemos acceder, no forma parte del Standard oficial de HTML.
Se trata de la propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método de acceso rápido al contenido completo de un contenedor en HTML. Rápidamente el resto de exploradores lo añadieron en su soporte de lenguaje.
Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.
Por contenedor entendemos aquello que está entre las cláusulas < div > y < /div >.
El elemento DIV define un contenedor genérico, el cuál permite a los programadores definir estilos o bloques de contenido.
Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste ultimo cada vez se emplea menos en favor de las CSS.
Ejemplos de uso de DIV.
<divid="primero"><p>Algún texto.</p><p>Un poco más de texto.</p></div><divid="segundo"></div>
El primero de los ejemplos muestra 2 párrafos de texto en la página, mientras que el Segundo no muestra nada; simplemente es un contenedor vacío en estos momentos.
Podemos recuperar el contenido de DIV de la siguiente forma:
