Introducción al desarrollo web (idesweb) - 3 a ed.
|
|
|
- Víctor Franco Castellanos
- hace 7 años
- Vistas:
Transcripción
1 Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 7: JavaScript, Modelo de Objetos de Documento y cookies 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido. Aprender a seleccionar un estilo alternativo mediante el DOM y JavaScript. Conocer el concepto de cookie y sus posibles usos. Aprender a utilizar las cookies con JavaScript. 2. Recursos Qué son las cookies? RFC 2965 HTTP State Management Mechanism 1 : documento oficial que especifica el uso de las cookies para lograr una comunicación con HTTP que conserve el estado. Cookie 2 : definición en la Wikipedia de cookie, explica qué son, cómo se usan, algunos inconvenientes y alternativas a su uso. Cookie Central 3 : explica qué son las cookies y contiene ejemplos de uso. Todo sobre la cookies 4 : explica qué son las cookies y contiene ejemplos de uso en JavaScript. Cómo se emplean las cookies con JavaScript? JavaScript Cookies 5 : cómo utilizar las cookies en JavaScript. Las cookies 6 : explicación en español del uso de las cookies en JavaScript. 3. Qué tengo que hacer? En la segunda práctica de CSS realizaste un estilo alternativo para tu sitio web. Algunos navegadores permiten a través de su menú seleccionar el estilo alternativo, mientras que otros navegadores como Microsoft Internet Explorer 6 o 7 no lo permiten 7. Además, la mayoría de los usuarios desconocen que existe la posibilidad de cambiar el estilo de una página web (no saben que existe esa opción en el navegador web). Por eso, en esta práctica debes permitir que el usuario seleccione el estilo alternativo que desea desde la propia página web para que esta opción esté disponible en cualquier navegador y sea claramente visible para el usuario. Por otro lado, cuando se selecciona un estilo alternativo, al pasar de una página web a otra de un mismo sitio web a través de un enlace no se conserva la selección del estilo alternativo y se muestra el estilo principal. Tienes que emplear las cookies para conservar el estilo seleccionado entre diferentes páginas e incluso entre diferentes visitas al sitio web Por fin, Microsoft Internet Explorer 8 ya incorpora está característica, aunque no hace exactamente lo mismo que hacen otros navegadores. 1
2 4. Cómo lo hago? 4.1. Selección de un estilo alternativo A través del DOM podemos acceder al atributo disabled de la etiqueta <link/> que permite desactivar 8 (valor true) o activar (valor false) una hoja de estilo enlazada mediante la etiqueta <link/>. Una primera propuesta de código JavaScript para realizar el cambio podría ser lo siguiente, donde la función estilo() recibe un parámetro que indica el estilo que se quiere activar (y, por tanto, todos los demás se tienen que desactivar): <script type="text/javascript"> function estilo(titulo) { var arraylink = document.getelementsbytagname( link ); for(var i = 0; i < arraylink.length; i++) { if(arraylink[i].getattribute( title ) == titulo) arraylink[i].disabled = false; else arraylink[i].disabled = true; Sin embargo, este código puede fallar ya que la etiqueta <link/> tiene otros usos además de emplearse para enlazar una hoja de estilo. Además, qué pasa con el estilo predeterminado que siempre se tiene que visualizar aunque se elija otro estilo alternativo? Tal como está escrito el código, el estilo predeterminado se desactivará la primera vez que se cambie de estilo alternativo. La siguiente página es un ejemplo completo con una función de selección de estilo más compleja que contempla los problemas comentados anteriormente. En este ejemplo, un usuario puede seleccionar un estilo entre dos posibles estilos, además existe un estilo predeterminado y un estilo para sólo impresión: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="es" lang="es"> <head> <title>página con varios estilos</title> <link rel="stylesheet" type="text/css" href="predeterminado.css" media="screen" /> <link rel="stylesheet" type="text/css" href="principal.css" media="screen" title="principal" /> <link rel="alternate stylesheet" type="text/css" href="secundario.css" media="screen" title="secundario" /> <link rel="stylesheet" type="text/css" href="impresion.css" media="print" /> <script type="text/javascript"> function estilo(titulo) { var arraylink = document.getelementsbytagname( link ); for(var i = 0; i < arraylink.length; i++) { // Sólo aquellas etiquetas link que hacen referencia a un estilo // y que no sea para impresión if(arraylink[i].getattribute( rel )!= null && arraylink[i].getattribute( rel ).indexof( stylesheet )!= -1 && arraylink[i].getattribute( media )!= print ) { // Si tiene título es un estilo preferido o alternativo, 8 Hay que tener cuidado con la propiedad disabled (desactivado) porque va al revés de lo que se podría pensar: para activar la etiqueta hay que poner su valor a false, y para desactivarla a true. 2
3 // si no tiene título es un estilo // predeterminado y siempre tiene que utilizarse if(arraylink[i].getattribute( title )!= null && arraylink[i].getattribute( title ).length > 0) { if(arraylink[i].getattribute( title ) == titulo) arraylink[i].disabled = false; else arraylink[i].disabled = true; </head> <body> <ul> <li><a href="javascript:estilo( Principal )">Principal</a></li> <li><a href="javascript:estilo( Secundario )">Secundario</a></li> </ul> <p> Una página web sencilla. </p> </body> </html> A continuación se muestra el código de la hoja de estilo predeterminada y de las dos hojas de estilo alternativas. El código de la hoja de estilo predeterminada, almacenada en el fichero predeterminado.css es: /* Estilo predeterminado */ html { font-size: 30px; p { border: 5px solid #FF0000; El código de la hoja de estilo principal, almacenada en el fichero principal.css es: /* Estilo principal */ html { background-color: blue; color: white; font-family: Arial; ul { list-style-type: none; background-color: white; color: red; li { display: inline; a { 3
4 color: red; El código de la hoja de estilo secundaria, almacenada en el fichero secundario.css: /* Estilo secundario */ html { background: black; color: yellow; ul { list-style-type: none; li { display: inline; a { color: green; font-weight: bolder; p { font-size: 15px; En la Figura 1 se muestra cómo se ve la página web con el estilo principal y en la Figura 2 se muestra con el estilo secundario Cookies Una cookie es un fragmento de información que un navegador web almacena en el disco duro del visitante a una página web. La información se almacena a petición del servidor web, ya sea directamente desde la propia página web con JavaScript o desde el servidor web mediante las cabeceras HTTP, que pueden ser generadas desde un lenguaje de web scripting como PHP. La información almacenada en una cookie puede ser recuperada por el servidor web en posteriores visitas a la misma página web. Las cookies resuelven un grave problema del protocolo HTTP: al ser un protocolo de comunicación sin estado (stateless), no es capaz de mantener información persistente entre diferentes peticiones. Gracias a las cookies se puede compartir información entre distintas páginas de un sitio web o incluso en la misma página web pero en diferentes instantes de tiempo. En JavaScript, se puede acceder a las cookies a través de la propiedad cookie del objeto document. Esta propiedad permite acceder a todas las cookies de una página web, pero el acceso no es directo, ya que la propiedad cookie devuelve una única cadena que contiene todas las cookies de la página. Para acceder a una cookie concreta, es necesario analizar la cadena para localizar su valor. La siguiente página de ejemplo contiene las funciones setcookie() y getcookie() que facilitan el acceso a las cookies en JavaScript. La función setcookie() recibe tres parámetros: el nombre de la cookie (c_name), el valor de la cookie (value) y la fecha de caducidad como el número de días a partir de la fecha actual (expiredays). La función getcookie() recibe sólo un parámetro, el nombre de la cookie que se quiere recuperar (c_name). En este ejemplo se emplea un cookie para almacenar la fecha de la última visita a la página web; la cookie tiene una validez de un año (365 días). <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="es" lang="es"> <head> <title>ejemplo de uso de cookies</title> 4
5 Figura 1: Estilo principal Figura 2: Estilo secundario 5
6 <script type="text/javascript"> // Código de function setcookie(c_name, value, expiredays) { var exdate = new Date(); exdate.setdate(exdate.getdate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null)? "" : ";expires="+ exdate.togmtstring()); function getcookie(c_name) { if(document.cookie.length > 0) { c_start = document.cookie.indexof(c_name + "="); if(c_start!= -1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexof(";", c_start); if(c_end == -1) c_end = document.cookie.length; return unescape(document.cookie.substring(c_start, c_end)); return ""; </head> <body> <p> <script type="text/javascript"> var ultimavez = getcookie( ultimavez ); if(ultimavez!= null && ultimavez!= "") { document.writeln("tu última visita fue: " + ultimavez); setcookie( ultimavez, Date(), 365); else { document.writeln("bienvenido por primera vez a este sitio web"); setcookie( ultimavez, Date(), 365); </p> </body> </html> Para borrar una cookie, se tiene que asignar a la cookie una fecha de caducidad (expires) en el pasado, es decir, una fecha anterior a la actual. 5. Recomendaciones La página web HTML DOM Link Object 9 explica las propiedades de la etiqueta <link/> que son accesibles a través del DOM. En el ejemplo de este enunciado, la lista de estilos que puede seleccionar el usuario está escrita directamente en la página web. Si se añade un nuevo estilo alternativo, es necesario añadirlo a mano a la lista de selección. Se puede automatizar el proceso, es decir, se puede crear de forma automática la lista de estilos que puede seleccionar el usuario? 9 6
7 Cuidado! Por defecto, Google Chrome no proporciona soporte para el manejo de cookies a nivel local 10 (file://). Para realizar esta práctica, puedes activar el soporte de las cookies a nivel local con el modificador --enable-file-cookies al ejecutar Google Chrome o, mucho más sencillo, puedes usar otro navegador. 10 Support cookies on file://: 7
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 8: PHP 2 (cookies y sesiones) 1. Objetivos Conocer el concepto de cookie y sus posibles usos. Aprender a utilizar las cookies con PHP. Conocer el concepto
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 5: JavaScript: expresiones regulares y el Modelo de Objetos de Documento 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido.
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Programa Saiotek 2006 SMARTLAB. Entorno de Trabajo Inteligente Colaborativo y Programable
Programa Saiotek 2006 SMARTLAB Entorno de Trabajo Inteligente Colaborativo y Programable Manual del Programador de Gadgets correspondientes a Servicios Avanzados en SmartLab Manual del Programador de
Laboratorio de Aplicaciones Telemáticas (Curso 2009/2010)
Breve introducción a la Web y XHTML Laboratorio de Aplicaciones Telemáticas (Curso 2009/2010) Jesús Arias Fisteus jaf@it.uc3m.es Breve introducción a la Web y XHTML p. 1 La Web World Wide Web (abreviado
Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0
Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0 Universidad de Colima México Departamento de Lenguajes y Sistemas Informáticos Pautas de accesibilidad al contenido en la Web 1.0: paso a paso Sergio Luján
Hojas de estilo. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
Hojas de estilo CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR Hojas de estilo Las hojas de estilo son un gran avance para los diseñadores, ya que expanden su
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 4: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en
DESARROLLO WEB EN ENTORNO CLIENTE
DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 1: Selección de arquitecturas y herramientas de programación Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández
Introducción. Qué es CSS?
Introducción Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar
Aplicaciones Web XHTML+CSS. David Cabrero Souto. Grupo MADS (http://www.grupomads.org/) Universidade da Coruña
Aplicaciones Web XHTML+CSS David Cabrero Souto Grupo MADS (http://www.grupomads.org/) Universidade da Coruña W3C Establece estándares: recomendaciones. HTML 4.0 XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMS
Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple
Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple
En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea
HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir
Dar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
Temario Programación Web para Web
Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS
ELECTIVA FE I. Tema 3: Introducción a las hojas
Tema 3: Introducción a las hojas de estilo en cascada CSS Qué son las hojas de estilo en cascada o CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
Programación Hipermedia I
Programación Hipermedia I Práctica 5: JavaScript 1. Objetivos Aprender el lenguaje de programación JavaScript. Aprender a manejar el DOM de una página web para acceder a su contenido. Aprender a validar
Aplicaciones Ricas en Internet. Unidad 1. AJAX. Apuntes AJAX
Aplicaciones Ricas en Internet. Unidad 1. AJAX Apuntes AJAX Es la única de las plataformas basada en estándares y que no posee dueño. Ajax es la sigla de asynchronous JavaScript And XML (JavaScript asincrónico
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
XHTML. Tecnologías Web
XHTML Tecnologías Web XHTML (EXtensible Hypertext Markup Languange) http://www.w3.org/tr/xhtml1/ El objetivo del XHTML es reemplazar a HTML Introducción al XHTML HTML 4.01 es la última especificación de
DHTML: Parte 2 DOM. Introducción al desarrollo web. Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)
DHTML: Parte 2 Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España) IDW-DOM-DHTML-2 Contacto http://www.7-days.es laurasirco@gmail.com DHTML Dynamic HTML (HTML Dinámico)
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
Desarrollo de Aplicaciones Web con PHP. Javier Enciso
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
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
Introducción a las aplicaciones WEB
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 3 de mayo de 2010 Qué es Internet? I LAN: Local Area Network, red de ámbito local. Qué es Internet? II Qué es Internet?
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 12: PHP 6 (acceso a una base de datos con mysqli y ADOdb) 1. Objetivos Aprender a acceder a una base de datos desde PHP con mysqli. Aprender a acceder
DISEÑO Y ELABORACIÓN DE PÁGINAS WEB
2015 DISEÑO Y ELABORACIÓN DE PÁGINAS WEB PROFESORA: ARIADNA HERNÁNDEZ ESCAMILLA 20/02/2015 Unidad de aprendizaje: Desarrollo de páginas estáticas Práctica no.1 Propósito de la práctica Insertar texto en
Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones
Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones 4.3.1 Manejo de Cookies 4.3.2 Manejo de Sesiones 4.3.3 Aplicación basada en sesiones Índice: Tema 4.3 4.3 Aplicaciones basadas en Sesiones 4.3.1 Manejo
XML: HTML y XHTML. Sergio Luján Mora XML-03
XML: HTML y XHTML Sergio Luján Mora sergio.lujan@ua.es XML-03 Vídeo de esta presentación Puedes ver esta presentación en vídeo: http://www.youtube.com/watch?v=edtgmwvngjs XHTML es el lenguaje de marcado
DESARROLLO WEB EN ENTORNO CLIENTE
DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 7: Utilización de Mecanismos de Comunicación Asíncrona Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández
Boletín I de ASP.Net. Conceptos básicos.
con Herramientas Visuales. Curso 06/07. 1 / 6 Boletín I de ASP.Net. Conceptos básicos. El objetivo de este boletín es introducirnos en ASP.Net, para ello el primer paso que vamos a dar es crear una aplicación
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
III. Hojas de estilo en cascada (CSS)
III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS
SUBRAYAR CON MARCATEXTO EL PARRAFO DONDE ENCONTRÓ LA PREGUNTA LAS RESPUESTAS LAS ENCUENTRAS DE LA PAG 26 A LA 96 DEBE COPIAR PREGUNTA Y RESPUESTA
TAREA NO 1 INTRODUCCIÓN A HTML5 Y CSS3 PRIMERO BÁSICO PROF. VICTOR AQUINO URRUTIA CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (TICS) CICLO: 2017 ------------------------------------------------------------------------------------------
Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script
Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script Contenido Presentación 3 Las aplicaciones móviles web o web apps: 5 El HTML 6 El CSS 9 El Java Script 10 Herramientas para
Sintaxis de CSS CSS ({ })
Qué es CSS? CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla. CSS nos permite controlar el estilo y el
CSS. Contenido. Programación en Internet Curso Introducción Sintaxis. Cajas Posicionamiento. Programación en Internet
Departamento de Lenguajes y Sistemas Informáticos CSS Programación en Internet Curso 2006-2007 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades Colores Cajas Posicionamiento Contenido
Universidad de Chile - Magister Artes Mediales ARTE / INTERNET. Clase 4: HTML
Universidad de Chile - Magister Artes Mediales ARTE / INTERNET Clase 4: HTML UNIDADES WEB html {} css lenguaje de las paginas web lenguaje de estilos visuales (){} js php lenguaje interactivo del
FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E)
APRENDERAPROGRAMAR.COM FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero
MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos
Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación Contenido curso practico; LENGUAJE
Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
Pregunta 4: En HTML, para definir una línea horizontal de separación se emplea. a) <dd> b) <hr> c) <pre> d) <xmp>
HTML completo Pregunta 1: En HTML, para definir una línea horizontal de separación se emplea a) b) c) d) Pregunta 2: En HTML, una tabla de datos emplea las siguientes etiquetas a)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
Práctica 2: Diseño web inicial. HTML avanzado.
Universitat de València. Departamento de Informática Informática II Práctica 2: Diseño web inicial. HTML avanzado. Página 1 1. Introducción y objetivos Introducción En esta práctica el alumno tendrá un
HTML Introducción. 2. Nuevos Conceptos
HTML 5 1. Introducción HTML5 es el lenguaje de etiquetas que permite diseñar documentos web estáticos la cual ofrece (a diferencia de las versiones anteriores) un conjunto de funciones que permitirá dar
ING. YIM ISAIAS APESTEGUI FLORENTINO
1 2 CAPÍTULO 1. INTRODUCCIÓN 1.1. Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior. 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre:
Introducción a CSS Javier Eguíluz Pérez
Introducción a CSS Javier Eguíluz Pérez AVISO IMPORTANTE El contenido de este libro es provisional, ya que sus contenidos se siguen revisando y actualizando con frecuencia. En el sitio web siempre se encuentra
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
JAV JA A V S A C S R C I R P I T
JAVASCRIPT Introducción Introducción JavaScript es un lenguaje de programación que se utiliza principalmente para crear paginas web dinámicas. i Una pagina web dinámica incorpora efectos en el texto, animaciones,
HTML completo. Pregunta 1: Pregunta 2: Pregunta 3: Pregunta 4:
HTML completo Pregunta 1: En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea a) El atributo tab b) El atributo tabindex c) El atributo alt d) No se puede Pregunta
Introducción a la accesibilidad web
Introducción a la accesibilidad web Sergio Luján Mora PAUTAS DE ACCESIBILIDAD AL CONTENIDO WEB 1.0 PASO A PASO 1 Contenido Imágenes Colores Estructura Presentación Idioma Enlaces Tablas Formularios Imágenes
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella
Node.JS Raspberry Pi (RPi) 2015/05/08 Juan V. Capella Contenido Objetivo Introducción Operadores Tipos de datos Funciones Networking armpower.blogs.upv.es 2 Objetivo Aprender a instalar Node.js Conocer
Estructura básica de un documento de HTML5
Estructura básica de un documento de HTML5 Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy fácil de hacer ya que HTML5 tiende a ser una estructura
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Selector universal Se utiliza para seleccionar todos los elementos de la página. * { } margin: 0; padding:
Manual de v2cms v2cms v1.01
Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una
Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Selector
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
CSS. Rogelio Ferreira Escutia
CSS Rogelio Ferreira Escutia Definición La hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML
JavaScript,, AJAX y otras tecnologías web. Área de Ingeniería Telemática
JavaScript,, AJAX y otras tecnologías Contenidos JavaScript AJAX Flash 2 JavaScript Lenguaje interpretado como PHP, pero se ejecuta en cliente no en servidor Sintaxis semejante a la del lenguaje Java y
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
TEMA 10: Lo que NO hay que hacer
TEMA 10: Lo que NO hay que hacer Introducción...1 Mezclar módulos...1 No crear una estructura de clases...3 Insertar la logica en los aspx...3 Gestionar los eventos en Page_Load...3 Utilizar Response.Write...4
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Introducción a la accesibilidad web
Introducción a la accesibilidad web Sergio Luján Mora Profesor visitante PAUTAS DE ACCESIBILIDAD AL CONTENIDO WEB 1.0 PASO A PASO Contenido Imágenes Colores Estructura Presentación Idioma Enlaces Tablas
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos
Grupo de Sistemas y Comunicaciones
Laboratorio de Servicios Web Grupo de Sistemas y Comunicaciones gsyc-profes@gsyc.escet.urjc.es Curso 2008-2009 1 (c) GSyC, Grupo de Sistemas y Comunicaciones, 2009 http://gsyc.escet.urjc.es Se permite
UCEMA Ingeniería Informática Introducción a HTML y Javascript
UCEMA Ingeniería Informática Introducción a HTML y Javascript,QJ'LHJR-$UFXVLQ GDUFXVLQ#FHPDHGXDU Objetivos del Curso 9 Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes
Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016
Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
Extensiones. Guillermo López Mozilla Hispano
Extensiones Guillermo López Mozilla Hispano Extensiones Qué son? Programilla para extender el comportamiento/visualización de cualquier programa Mozilla Usan la misma tecnología que las aplicaciones Mozilla
Sesiones en PHP. Área de Ingeniería Telemática
Sesiones en PHP Contenido Estado de la conexión con el navegador Cookies Sesiones Sesiones en PHP 2 Estado de la conexión con el navegador Cuando el usuario solicita una página que es en verdad un PHP
Introducción a CSS Javier Eguíluz Pérez
Introducción a CSS Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento - No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es)
AJAX: EJEMPLO BÁSICO CÓDIGO OBJETO XMLHTTPREQUEST Y RECUPERAR DATOS DESDE ARCHIVO (CU01206F)
APRENDERAPROGRAMAR.COM AJAX: EJEMPLO BÁSICO CÓDIGO OBJETO XMLHTTPREQUEST Y RECUPERAR DATOS DESDE ARCHIVO (CU01206F) Sección: Cursos Categoría: Tutorial básico del programador web: Ajax desde cero Fecha
Lenguajes y estándares para la Web. Tema 3: XHTML. Elementos de marcado
Tema 3: XHTML. Elementos de marcado Esquema Tipo de documento, espacio de nombres y codificación Metadatos Módulos de XHTML Mecanismos de estructuración Esquema Tipo de documento, espacio de nombres y
Unidad IV: Programación del lado del cliente
Unidad IV: Programación del lado del cliente 4.1 Introducción al lenguaje Un lenguaje del lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier
Manual de uso del Taglib de Template Saga
1 Manual de uso del Taglib de Template Saga www.sagasoluciones.com info@sagasoluciones.com C/ Salado 11 Local 10. 41010 Sevilla T. + 34 954 45 72 75 F. + 34 954 45 75 72 CONTROL DEL DOCUMENTO Realizado
Tutorial de enlace entre Formulario Web y Servicio Web REST. Programación en Internet
Tutorial de enlace entre Formulario Web y Servicio Web REST Programación en Internet Angel Manuel Gamaza Domínguez José Miguel Otte Sainz-Aguirre Grado en Ingeniería Informática 20 de septiembre de 2016
Proyecto WifiCloudCan ecastro21
Proyecto WifiCloudCan ecastro21 CURSO: Introducción a la programación en HTML - PHP y al Desarrollo Web INDICE Introducción Lenguaje de etiquetas HTML Herramientas necesarias para diseñar una página Web
Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico
Diseños de sitios Web y Comercio Electrónico Universidad Politécnica de Valencia Campus de Gandía Organización del curso viernes 6 sábado 7 viernes 13 sábado 14 viernes 20 Introducción a Instalación en
CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol que repesenta el documento (document
Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
SETATTRIBUTE Y GETATTRIBUTE JAVASCRIPT. DIFERENCIAS DE SINTAXIS PROPIEDADES CON HTML. EJEMPLO MAXLENGTH. (CU01176E)
APRENDERAPROGRAMAR.COM SETATTRIBUTE Y GETATTRIBUTE JAVASCRIPT. DIFERENCIAS DE SINTAXIS PROPIEDADES CON HTML. EJEMPLO MAXLENGTH. (CU01176E) Sección: Cursos Categoría: Tutorial básico del programador web:
Que son las hojas de estilo (CSS)?
Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia
CSS: hojas de estilo en cascada
CSS: hojas de estilo en cascada Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol
Librerías JavaScript jquery y Zepto. Juan Quemada, DIT, UPM
Librerías JavaScript jquery y Zepto 1 Librerias Javascript Las librerias JavaScript actuales son multi-navegador Funcionan en IE, Firefox, Safari, Chrome, Opera,... w Ahorran mucho tiempo -> utilizarlas
Hojas de estilo (CSS)
Tema 2b Hojas de estilo (CSS) Texto http://www.flickr.com/photos/urke/3223200963 Dando estilo visual a las páginas HTML Hojas de estilo 2 Separar la estructura del documento (etiquetas HTML) del estilo
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
MANUAL DE USUARIO SISTEMA INFORMÁTICO PARA HISTORIAS CLÍNICAS
MANUAL DE USUARIO SISTEMA INFORMÁTICO PARA HISTORIAS CLÍNICAS CONTENIDO 1. INTRODUCCIÓN 1.1. COMO USAR ESTE MANUAL 1.2. AUDIENCIA 1.3. DEFINICIONES 2. INSTALACIÓN 2.1. REQUISITOS 2.2. COMO EJECUTAR 3.
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Desarrollo y servicios web
Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2014-2 Sesión 4. 2 Qué haremos hoy? 3 1. GET/POST 2. Cookies 3.Sesiones Herramientas análisis HTTP Firebug plug-in for Firefox A must have for Web
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
CSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz
CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz Contexto Qué hay detrás de esto? Contexto Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades
CSS3. Tutor: Ignacio Pérez Martín. Índice. Curso: Programación Python y HTML-5. CEP Marbella-Coín.
CSS3 Tutor: Ignacio Pérez Martín. Curso: Programación Python y HTML-5. CEP Marbella-Coín. Resumen En este tema veremos como dar formato a un documento HTML utilizando las hojas de estilos (CSS). Leed este
escuela técnica superior de ingeniería informática
Versión original: Pablo Fernández (noviembre 2006) Actualización: P. Fernandez. Cambios menores en animaciones (Noviembre 2009) Tiempo: 2h escuela técnica superior de ingeniería informática HTML dinámico:
Actividad 3: Codificación básica de un texto en HTML
Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html