El lenguaje HTML: Principios bá · PDF fileCSS: Gestionar el aspecto de un grupo de...
Transcript of El lenguaje HTML: Principios bá · PDF fileCSS: Gestionar el aspecto de un grupo de...
LENGUAJE HTML (2)
Introducción a las páginas web dinámicas
Alex Sánchez
Contenido
Introducción Formularios CSS Javascript
Enlaces interesantes Formularios
http://www.w3.org/TR/html4/interact/forms.html
CSShttp://www.w3schools.com/css/
Programación webhttp://ingenieriasimple.com/introprogra/
Scripts
http://www.hscripts.com/index.php
Página Web
HTML – CSS – Javascript
Estructura
Contenido
Apariencia
HTML
CSS
Javascript
• Párrafos• Encabezados• Listas
•Tablas• Capas• Etc.
• Fondos• Tamaños • Etc.
Estructura• Párrafos• Encabezados• Listas
•Tablas• Capas• Etc.
Contenido• Textos• Imágenes• Enlaces
• Colores• Tipografías• Alineación
Comportamiento• Efectos• Validaciones• Automatización
• Formularios
HTML+CSS+Javascripts: Páginas dinámicas (1)
HTML básico --> páginas estáticas correctas, pero limitadas
Si el número de páginas aumenta cuesta mantener un aspecto homogéneo.
No es posible interactuar con el contenido de la página ni con el servidor,
Algunos elementos avanzados solucionan estos problemas
CSS: Gestionar el aspecto de un grupo de páginas de forma homogénea
Formularios:
Permiten introducir información que podrá enviarse a otros usuarios
Permiten instalar controles que pueden usarse para desencadenar acciones
CGIs: Permiten ejecutar programas en el servidor a partir de información proporcionada por el cliente.
Scripts: Permiten ejecutar programas en el navegador mismo. Para ello se necesita
Formularios para introducir la información
Lenguaje de scripting como Javascript, VBAscript
Formularios ¿Para qué sirven?
Elementos para Formularios Campos de Texto Casillas de Verificación Botones de opción Menús Botones Campos ocultos Campos de carga de archivos
¿Cómo se envía la información?
¿Se pueden validar los Campos?
http://www.w3.org/TR/html4/interact/forms.html
Formularios
Secciones de un documento conContenido normal, código html y ademásControles (elementos especiales) y etiquetas.
Suelen servir para suministrar InformaciónIndicación de acción
que se envia a un servidor
Formularios Elemento <FORM>
Atributos: method, action
Elemento <INPUT>
Atributo: type (text, checkbox, radio, button, hidden)
Elemento <SELECT>
Elemento <TEXTAREA>
9
The <form> tag
The <form arguments> ... </form> tag encloses form elements (and probably other HTML as well)
The arguments to form tell what to do with the user input action="url" (required)
Specifies where to send the data when the Submit button is clicked
method="get"(default) Form data is sent as a URL with ?form_data info appended to the end Can be used only if data is all ASCII and not more than 100 characters
method="post" Form data is sent in the body of the URL request Cannot be bookmarked by most browsers
target="target" Tells where to open the page sent as a result of the request target= _blank means open in a new window target= _top means use the same window
10
The <input> tag
Most, but not all, form elements use the input tag, with a type="..." argument to tell which kind of element it is type can be text, checkbox, radio, password, hidden, submit, reset,
button, file, or image
Other common input tag arguments include: name: the name of the element value: the “value” of the element; used in different ways for different
values of type readonly: the value cannot be changed disabled: the user can’t do anything with this element Other arguments are defined for the input tag but have meaning
only for certain values of type
11
Buttons
A submit button: <input type="submit" name="Submit" value="Submit">
A reset button: <input type="reset" name="Submit2" value="Reset">
A plain button: <input type="button" name="Submit3" value="Push Me">
submit: send data
reset: restore all form elements to their initial state
button: take some action as specified by JavaScript
• Note that the type is input, not “button”
12
Checkboxes
A checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked>
type: "checkbox" name: used to reference this form element from JavaScript value: value to be returned when element is checked Note that there is no text associated with the checkbox—you
have to supply text in the surrounding HTML
13
Radio buttons
Radio buttons:<br><input type="radio" name="radiobutton" value="myValue1">male<br><input type="radio" name="radiobutton" value="myValue2" checked>female
If two or more radio buttons have the same name, the user can only select one of them at a time This is how you make a radio button “group”
If you ask for the value of that name, you will get the value specified for the selected radio button
As with checkboxes, radio buttons do not contain any text
14
Drop-down menu or list
A menu or list:<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select>
Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be
selected (default is "false")
15
Hidden fields
<input type="hidden" name="hiddenField" value="nyah"> <-- right there, don't you see it?
What good is this? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesn’t need to
see (or that you don’t want her to see) The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
Ejemplo de formulario (1)
<HTML> <HEAD> <TITLE>Un formulario sencillo</TITLE> </HEAD> <BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST"> <INPUT TYPE="text" NAME="nombre"><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>
</BODY> </HTML>
Ver ejemplo
Ejemplo de formulario (2)
Ver ejemplo
<HTML> <HEAD> <TITLE>Entrada de datos a un formulario</TITLE> </HEAD> <BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST"> Texto: <INPUT TYPE="text" NAME="nombre"><BR> Password: <INPUT TYPE="password" NAME="contra"><BR> Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre <INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR> Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto <INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche
<BR><BR> <INPUT TYPE="submit"><INPUT TYPE="Reset"> </FORM>
</BODY> </HTML>
Ejercicio 1
Dirígete a la webdel curso Diseño de Materiales Multimedia_Web 2.0, tema “Formularios”
http://www.isftic.mepsyd.es/formacion/materiales/107/cd/html/html0901.html
Repasa la creación de formularios con Kompozery crea Un formulario de “contacto”que se envíe por mail Un formulario de búsqueda en googleo traducción
mediante Babylon
Hojas de Estilos CSS
Que son los CSS CSS significa “Cascading Style Sheets” y es un
sencillo sistema para enlazar estilos con elementos de HTML.
Las hojas de estilo (“Style Sheets”) son plantillas parecidas a las habituales de ofimática con una serie de reglas declaradas para los elementos a los que se aplicarán.
El “Cascading” permite definir la importancia de una regla individual (dar prioridades) con el fin de evitar conflictos cuando se intenta aplicar dos reglas distintas al mismo elemento.
Estilos CSS Antes de la aparición de los estilos, la presentación se manejaba directamente
dentro de los elementos HTML por medio de atributos. Por ejemplo:
<h2 align="center">
<font color=“blue" size=“3" face="Times New Roman, serif">
<i>Introducción a HTML. UPC-UB </i>
</font>
</h2> CSS permite separar el contenido de un documento de su presentación.
En el documento HTML:
<h2>Introducción a HTML UPC-
UB</h2>
En la hoja de estilos se define el formato
de los
encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman",
serif;
}
Contenido-Estilo-Comportamiento
La aparición de los CSS permite adoptar un nuevo paradigma de desarrollo web
HTML CSS Javascript
Contenido Estilo Comportamiento
Ventajas del uso de CSS Estandarizar la presentación de un sitio web completo.
Haciendola fácil de mantener.
Diferentes usuarios pueden contar con diferentes estilos acordes
a sus necesidades. Ejemplos:
Estilos para personas con dificultades visuales,
Estilos para dispositivos móviles,
Estilos para dispositivos monocromos,
Estilos para impresión,
Etc.
Los documentos HTML se reducen en tamaño y complejidad.
Margin (Margen)
Border (Borde)
Formatos CSS
Propiedades de fuentes
Propiedades de color y fondo
Propiedades de texto
espaciado de palabras
alineación
Propiedades de caja
Margen
Borde
Relleno
Estilos de listas
Padding (Relleno)
Contenido
Estilos CSS
Una hoja de estilos consiste en un conjunto de reglas.
Cada regla esta formada por:
El Selector (nombre del estilo)
La Declaración (define el estilo)
Propiedad
Valor
¿Qué podemos hacer con los estilos?
Redefinir estilos de Etiquetas HTML.
Crear Estilos Personalizados para
uso genérico (Clases)
Crear Estilos para un elemento
HTML específico (por Id)
h2 {
text-align: center;
color: blue;
font: italic large
"Times New Roman",
serif;
}
.textoresaltado {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: bold; /* Esto es un comentario */color: #000000;
}#logo {
background-image: url("/img/logo.gif");background-position:center; background-repeat:no-repeat;height: 50px; width: 150px;position: absolute; left: 0px; top: 0px;
}
Como incluir estilos CSS Inline Styles
Utilizando el atributo “style” se define el estilo
de un elemento HTML en forma individual.
Embedded Style
Se define la regla CSS dentro de un
documento HTML. Se puede aplicar a
cualquier elemento de ese documento.
Hojas de Estilos externas
Un archivo CSS independiente que se
encuentra referenciado en cada uno de los
documentos HTML que desean utilizarlo.
<h2 style="color: blue; background: green;">Curso HTML UCEMA
</h2> <head>
<style type="text/css"> h2 {
font-style: italic;font-weight: bold; color: blue;
} </style>
</head><body>
<h2>Curso HTML UCEMA</h2> </body>
<head>
<link rel=stylesheet type="text/css“
href=“estilos.css">
</head>
Ejercicio 2
Dirígete a la web del curso Diseño de Materiales Multimedia_Web 2.0, tema “Hojas de estilos”
http://www.isftic.mepsyd.es/formacion/materiales/107/cd/html/html07.html
Repasa la creación de hojas de estilos con Kompozer y crea una hoja de estilos que te permita dar formato a tu página web
El lenguaje Javascript
¿Qué es un lenguaje de Script? Scripting ≠ System programming
Unos no sustituyen a los otros sino que están orientados a cosas diferentes.
Extienden las capacidades de la aplicación con la que trabajan.
Raramente se usan para algoritmos y estructuras de datos complejas.
Tienden a ser simples Ausencia de tipos (o pocos). Los errores se detectan en tiempo de ejecución. Un programa puede escribir otro y ejecutarlo. Menos código y programas más flexibles.
Problemas de SEGURIDAD
Javascript Lenguaje de Script más popular. Extiende las capacidades de las páginas Web Código integrado en el HTML Se interpreta en el ordenador que recibe el
HTML, no se compila. Ejecución dinámica
Los programas y funciones no se chequean hasta que se ejecutan.
Trabaja con los elementos del HTML. No se declaran los tipos de variables. También elementos avanzados (OOP).
Ejemplos de uso de Javascript
Comprobar/validar formularios. Comprobar que se han rellenado
correctamente antes de enviarlos. Realizar cálculos simples
Índice de masa corporal.Cálculo de tamaño muestral, curvas ROC,..Dotar de interactividad una página web.Juegos...
Generalidades de JavaScript Modelo orientado al WWW
Elementos de una página HTML pueden causar un evento que ejecutará una acción
Esa acción se ejecutará a través de una serie de sentencias JavaScript
Comandos de JavaScript: Variables Expresiones Estructuras de control Funciones (bloques de sentencias) Clases, objetos y arrays (agrupaciones de datos)
Sintaxis
Atributo SRC: fichero código fuente
Colocándolo en la sección <HEAD> del HTML se asegura que todo el código haya sido definido antes del <BODY> del documento.
<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>
Etiqueta <SCRIPT> </SCRIPT>
<SCRIPT type="text/javascript"> function valor_abs(form) { var num = eval(form.expr.value) if (num >= 0) form.result.value = num else num = -num form.result.value = num }</SCRIPT>
Donde incluir el Javascript Las instrucciones pueden ir dentro del elemento “script”:
<script language="JavaScript" type="text/JavaScript"><!--functionAbroVentana(URL,nombre,features) { //Esto es un comentario
window.open(URL,nombre,features);}//--></script>
Las funciones Javascript pueden estar en archivos independientes:<script language="JavaScript" src="archivo.js"> </script>
El código Javascript también se puede incluir directamente en un evento asociado a algún elemento del documento. Por ejemplo:<inputtype=“button" onclick="alert('Gracias por su click');return false;" value="Click">
Modelo de Eventos de JavaScript Javascript es un lenguaje basado en “eventos”: acciones concretas que al suceder pueden asociarse a la ejecución de comandos. Los eventos suceden a tres niveles:
A nivel del documento HTML A nivel de un formulario individual A nivel de un elemento de un formulario
El evento es gestionado por una sección de código en JavaScript (Gestor de Eventos)
<BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">
<FORM name="nombre_del_formulario" ... onSubmit="función_o_sentencia">
<INPUT type="button" name="mycheck" value="HA!" onClick= "alert(‘Te he dicho que no me aprietes’)">
Gestores de Eventos (Event Handlers)
Evento Ocurre Cuando Gestorblur El usuario quita el cursor de un elemento de formulario onBlur
click El usuario clica un link o un elemento de formulario onClick
change El usuario cambia el valor de un texto, un área de texto o selecciona un elemento.
onChange
focus El usuario coloca el cursor en un elemento de formulario. onFocus
load El usuario carga una página en el Navegador onLoad
Mouseover El usuario mueve el ratón sobre un link onMouseOver
Select El usuario selecciona un campo del elemento de un formulario
onSelect
Submit Se envía un formulario onSubmit
Unload Se descarga la página onUnload
Clases en Javascript Clases Predefinidas
Clase String: Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase String
Clase Math: Se usa para efectuar cálculos matemáticos Clase Date: Para el manejo de fechas y horas
Clases del Browser o Navegador: Tienen que ver con la navegación
Clases del Documento HTML–Están asociadas con cualquier elemento de una página Web (link, ancla, formulario, etc)
Clases definidas por el usuario
Jerarquía de clases
Ejercicio 3
Crear un documento html que incluya un javascript que realice algún sencillo cálculo estadísticoCálculo de tamaño muestralCálculo de la potencia....