Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5.
|
|
|
- José Carlos Calderón Medina
- hace 8 años
- Vistas:
Transcripción
1 1
2 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. La sintaxis básica de CSS Digamos que queremos un bonito color rojo como fondo de nuestra página web: Usando HTML podríamos haberlo conseguido así: <body bgcolor="#ff0000"> Con CSS el mismo resultado puede lograrse así: body {background-color: #FF0000; El código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental: 2
3 Aplicando CSS a un documento HTML Podemos aplicar CSS a un documento HTML de tres maneras diferentes: Método 1: En línea (el atributo style) Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así: <html> <head> <title>ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>esta es una página con fondo rojo</p> </body> </html> Método 2: Interno (la etiqueta style) Otra forma es incluir el código CSS usando la etiqueta HTML <style> <html> <head> <title>ejemplo</title> <style type="text/css"> body {background-color: #FF0000; </style> </head> <body> <p>esta es una página con fondo rojo</p> </body> </html> 3
4 Método 3: Externo (enlace a una hoja de estilo) El método recomendado es enlazar con lo que se denomina hoja de estilo externa.. Una hoja de estilo externa es sencillamente un fichero de texto con la extensión.css. Archivo: mi_estilo.css body {background-color: #FF0000; El archive de estilo debe enlazarse desde un document html mediante la orden: <link rel="stylesheet" type="text/css" href="style/style.css" /> La ruta a nuestra hoja de estilo aparece indicada por medio del atributo href. La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera: <html> <head> <title>mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> Si se desea cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrar el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal. 4
5 Atributos de Color y fondo color background-color background-image background-repeat Puede asociar el atributo a cualquier de las etiquetas usando la siguiente notación: body { background-color: #FFCC66; background-image: url("fondo.gif"); h1 { color: #ff0000; a{ color: #000099; background-color: #00ff00; // Color de fondo de la pantalla // Poner como fondo la imagen // Titulo h1 de color rojo // Vinculos color celeste // vinculos con fondo verde En el ejemplo anterior, la imagen de fondo se repite tanto en el eje horizontal como en el vertical para ocupar toda la pantalla. La propiedad backgroundrepeat controla este comportamiento. background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat Se repite en el eje horizontal Se repite en el eje vertical Se repite en el eje horizontal y vertical La imagen no se repite Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; 5
6 Fuentes font-family font-style font-variant font-weight font-size font La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada, se seguirá probando con la siguiente fuente hasta encontrar una fuente apropiada. Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida ésta de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genérica. Así, al menos, la página se mostrará usando una fuente de la misma familia si ninguna de las especificadas están disponibles. Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto: 6
7 h1 {font-family: arial, verdana, sans-serif; h2 {font-family: "Times New Roman", serif; La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecerán en cursiva. h1 {font-family: arial, verdana, sans-serif; h2 {font-family: "Times New Roman", serif; font-style: italic; La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la fuente. p {font-family: arial, verdana, sans-serif; td {font-family: arial, verdana, sans-serif; font-weight: bold; El tamaño de la fuente se establece por medio de la propiedad font-size. h1 {font-size: 30px; h2 {font-size: 12pt; h3 {font-size: 120%; p {font-size: 1em; Nota: Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades 'px' y 'pt' establecen el tamaño de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamaño de la misma según considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminuación visual, o disponen de un monitor de mala calidad.para que tu sitio web sea accesible para todo el mundo, deberías usar unidades ajustables como, por ejemplo, '%' o 'em'. 7
8 Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas a fuentes en una única propiedad. Por ejemplo, imagina estas cuatro líneas de código que usamos para describir las propiedades de fuente para la etiqueta <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; Usando la propiedad abreviada, el código se puede simplicar así: p { font: italic bold 30px arial, sans-serif; El orden de los valores para la propiedad font es: font-style font-variant font-weight font-size font-family 8
9 Dando formato a un Texto text-indent text-align text-decoration letter-spacing text-transform La propiedad text-indent permite aplicar sangría a la primera línea de dicho párrafo. Los valores posibles de esta propiedad son: left (texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el valor justify (alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-spacing. La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre los valores capitalize, uppercase o lowercase, sin importar cómo aparece el texto original en el código HTML. p { text-indent: 30px; text-align: justify; text-transform: capitalize; td { text-align: center; h1 { text-decoration: underline; letter-spacing: 6px; text-transform: uppercase; 9
10 Agrupación de elementos con el atributo class Para el ejemplo se dispone de dos listas de enlaces: <p>tecnologia del lado del Cliente:</p> <ul> <li><a href="html5.htm">html5</a></li> <li><a href="css3.htm">css3</a></li> <li><a href="js.htm">javascript</a></li> </ul> <p>tecnologias del lado del Servidor:</p> <ul> <li><a href="php.htm">php</a></li> <li><a href="jsp.htm">jsp</a></li> <li><a href="aspn.htm">asp</a></li> </ul> Se desea que el primer grupo de anaces sean amarillos y el segundo grupo de enlacves de color rojo. Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class. <p>tecnologia del lado del Cliente:</p> <ul> <li><a href="html5.htm" class= cliente >HTML5</a></li> <li><a href="css3.htm" class= cliente >CSS3</a></li> <li><a href="js.htm" class= cliente >JavaScript</a></li> </ul> <p>tecnologias del lado del Servidor:</p> <ul> <li><a href="php.htm" class= servidor >PHP</a></li> <li><a href="jsp.htm" class= servidor >JSP</a></li> <li><a href="aspn.htm" class= servidor >ASP</a></li> </ul> 10
11 Luego definimos los estilos siguientes: a { color: blue; a.cliente{ color: #FFBB00; a.servidor { color: #800000; Identificación de un elemento usando el atributo id Si se desea identificar un elemento en particular se usa el atributo id <p>parrafo 1</p> <p>parrafo 2</p> <p>parrafo 3</p> <p>parrafo 4</p> Para pintar de color rojo el párrafo 3, haríamos: <p id= p1 >Parrafo 1</p> <p id= p2 >Parrafo 2</p> <p id= p3 >Parrafo 3</p> <p id= p4 >Parrafo 4</p> Y la definición del estilo seria: #p1 { color: red; 11
12 Agrupación de elementos <span> El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos. En el ejemplo algunas palabras se resaltan de color rojo: <p>el que pronto se acuesta y pronto se levanta, es hombre <span class="ventaja">saludable</span>, <span class="ventaja">rico</span> y <span class="ventaja">sabio</span>.</p> El código CSS necesario para producir este efecto es el siguiente: span.ventaja{ color:red; Agrupación con el elemento <div> Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior, <div> se usa para agrupar uno o más elementos a nivel de bloque. <div id="cliente"> <ul> <li>html5</li> <li>css3</li> <li>jquery</li> </ul> </div> <div id="servidor"> <ul> <li>rubi</li> <li>php</li> <li>jsp</li> </ul> </div> 12
13 La hoja de estilos tendría la forma: #cliente{ background:blue; #servidor{ background:red; Altura y anchura width height Por ejemplo si se desea una caja de ancho 400px por alto 200px seria: <div id="caja"> <img src="paisaje.jpg"> </div> La hoja de estilo seria: #caja { width: 400px; height: 200px; border: 1px solid black; background: orange 13
14 Elementos flotantes (la propiedad float) Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Por ejemplo, si quisiéramos texto con ajuste de línea alrededor de una imagen, el resultado sería el siguiente: El código HTML del ejemplo anterior es el siguiente: <div id="picture"> <img src="paisaje.jpg"> </div> <p>este es un párrafo normal</p> Para conseguir que la imagen flote a la izquierda y el texto se ajuste a su alrededor, sólo hay que definir el ancho de la caja que rodea la imagen y, después de eso, fijar la propiedad float con el valor left: #picture { float:left; width: 100px; 14
15 La propiedad clear La propiedad clear se usa para controlar cómo se comportarán los elementos que siguen a los elementos flotados de un documento. Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedará libre al flotar una caja hacia un lado. La propiedad clear puede tomar los valores:left, right, both o none. El principio consiste en que, si clear, por ejemplo, se fija en both para una caja, el borde del margen superior de esta caja siempre estará debajo del borde del margen inferior para las posibles cajas flotantes que vengan de arriba. <div id="picture"> <img src="paisaje.jpg"> </div> <p class= nofloat >Este es un párrafo normal</p> Para evitar que el texto flote hacia arriba junto a la imagen, podemos añadir lo siguiente al código CSS: #picture { float:left; width: 100px;. nofloat { clear:both; 15
16 Posicionamiento de elementos Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenadas. Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS: h1 { position:absolute; top: 100px; left: 200px; Un elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vacío después de ser posicionado. Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja. Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento: 16
17 #box1 { position:absolute; top: 50px; left: 50px; #box2 { position:absolute; top: 50px; left: 50px; #box3 { position:absolute; top: 50px; left: 50px; #box4 { position:absolute; top: 50px; left: 50px; Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posicion. La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento.. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado. Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento: 17
18 #imagen1 { position:relative; left: 350px; bottom: 150px; #imagen1 { position:relative; left: 150px; bottom: 500px; #imagen1 { position:relative; left: 50px; bottom: 700px; 18
19 Capa sobre capa con z-index (Capas) CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta lección, aprenderemos cómo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros. Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. El sistema consiste en que el elemento con un número mayor se superpone al elemento con un número menor. Por ejemplo la figura2 deberia tener un z-index mas alto para superponerse a figura1 #figura1{ position: absolute; left: 100px; top: 100px; z-index: 10; #figura2{ position: absolute; left: 115px; top: 115px; z-index: 2; 19
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3
ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto
Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una
HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es
HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la división
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico
MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y
Creación del sitio web del Laboratorio F1
Creación del sitio web del Laboratorio F1 Jonatan Grandmontagne García Universidad de León, España jon@usuarios.retecal.es Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto
Páginas multimedia Pizarra www.webardora.net
Página donde el usuario tiene un espacio (pizarra) para crear sus propias composiciones con gráficos y textos previamente insertados por el autor; además de poder escribir sus propios textos: PESTAÑA IMÁGENES
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
Wenceslao Zavala. www.producciondigitalup.com.ar
Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:
Vamos a necesitar cuatro ficheros
En esta guía se describen las instrucciones para usar el programa "programa.js" que nos permite: Incluir una frase de saludo que se adapta automáticamente a la hora del día y que incluye la fecha y hora
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers
Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3
Consejos para el correcto armado de HTML para Emails
Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Cuando desarrollas una campaña de Email Marketing, es fundamental que tu mensaje sea recibido correctamente.
Feliz cumpleaños. Introducción HTML & CSS
HTML & CSS 1 Feliz cumpleaños All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
1. Temario Curso Web Design 2014
1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 10: Diseño web con estilos.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 10: Diseño web con estilos. Instituto Nacional de Tecnologías Educativas y de Formación del profesorado 2012 Diseño web con estilos
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Manual de NVU Capítulo 5: Las hojas de estilo
Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de
CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
CSS1 manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre CSS1 disponible en: http://www.w3.org/tr/1999/rec-css1-19990111 Manual de referencia de CSS1-
Formularios. Formularios Diapositiva 1
Formularios Crear un formulario utilizando el Asistente para formularios Modificación en vista Diseño Adición de Controles a un Formulario Adición de un Subformulario a un formulario Formularios Diapositiva
Capítulo 3 Estilo para un documento HTML: CSS
Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '" Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores:
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
Tutorial 2: Creación de páginas web con Compozer
Tutorial 2: Creación de páginas web con Compozer Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar siete procedimientos: Crear
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
Bootstrap: Introducción práctico en el Diseño Web
Bootstrap: Introducción práctico en el Diseño Web Originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web
CSS. Cascading Style Sheets (Hojas de estilo en cascada)
1 CSS Cascading Style Sheets (Hojas de estilo en cascada) INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia
PASOS PARA CREAR UNA PÁGINA WEB
http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura
Creando una webquests
Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre
Imágenes y objetos IMÁGENES
IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al
Gestor de contenidos de la plataforma web
Gestor de contenidos de la plataforma web 2011 1 de 24 Funcionamiento del gestor de contenidos Acceso Para acceder al la extranet es necesario ir a la dirección web: http://www.tudominio.com/adm e introducir
MANUAL TECNICO DE EMAILING BIZBOX
MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos
CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)
APRENDERAPROGRAMAR.COM CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B) Sección: Cursos Categoría: Tutorial básico del programador web:
CURSOS PRÁCTICOS SEDEN. Maquetación de un trabajo en Word SEDEN
2 CURSOS PRÁCTICOS SEDEN Maquetación de un trabajo en Word SEDEN 2 Maquetación de un trabajo en Word Vamos a explicar las distintas herramientas que tiene Word para maquetar cualquier trabajo que realicemos.
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:
Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks
Kompozer: Crear una hoja de estilos
Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando
HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe
HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre
3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.
3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc
OpenOffice Writer LA PÁGINA
4: CONFIGURARC LA PÁGINA Cuando se escribe de forma manual se empieza por elegir el tamaño del papel, su orientación y los márgenes. En un procesador de texto, como Writer, estas operaciones que habitualmente
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1
MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal
... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4
CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
Tema: Estilos CSS. Combinadores. Posicionamiento.
Diseño Digital V. Guía 5 1 Tema: Estilos CSS. Combinadores. Posicionamiento. Objetivos Contenidos Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V A través del desarrollo
Hojas de estilo en cascada (CSS) Tecnologías Web
Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que
MS ACCESS BÁSICO 6 LOS INFORMES
2010 MS ACCESS BÁSICO 6 LOS INFORMES 93 LOS INFORMES Los informes son una herramienta de Access para elaborar información, sobre los datos que deseemos, preparada para ser impresa. A partir de una base
Creación y uso de Hojas de Estilo
Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales
CSS, hojas de estilos
CSS, hojas de estilos 1. Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto
Resumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
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
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos
MANUAL DE USUARIO BÁSICO CMS V4. Content Management System (Editar páginas e imágenes)
MANUAL DE USUARIO BÁSICO CMS V4 Content Management System (Editar páginas e imágenes) IINDICE ACCEDER AL ADMINISTRADOR ESCRIBIR UNA PÁGINA O ACTUALIZACIÓN AGREGANDO IMÁGENES RECOMENDACIONES ANTES DE PUBLICAR
Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.
Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.
COREL DRAW PARTE II. TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS
CREAR TABLAS COREL DRAW PARTE II TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS Para crear una tabla, debes seleccionar la herramienta Tabla desde la barra de herramientas, completa los valores en el
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
Cómo editar WIKIPEDIA
Cómo editar WIKIPEDIA #lingwiki AITOR DIAZ FIGUEIRA Y AIDA NAVAREÑO REYES LICENCIA CREATIVE COMMONS 1. Editar Casi todas las páginas de Wikipedia se pueden editar, exceptuando algunas de propiedad privada,
Joomla! 2.5 Cree y administre sus sitios Web
Capítulo 1: Instalación de Joomla! 1. Introducción 11 2. Qué es un CMS? 11 3. HTML y XHTML 11 4. Diferenciar el contenido de la presentación 12 5. PHP y Apache 12 6. MySQL 13 7. Sitio estático o sitio
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
A continuación se describen cuáles son los elementos principales de las tablas, cómo crear una y cómo modificarla.
4. TABLAS A continuación se describen cuáles son los elementos principales de las tablas, cómo crear una y cómo modificarla. 4.1. Principales Elementos Al momento de generar y diseñar una tabla es importante
Queremos asegurarnos de que tu sitio aparezca en los resultados de búsqueda.
Queremos asegurarnos de que tu sitio aparezca en los resultados de búsqueda. En estas secciones, te enseñamos a: Configurar el sitio para varios dispositivos, que los motores de búsqueda comprendan la
MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.
MANUAL BÁSICO CSS Presentación Bienvenido a este tutorial de CSS, el lenguaje de hojas de estilo usado en páginas web. Este tutorial pretende hacer una introducción a este lenguaje, métodos para separar
Accesibilidad web GUÍA FUNCIONAL
Accesibilidad web GUÍA FUNCIONAL 0 _ ÍNDICE 01_Introducción 02_Primeros pasos 03_Conceptos 04_Navegación por voz 05_Navegación por teclado 06_Navegación por sonido 07_Compatibilidad con lectores de pantalla
Uso del programa CALC
Uso del programa CALC 1. Introducción. Podemos considerar una hoja de cálculo como una tabla en la que tenemos texto, números y fórmulas relacionadas entre si. La ventaja de usar dicho programa radica
Guía para la Automatización de Documentos en. Microsoft Word
UNIVERSIDAD SAN CARLOS DE GUATEMALA CENTRO UNIVERSITARIO DE SAN MARCOS USAC-CUSAM Guía para la Automatización de Documentos en Microsoft Word ID Y ENSEÑAD A TODOS 2015 PRESENTACIÓN El Instituto de Investigaciones
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo
4.- Composer: Formato de párrafos, títulos y listas
4.- Composer: Formato de párrafos, títulos y listas 4.1 Antes de empezar Vamos a configurar el composer antes de empezar a trabajar con él, para ello nos vamos al menú Editar/Preferencias y seleccionamos
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar
Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín
Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta
Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual.
Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Paso 1 de 13 En este tutorial vamos a crear un logotipo basado en un texto al que aplicaremos algunos efectos utilizando filtros
F O R M U L A R I O S FORMULARIOS
F O R M U L A R I O S FORMULARIOS Los controles de formulario nos ayudan a hacer más ágil y sencillo el manejo de una hoja de cálculo. Estos controles nos permiten conseguir que el aspecto visual de la
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
BASES DE DATOS - Microsoft ACCESS 2007-
BASES DE DATOS - Microsoft ACCESS 2007- Una base de datos es un archivo estructurado de datos que nos permite almacenarlos, modificarlos, ordenarlos, generar informes etc., de manera rápida. Un listín
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
La Lección de hoy es sobre determinar el Dominio y el Rango. El cuál es la expectativa para el aprendizaje del estudiante LF.3.A1.
LF.3.A1.2-Steve Cole-Determining Domain and Ranges- La Lección de hoy es sobre determinar el Dominio y el Rango. El cuál es la expectativa para el aprendizaje del estudiante LF.3.A1.2 Qué es Dominio? Es
Tipos de imágenes Imágenes vectoriales Imágenes de mapa de bits
Tipos de imágenes Los programas de diseño gráfico trabajan en general con dos tipos de imágenes: imágenes vectoriales e imágenes de mapa de bits. Comprender sus características y diferencias es indispensable
Figura 4.6: Prototipo de la pantalla de inicio.
Por lo tanto el siguiente paso ha sido realizar el prototipo a más alto nivel del sitio web, para conocer cómo quiere la empresa que se estructure el contenido y qué aspecto darle. Para ello se ha utilizado
COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER
2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por
Diagrama de Gantt en Excel
Diagrama de Gantt en Excel Si pensabas que crear un Diagrama de Gantt en Excel es complicado, en este artículo te mostramos que puede ser muy sencillo en realidad. Tan sólo necesitarás un par de trucos
Maquetación web con 960 Grid System y Drupal
Maquetación web con 960 Grid System y Drupal Agosto 2009 1. 960 Grid System 960 Grid System es un framework CSS, que no es más que una declaración de estilos que dispone las clases necesarias para implementar
Tutorial básico. Apunte creado por imedia Creativa www.imediacreativa.com
Tutorial básico Apunte creado por imedia Creativa www.imediacreativa.com Introducción Joomla CMS Su sitio Web está creado bajo un Sistema de gestión de contenidos CMS (Content Management Systems) Joomla.
La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.
PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 9: Hojas de estilo. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Hojas de estilo Atrás quedaron
Prácticas de Word XP 1
Prácticas de Word XP 1 1. Haciendo clic en el botón derecho del ratón, crea una carpeta en Documentos con vuestros nombres. En ella guardaréis todas las prácticas que se van a realizar. 2. Abre Microsoft
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:
Trabajando con textos
Trabajando con textos Crear texto...1 Seleccionar texto...2 Editar y modificar el texto...3 Corrección ortográfica...4 Modificaciones de palabras...5 Alterando la posición de las letras de las palabras...6
Manual de Microsoft Power Point 2007 Parte 2 Universidad Politécnica de San Luis Potosí
Contenido: Manual de Microsoft Power Point 2007 Parte 2 1. Insertar y dar formato a los cuadros de texto.... 2 2. Insertar cuadros de texto.... 2 3. Estilos de forma - Contornos y colores.... 3 4. Estilos
TUTORIAL DE PUBLICACIÓN PARA REDACTORES
TUTORIAL DE PUBLICACIÓN PARA REDACTORES Fitfusion, pretende ser un punto de encuentro entre profesionales y adictos al fitness, donde compartimos conocimiento sobre nuestra pasión, el ejercicio físico
Vamos a crear nuestro primer juego en el que tendremos que coger la comida que esta protegida por los gatos
Atrapa la tarta Vamos a crear nuestro primer juego en el que tendremos que coger la comida que esta protegida por los gatos Instrucciones (Controla el movimiento del ratón con las teclas flecha derecha,
C APÍTULO 1 Gestión de documentos
C APÍTULO 1 Gestión de documentos En este capítulo encontrará unas sencillas indicaciones para cocripción somera del entorno de trabajo de Word, así como una referencia rápida a las funciones de las teclas