Desarrollo de Aplicaciones Web con PHP Javier Enciso
Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript Sintaxis de JavaScript Ejemplos
Desarrollo de Aplicaciones Web con PHP Hojas de Estilos
Qué es CSS? Hojas de Estilo en Cascada (Cascading Style Sheets). Mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XML. Separa el contenido de la presentación. Los estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
Cómo funciona? (1/5) CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. h1 {color: red;} h1 {color: red;} Selector Declaración
Cómo funciona? (2/5) El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Cómo funciona? (3/5) Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>. <html> <head> <title>título</title> <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officefloats.css" /> </head> <body>... </body> </html>
Cómo funciona? (4/5) Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. <html> <head> <title>hoja de estilo interna</title> <style type="text/css"> body { } h1 { color: red; background-color: #d8da3d; font-family: Helvetica, Geneva, Arial, sans-serif; } </style> </head> <body> <h1>aplicará el estilo de letra para el Título</h1> </body> </html>
Cómo funciona? (5/5) Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
Ejemplos (1/2)
Ejemplos (2/2)
Desarrollo de Aplicaciones Web con PHP Validación de Formularios
Fundamentos de JavaScript Lenguaje de tipo Script compacto, basado en objetos y guiado por eventos diseñado específicamente. Característica: Soportado por varios navegadores Sencillo Embebido en el código HTML
Utilización de JavaScript Responder a la interacción con los elementos de los formularios. Distribuir colecciones pequeñas de información y proporcionar una interfaz amigable para mostrar los datos. Pre-procesamiento de datos en el lado del cliente antes de ser enviados al servidor. Modificar el contenido y los estilos en los buscadores modernos de manera dinámica e instantánea en respuesta a la interacción con el usuario.
Sintaxis de JavaScript (1/8) Todo el código (sentencias) está dentro de funciones definidas por el desarrollador. Las funciones se implementan entre las etiquetas: <script> </script> La llamada a una función se hace a través de un evento de un elemento del documento.
Sintaxis de JavaScript (2/8) Variables: Fuera de una función es global, sino es local. var Nombre; Arreglos: var arreglo = new Array(); arreglo[0] = 2; arreglo[1] = 1; arreglo[2] = 8;
Sintaxis de JavaScript (3/8) Operadores: Aritméticos: +, -, *, /, %, Comparación: ==,!=, >, <, >=, <=, Lógicos:!, &&, Condicionales: if (condición){ } Bloque de Instrucciones else{ } Bloque de Instrucciones
Sintaxis de JavaScript (4/8) Ciclos while( condición ){ } Bloque de Instrucciones do{ Bloque de Instrucciones } while( condición ); for( inicio; condición; incremento ){ } Bloque de Instrucciones
Sintaxis de JavaScript (5/8) Funciones function Nombre (arg 1, arg 2,, arg n){ } Bloque de Instrucciones
Sintaxis de JavaScript (6/8) Evento Manejador Descripción click señalización carga descarga focalización onclick onmouseover onload onunload onfocus El usuario pulsa sobre un elemento de form o un enlace El usuario coloca el ratón sobre una determinada area El usuario carga la página Es usuario sale de la página El usuario selecciona un elemento de un form como entrada
Sintaxis de JavaScript (7/8) Evento Manejador Descripción desfocalización edición selección onblur onchange onselect El usuario quita la selección de un elemento de un formulario como entrada El usuario cambia el valor de un elemento text, textarea o select de un formulario El usuario selecciona el campo de entrada de un formulario
Sintaxis de JavaScript (8/8) Evento Manejador Descripción Interrupción onabort El usuario interrumpe la carga de una imagen Error onerror La carga de un documento o imagen produce un error. Des-señalización onmouseout El usuario saca el ratón de un área (imagemap) o enlace. Inicialización onreset El usuario pulsa el botón de reset en un form.
Ejemplo Hola Mundo <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function HolaMundo() { alert(" Hola, mundo!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onclick="holamundo()"> </FORM> </BODY> </HTML>
Muchas Gracias