CSS 3. Fernando O!ega.

Tamaño: px
Comenzar la demostración a partir de la página:

Download "CSS 3. Fernando O!ega."

Transcripción

1 CSS 3 Fernando O!ega fernando.ortega@eui.upm.es

2 Qué falta en CSS 2.1? 2

3 Selectores Lista completa de nuevos selectores: selectors/ Selector de atributo condicional: Permite seleccionar todos los elementos que dispongan de un atributo cuyo valor coincida parcial o totalmente con uno indicado. /* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */ a[href^="mailto:"] {... } /* Selecciona todos los enlaces que apuntan a una página HTML */ a[href$=".html"] {... } /* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" */ h1[title*="capítulo"] {... } Sintaxis: ^ (empieza por), $ (termina en) y * (contiene). 3

4 Ejercicio - Crear una lista con enlaces a recurso en la que aparezca un icono diferente según el tipo de elemento enlazado 4

5 Pseudo-elementos Ya estaba presentes en CSS2.1, pero CSS3 los redefine. Disponemos de los siguientes: ::first-line => selecciona la primera linea de texto de un elemento. ::first-letter => selecciona la primera letra del texto de un elemento. ::before => selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado. Ej: p::before { content: "Párrafo: "; } ::after => selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado. ::selection => selecciona el texto que ha seleccionado el usuario con el ratón o teclado. 5

6 Pseudo-clases CSS3 añade 12 nuevas pseudo-clases. Las más destacadas: :nth-child(numero) => selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. :nth-last-child(numero) => idéntico al anterior pero el número indicado se empieza a contar desde el último hijo. :first-child y :last-child => selecciona el elemento indicado pero con la condición de que sea el hijo primero o último de su padre. :empty => selecciona el elemento indicado pero con la condición de que no tenga ningún hijo ni texto. 6

7 Probar libremente los selectores anteriores 7

8 Esquinas redondeadas CSS3 permite redondear las esquinas de las cajas. Diferentes formas de aplicarlo: Circunferencias perfectas: border-radius: 5px 30px 45px 60px; border-radius: 15px; Elipses: border-top-left-radius: 400px 200px; 8

9 Esquinas redondeadas Existen versiones antiguas de los navegadores con implementación propia. Estándar: border-radius: [tamaño porcentaje]; border-top-left-radius: [tamaño porcentaje] [tamaño porcentaje]; borderbottom-left-radius: [tamaño porcentaje] [tamaño porcentaje]; border-top-right-radius: [tamaño porcentaje] [tamaño porcentaje]; border-bottom-right-radius: [tamaño porcentaje] [tamaño porcentaje; Mozilla: -moz-border-radius: [tamaño porcentaje]; -moz-border-top-left-radius: [tamaño porcentaje] [tamaño porcentaje]; - moz-border-bottom-left-radius: [tamaño porcentaje] [tamaño porcentaje]; -moz-border-top-right-radius: [tamaño porcentaje] [tamaño porcentaje]; -moz-border-bottom-right-radius: [tamaño porcentaje] [tamaño porcentaje; Webkit: -webkit-border-radius: [tamaño porcentaje]; -webkit-border-top-left-radius: [tamaño porcentaje] [tamaño porcentaje]; -webkit-border-bottom-left-radius: [tamaño porcentaje] [tamaño porcentaje]; -webkit-border-topright-radius: [tamaño porcentaje] [tamaño porcentaje]; -webkit-border-bottom-right-radius: [tamaño porcentaje] [tamaño porcentaje; 9

10 Sombras de cajas Se pueden poner sombras a los elementos CSS dándole más atractivo al sitio web. box-shadow: 5px -9px 3px #000; El primer parámetro indica el desplazamiento horizontal de la sombra. El segundo parámetro indica el desplazamiento vertical de la sombra. El tercer parámetro indica el difuminado que queremos aplicarle a la sombra. El cuarto parámetro indica el color de la sombra. Propiedades no estándar: -moz-box-shadow: 1px 1px 0px #090; y -webkit-box-shadow: 3px 3px 1px #fc8; 10

11 Probar a dar sombras y redondear las cajas de un sitio web 11

12 Transparencias CSS3 permite establecer colores un un cierto grado de transparencia. Se utiliza el formato RGB-alfa para indicar el color y el grado de transparencia deseado. Combinando colores y transparencias pueden conseguirse grandes efectos visuales. /* Rojo solido */ p { color: rgba(100%, 0%, 0%, 1.0); } /* Azul semitransparente */ p { color: rgba(0,0,255,0.5) } /* Naranja muy transparente */ p { color: rgba(100%, 50%, 0%, 0.1) } 12

13 Opacity Permite cambiar la opacidad de un elemento: párrafo, imagen, botón, etc. Se define mediante la propiedad opacity: 1.0 => El elemento se muestra normalmente. 0.5 => El elemento se muestra con una opacidad del 50%. 0.0 => El elemento no se muestra. img { opacity: 0.8; } img:hover { opacity: 1.0; } 13

14 Degradados Se pueden definir colores mediante degradados. Es mejor que utilizar imágenes porque: Reduce el tiempo de carga de la web. Es más fácil de modificar. Degradado lineal de arriba a abajo: background: linear-gradient(top, black, white); Degradado lineal horizontal con varios colores: background: linear-gradient(left, tomato, cyan, lightgreen); Degradado radial centrado: background-position: center center; background: radial-gradient(circle, #black, #white); 14

15 Comprobar el funcionamiento de transparencias y degradados 15

16 Sobras de textos Podemos aplicar sombras a las fuentes de nuestra web. Muy similar a la sombra de las cajas. text-shadow: 2px 2px 2px #000; El primer parámetro indica el desplazamiento horizontal de la sombra. El segundo parámetro indica el desplazamiento vertical de la sombra. El tercer parámetro indica el difuminado que queremos aplicarle a la sombra. El cuarto parámetro indica el color de la sombra. 16

17 Orientación del texto Podemos rotar el texto para que se escriba en otra dirección. Las rotaciones se producen respecto al centro del elemento. Es posible que tengamos que desplazar el elemento una vez rotado. Diferentes implementaciones: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); 17

18 Fuentes CSS3 nos permite utilizar nuestras propias fuentes. Para definirlas debemos agregar a nuestro font-family:<nombre_de_la_fuente>; src: <ruta_en_servidor>[,<ruta_en_servidor>]*; } Formatos recomendados: Internet Explorer: EOT; Safari (3.2+): TTF / OTF; iphone (3.1): SVG; Chrome: SVG/TTF/OTF; Firefox (3.6+): TTF/OTF/WOFF; Opera (10+) TTF/OTF. Lo mejor EOT + TTF + WOFF. { font-family: Delicious; src: url('delicious-roman.eot') format( eot ), url('delicious-roman.ttf') format( truetype ); } h3 { font-family: Delicious, sans-serif; } 18

19 Trabajar con los diferentes efectos de las fuentes 19

20 20

ESTRUCTURA DEL CÓDIGO HTML5

ESTRUCTURA DEL CÓDIGO HTML5 ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo

Más detalles

Editor. Descripción y análisis de funcionalidad del editor visual de Moodle

Editor. Descripción y análisis de funcionalidad del editor visual de Moodle Editor Descripción y análisis de funcionalidad del editor visual de Moodle Sigue el recorrido de estas transparencias con el editor HTML de Moodle a la vista Editor HTML Las áreas donde se introduce texto

Más detalles

TECNOLOGÍA E INFORMÁTICA

TECNOLOGÍA E INFORMÁTICA TECNOLOGÍA E INFORMÁTICA GRADO: SÉPTIMO 01 02 TEMA: INSERTAR O CREAR TABLAS INDICADOR DE DESEMPEÑO: Utiliza la opción de crear tablas en Microsoft Word para agregar, editar y presentar la información tabulada.

Más detalles

IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo

IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 TRANSICIONES Bernardo Chenlo 2 ANIMANDO CON CSS3 Cómo animar con 3 líneas de CSS en lugar de 60 de JS Transiciones CSS3 Desarrolladas

Más detalles

UNIDAD 1 GENERALIDADES HTML

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.

Más detalles

ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ

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)

Más detalles

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página ACTIVIDADES DE HTML 1.- Estructura básica de un archivo HTML: ejemplo de código HTML Aquí va el contenido de la página Guardamos el archivo

Más detalles

Elaboración de Documentos en Procesadores de Textos

Elaboración de Documentos en Procesadores de Textos Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Por ejemplo, obtener el valor medio de los datos

Más detalles

Curso de Maquetación Web: HTML 5 y CSS

Curso de Maquetación Web: HTML 5 y CSS Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar sitios Web de forma ágil y profesional sin usar tablas. Separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web.

Más detalles

CSS Avanzado Audio, Video e Iframes

CSS Avanzado Audio, Video e Iframes CSS Avanzado Audio, Video e Iframes es una etiqueta de HTML bastante antigua que permite añadir de una manera muy fácil y rápida una página web o contenido dentro de otra página. Para ello únicamente

Más detalles

Manual Power Point Trabajar con formas

Manual Power Point Trabajar con formas Manual Power Point 2010 Trabajar con formas CONTENIDO Insertar una forma Barra de herramientas de dibujo WordArt Estilos rápidos TRABAJAR CON FORMAS Comenzaremos por aprender a dibujar formas básicas y

Más detalles

Unidad 5. Tablas. La celda que se encuentra en la fila 1 columna 2 tiene el siguiente contenido: 2º Celda

Unidad 5. Tablas. La celda que se encuentra en la fila 1 columna 2 tiene el siguiente contenido: 2º Celda Unidad 5. Tablas Una tabla está formada por celdas o casillas, agrupadas por filas y columnas, en cada casilla se puede insertar texto, números o gráficos. Lo principal antes de empezar a trabajar con

Más detalles

5.3 CREAR FORMULARIOS

5.3 CREAR FORMULARIOS 5.3 CREAR FORMULARIOS Los formularios están diseñados para obtener información específica, hay diferentes tipos de formularios, como por ejemplo, facturas, formularios de pedidos, de registro DISEÑAR UN

Más detalles

Al hacer clic en el icono de mano alzada se despliegan otros iconos que nos permiten realizar otros tipos de líneas.

Al hacer clic en el icono de mano alzada se despliegan otros iconos que nos permiten realizar otros tipos de líneas. MANUAL COREL DRAW BARRA DE HERRAMIETAS DIBUJO DE LÍNEAS Y CURVAS Herramienta Mano Alzada Al hacer clic en el icono de mano alzada se despliegan otros iconos que nos permiten realizar otros tipos de líneas.

Más detalles

TABLAS WORD La tercer opción es usar el vínculo Dibujar Tabla, aquí se dimensiona la tabla dibujándola con el mouse

TABLAS WORD La tercer opción es usar el vínculo Dibujar Tabla, aquí se dimensiona la tabla dibujándola con el mouse TABLAS WORD 2007 Las tablas permiten organizar la información en filas y columnas, de forma que se pueden realizar operaciones y tratamientos sobre las filas y columnas. Una tabla está formada por celdas

Más detalles

EFECTOS TRIDIMENSIONALES

EFECTOS TRIDIMENSIONALES EFECTOS TRIDIMENSIONALES Para crear líneas concéntricas hacia el interior o el exterior de un objeto, es posible aplicar una silueta. CorelDRAW también permite ajustar el número de líneas de silueta y

Más detalles

Curso Excel Básico 2003 Unidad 1

Curso Excel Básico 2003 Unidad 1 Formatos Formatos FORMATO DE CELDAS... 6 Descripción... 6 NÚMERO... 6 Tipo Número... 6 Tipo Moneda... 7 Tipo Fecha... 8 Tipo Hora... 8 Tipo Porcentaje... 8 Tipo Personalizada... 9 ALINEACIÓN... 9 Alineación

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

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

Más detalles

Manual Power Point Trabajar con gráficos

Manual Power Point Trabajar con gráficos Manual Power Point 2010 Trabajar con gráficos CONTENIDO Partes de un gráfico Modificación de un gráfico Solapa Diseño Solapa Presentación Solapa Formato Grupo Estilos de WordArt Agregar una imagen de fondo

Más detalles

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos

Más detalles

CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:

CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4: Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño

Más detalles

5.- Crear páginas web con Nvu

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

Más detalles

DREAMWEAVER CS4 Código: 3492

DREAMWEAVER CS4 Código: 3492 DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.

Más detalles

HTML 2 / Atributos/etiquetas(Tags)

HTML 2 / Atributos/etiquetas(Tags) HTML 2 / Atributos/etiquetas(Tags) ATRIBUTOS bgcolor=#ff0000 Asigna un color en hexadecimal o en RGB a el fondo de todo el body ( la página) FGCOLOR="#00FF00" Asigna un color en hexadecimal

Más detalles

PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)

PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial

Más detalles

1. Introducción a HTML

1. Introducción a HTML Introducción a HTML 1. Introducción a HTML 1. Introducción a HTML Qué es HTML? El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto estructurado,

Más detalles

Formato de una presentación

Formato de una presentación Formato de una presentación capítulo 17 Formato de una presentación formato (presentación) En esta unidad aprenderá a crear presentaciones mediante plantillas y a configurar el formato de cada diapositiva,

Más detalles

Unidad 2. Elementos de Word2007 (I)

Unidad 2. Elementos de Word2007 (I) Unidad 2. Elementos de Word2007 (I) Vamos a ver varias formas de iniciar Word2007 y cuales son los elementos básicos de Word2007, la pantalla, las barras, etc. Aprenderemos cómo se llaman, donde están

Más detalles

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

Páginas multimedia Pizarra www.webardora.net

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

Más detalles

Cómo manejar el editor HTML de Moodle?

Cómo manejar el editor HTML de Moodle? Cómo manejar el editor HTML de Moodle? El editor HTML nos permite agregar textos, imágenes, videos y audios, entre otras posibilidades. Cada vez que entramos a alguno de los recursos para Agregar una actividad

Más detalles

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación

Más detalles

Práctica de HTML (Curso )

Práctica de HTML (Curso ) Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de

Más detalles

Índice. Presentación Espacio de trabajo y gestión de archivos. Gestión de sitios y páginas

Índice. Presentación Espacio de trabajo y gestión de archivos. Gestión de sitios y páginas Índice Índice Presentación.................................... 11 Espacio de trabajo y gestión de archivos Introducción....................................... 15 Lección 1. Acceder a Dreamweaver: la Ventana

Más detalles

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales. 1 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

Más detalles

Actividad 3: Codificación básica de un texto en HTML

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

Más detalles

TUTORIAL PAINT. PARTE II

TUTORIAL PAINT. PARTE II TUTORIAL PAINT. PARTE II AGREGAR TEXTO Y FORMAS A UNA IMAGEN Autor: Eduardo Escárate Ferrada Contenido 1 Abrimos una imagen o una captura de pantalla en paint.... 1 1.1 Se selecciona la imagen y luego

Más detalles

8. Otros usos comunes

8. Otros usos comunes 8. Otros usos comunes 8.1 Clases múltiples En este tema veremos algunos temas generales relacionados con CSS, que se usan comúnmente en los sitios webs actuales. Múltiples clases en un solo elemento Se

Más detalles

Informática y Computación III Guía de Estudio (50 reactivos)

Informática y Computación III Guía de Estudio (50 reactivos) Informática y Computación III Guía de Estudio (50 reactivos) Responde cada una de las preguntas que se te plantean. Excel es un editor de textos como PowerPoint No existen otras hojas de cálculo, solo

Más detalles

Módulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN

Módulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN Módulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN ÍNDICE I) Instalación (v1.6)...3 II) Instalación (v1.5)...5 III) Añadir una imagen...7 IV) Añadir un

Más detalles

ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B)

ENCABEZADOS HTML <h1> A <h6>, PÁRRAFOS <p>, APLICAR ESTILOS Y ETIQUETA <pre> DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B) APRENDERAPROGRAMAR.COM ENCABEZADOS HTML A , PÁRRAFOS , APLICAR ESTILOS Y ETIQUETA DE TEXTO PREFORMATEADO. EJEMPLOS (CU00715B) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

Antes de empezar... Crear una presentación

Antes de empezar... Crear una presentación Una vez que conozcas los conceptos básicos sobre cómo crear y editar documentos de Google Docs, y cómo acceder a ellos, lee esto para conocer los conceptos básicos específicos de las Presentaciones de

Más detalles

Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.

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

Más detalles

Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas.

Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas. Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas. Ejercicio 1: Crear y rellenar una tabla. 3. Selecciona el sitio Cocina en el panel 6. Sitúa el punto de inserción

Más detalles

GIMP, aplicaciones didácticas. Herramientas de GIMP

GIMP, aplicaciones didácticas. Herramientas de GIMP GIMP, aplicaciones didácticas. Herramientas de GIMP Ministerio de Educación. ITE GIMP, aplicaciones didácticas. GIMP, aplicaciones didácticas Herramientas Para ampliar: Transformación. Aerógrafo. Relleno.

Más detalles

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers

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

Más detalles

1. Temario Curso Web Design 2014

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

Más detalles

Unidad 29: Formato condicional

Unidad 29: Formato condicional Unidad 29: Formato condicional 29.0 Introducción El formato condicional es un formato que depende del valor de una celda o de su contenido. Por ejemplo, en una base de datos de salarios del personal, usted

Más detalles

Operaciones con el diseño

Operaciones con el diseño Operaciones con el diseño Bienvenido a CorelDRAW, un completo programa de dibujo y diseño gráfico vectorial concebido para los profesionales del diseño gráfico. En este tutorial, creará un póster para

Más detalles

Departamento de Tecnologías de la Información

Departamento de Tecnologías de la Información Departamento de Tecnologías de la Información Guía para el ingreso de notas Ingresar a la dirección uvirtual.uaca.ac.cr (sin utilizar www) Seleccionar el Portal de Profesores, Dando clic sobre la imagen

Más detalles

Qué es un Procesador de textos? Iniciar Word. Microsoft Word Microsoft Office 2010

Qué es un Procesador de textos? Iniciar Word. Microsoft Word Microsoft Office 2010 Microsoft Word 2010 Qué es un Procesador de textos? Un procesador de textos es una herramienta que sirve para el manejo de textos en general. Con un programa como éste es posible crear desde una carta

Más detalles

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 Código: 1413005 OBJETIVOS: Para diseñar y publicar una página Web, saber maquetar una página Web, saber crear animaciones, etc. CONTENIDOS: DISEÑO

Más detalles

Diseño de páginas web

Diseño de páginas web Diseño de páginas web Estilos HTML y CSS Ricardo Esteban Alonso Estilos HTML Un estilo define un grupo de características de texto, y están normalizados para los exploradores más utilizados. Son muy útiles

Más detalles

Manual del Alumno - Blackboard

Manual del Alumno - Blackboard Manual del Alumno - Blackboard GUÍA PARA EL ALUMNO Edición: Tecnologías de la Información y de la Comunicación en la Educación (TICE) Vicerrectorado de Servicios Universitarios 2da. Versión Octubre 2014

Más detalles

CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES. Unidad N 3. Crear gráficos y utilizar formatos, para la presentación de informes.

CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES. Unidad N 3. Crear gráficos y utilizar formatos, para la presentación de informes. CREAR GRÁFICOS Y UTILIZAR FORMATOS PARA LA PRESENTACIÓN DE INFORMES Unidad N 3 Objetivo Crear gráficos y utilizar formatos, para la presentación de informes. Descripción del Material del Curso En esta

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla

Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla 8.- Composer: Tablas 8.1. Insertar una tabla Hacemos clic con el ratón para situar el cursor donde queremos que aparezca la tabla. Nos vamos a la barra de Menús, Insertar, Tabla Aparecerá el cuadro de

Más detalles

FORMAS MINERVA WEB GUIA DE USUARIO: DILIGENCIAMIENTO E IMPRESIÓN DE FORMAS MINERVA WEB VERSIÓN 1.0

FORMAS MINERVA WEB GUIA DE USUARIO: DILIGENCIAMIENTO E IMPRESIÓN DE FORMAS MINERVA WEB VERSIÓN 1.0 FORMAS MINERVA WEB GUIA DE USUARIO: DILIGENCIAMIENTO E IMPRESIÓN DE FORMAS MINERVA WEB VERSIÓN 1.0 CONTENIDO 1 OBJETIVOS... 3 2 REQUERIMIENTOS... 3 3 APLICACIÓN WEB FORMAS MINERVA... 3 3.1 PASOS PARA DILIGENCIAR

Más detalles

Estilos y temas. Contenido TECNOLOGÍA WORD

Estilos y temas. Contenido TECNOLOGÍA WORD Contenido 1. Crear un estilo rápido... 2 2. Cambiar un estilo... 2 3. Aplicar un estilo... 3 4. Hacer que un conjunto de estilos rápidos sea el conjunto de estilos predeterminado... 3 4.1 Elegir un conjunto

Más detalles

fuentes para un mejor diseño web

fuentes para un mejor diseño web Webfonts fuentes para un mejor diseño web ❶ Breve historia sobre fuentes en Internet Breve historia de las webfonts A.W. W. D.W HTML 1 HTML 2 CSS CSS 2 1993 1995 1996 1998 NO HAY CONTROL SOBRE LA FUENTE

Más detalles

[Informes Activos-Manual de Usuario]

[Informes Activos-Manual de Usuario] [Informes Activos-Manual de Usuario] abril de 2014 Índice 1. VISIÓN GENERAL... 3 2. ELEMENTOS DE UN INFORME ACTIVO... 4 2.1. HERRAMIENTA DE PAGINACIÓN... 4 2.2. MENU DE OPCIONES DE COLUMNA... 5 2.2.1.

Más detalles

Elementos esenciales de Power- Point

Elementos esenciales de Power- Point PowerPoint 2013 Elementos esenciales de Power- Point Área académica de Informática 2015 Elementos esenciales de PowerPoint Introducción PowerPoint es un programa, que nos ofrece la posibilidad de crear

Más detalles

EJERCICIO 18 DE WORD. ACTIVIDAD: crea las tablas que se muestran a continuación, siguiendo los procedimientos

EJERCICIO 18 DE WORD. ACTIVIDAD: crea las tablas que se muestran a continuación, siguiendo los procedimientos CREACIÓN Y MODIFICACIÓN DE TABLAS Las tablas sirven para organizar la información de una forma clara, ordenándola en filas y columnas. ACTIVIDAD: crea las tablas que se muestran a continuación, siguiendo

Más detalles

Boletín de Novedades y Mejoras versión 2010.1

Boletín de Novedades y Mejoras versión 2010.1 Boletín de Novedades y Mejoras versión 2010.1 nº 28 Marzo - 2010 Contenido: Plataforma Carga selectores 1 Producción Mnto. Estructuras Bases 1 Plataforma Optimización carga de Selectores Optimización general

Más detalles

ESTETICA Y DISEÑO APLICADOS A LA WEB

ESTETICA Y DISEÑO APLICADOS A LA WEB ESTETICA Y DISEÑO APLICADOS A LA WEB Descripción de la asignatura El propósito de la asignatura es aprender a estructurar, diseñar y formalizar una Web habiendo identificado el público objetivo. De este

Más detalles

Constructor de sitios. Manual de Usuario

Constructor de sitios. Manual de Usuario Constructor de sitios Manual de Usuario Contenido Introducción... 1 Comienza a crear tu sitio... 2 1.- Inicia sesión... 2 2.-Comenzar con la creación... 3 3.-Crear un proyecto... 3 4.-Seleccionar la plantilla...

Más detalles

DISEÑO WEB. Tecnología digital: Redes y comunicaciones. Imagen digital. Edición y publicación electrónica.

DISEÑO WEB. Tecnología digital: Redes y comunicaciones. Imagen digital. Edición y publicación electrónica. DISEÑO WEB OBJETIVOS Tecnología digital: Redes y comunicaciones. Imagen digital. Edición y publicación electrónica. Usabilidad y accesibilidad. Comunicación multimedia. Edición Bitmap vectorial y autoedición.

Más detalles

HTML5, CSS3 + JQuery

HTML5, CSS3 + JQuery HTML5, CSS3 + JQuery Descripción Es necesario que los desarrolladores y diseñadores web, a la hora de crear sitios web, dominen los lenguajes fundamentales que son el HTML (HyperText Markup Language) y

Más detalles

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

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

Más detalles

EJERCICIOS INKSCAPE. Realiza las siguientes figuras básicas y llámalo ejercicio1.svg:

EJERCICIOS INKSCAPE. Realiza las siguientes figuras básicas y llámalo ejercicio1.svg: EJERCICIOS INKSCAPE EJERCICIO 1 Realiza las siguientes figuras básicas y llámalo ejercicio1.svg: EJERCICIO 2 Realiza las siguientes figuras y llámalo ejercicio2.svg: EJERCICIO GUIADO 3 Realiza la siguiente

Más detalles

Administración de la producción. Sesión 4: Procesador de Texto

Administración de la producción. Sesión 4: Procesador de Texto Administración de la producción Sesión 4: Procesador de Texto Contextualización La semana anterior revisamos los comandos que ofrece Word para el formato del texto, la configuración de la página, la inserción

Más detalles

CREACIÓN DE PÁGINAS WEB CON NVU

CREACIÓN DE PÁGINAS WEB CON NVU CREACIÓN DE PÁGINAS WEB CON NVU 1. Introducción... 1 2. Instalación... 2 3. Antes de comenzar una página web... 2 4. Editar páginas web con NVU... 5 5. Definir el diseño de nuestro sitio... 6 5.1. Plantillas...

Más detalles

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas

Más detalles

7.1 Estructura Básica de jas Tablas

7.1 Estructura Básica de jas Tablas Las tablas permiten representar los elementos de una página en filas y columnas separadas entre si. Es una herramienta muy útil para ordenar contenidos de distintas partes de nuestra página. Las tablas

Más detalles

GUÍA 3 Tema: Herramientas de Edición y Pintura.

GUÍA 3 Tema: Herramientas de Edición y Pintura. Diseño Digital II. Guía 3 24 GUÍA 3 Tema: Herramientas de Edición y Pintura. Contenidos Pintura y dibujo Herramientas de edición y pintura. Pintando en Photoshop. Objetivo Específico Ampliar el conocimiento

Más detalles

Computación Aplicada. Universidad de Las Américas. Aula virtual de Computación Aplicada. Módulo de Excel 2013 LIBRO 4

Computación Aplicada. Universidad de Las Américas. Aula virtual de Computación Aplicada. Módulo de Excel 2013 LIBRO 4 Computación Aplicada Universidad de Las Américas Aula virtual de Computación Aplicada Módulo de Excel 2013 LIBRO 4 Contenido FORMATO CONDICIONAL... 3 FORMATOS CONDICIONALES... 3 VARIANTES DE LOS FORMATOS

Más detalles

Se abre una ventana que permite especificar el número de filas y columnas para la tabla.

Se abre una ventana que permite especificar el número de filas y columnas para la tabla. Una tabla está formada por celdas o casillas, agrupadas por filas y columnas. En cada celda se puede insertar texto, números o gráficos. CREAR TABLAS Para crear una tabla accedemos siempre desde la pestaña

Más detalles

GUIA RÁPIDA PARA LA PRESENTACIÓN DE TESIS Y TRABAJOS DE GRADO EN FORMATO DIGITAL PRESENTACIÓN

GUIA RÁPIDA PARA LA PRESENTACIÓN DE TESIS Y TRABAJOS DE GRADO EN FORMATO DIGITAL PRESENTACIÓN GUIA RÁPIDA PARA LA PRESENTACIÓN DE TESIS Y TRABAJOS DE GRADO EN FORMATO DIGITAL PRESENTACIÓN Esta guía describe mediante diez (6) pasos, las recomendaciones mínimas para la presentación de tesis y trabajos

Más detalles

PASOS PARA INGRESAR A WORD 2007

PASOS PARA INGRESAR A WORD 2007 PASOS PARA INGRESAR A WORD 2007 1.- Voy al inicio 2.-busco en todos los programas el maicrosft ofice 3.-y luego elijo el maicrosoft word 2007 Hay varias formas de arrancar Word. Desde el botón Inicio,

Más detalles

MANUALES DE USO DE CENGAGE: Usuario lector

MANUALES DE USO DE CENGAGE: Usuario lector MANUALES DE USO DE CENGAGE: Usuario lector Por: Susana C. Perea O. Julio 2013 Revisión: Dic 2013 1 Índice 1. USO DEL SISTEMA... 2 2. ACCESO A LA APLICACIÓN... 2 3. USO DEL SISTEMA... 2 3.1INICIO... 2 3.2

Más detalles

RESPUESTA A PREGUNTAS INFORMÁTICAS FRECUENTES.

RESPUESTA A PREGUNTAS INFORMÁTICAS FRECUENTES. RESPUESTA A PREGUNTAS INFORMÁTICAS FRECUENTES. La primera vez que se pide a un ordenador que descargue una imagen o la primera vez que se hace con unas claves que se utilizan por 1º vez (por ej: los residentes

Más detalles

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO 1 ÍNDICE DE CONTENIDOS 1 Acceso a la edición de contenidos...3 1.1 Noticias...3 1.2 Utilización del editor de contenidos...6 1. Formato...6

Más detalles

SESIÓN 6 INTRODUCCIÓN A POWER POINT

SESIÓN 6 INTRODUCCIÓN A POWER POINT SESIÓN 6 INTRODUCCIÓN A POWER POINT I. CONTENIDOS: 1. Barra de título. 2. Barra de estado. 3. Barra de desplazamiento. 4. Barra de menús. 5. Barra de herramientas. 6. Opciones de visualización en Power

Más detalles

Conversor de vídeo. Tutorial. Introducción

Conversor de vídeo. Tutorial. Introducción Conversor de vídeo Introducción El conversor de vídeo online es una aplicación web gratuita para convertir vídeo de un formato a otro, también cambiar la resolución y el tamaño del vídeo, directamente

Más detalles

IMPRIMIR FORMATOS EN LOS NAVEGADORES INTERNET EXPLORER, GOOGLE CHROME Y MOZILLA FIREFOX.

IMPRIMIR FORMATOS EN LOS NAVEGADORES INTERNET EXPLORER, GOOGLE CHROME Y MOZILLA FIREFOX. IMPRIMIR FORMATOS EN LOS NAVEGADORES INTERNET EXPLORER, GOOGLE CHROME Y MOZILLA FIREFOX. ÍNDICE Configurar Impresora en Internet Explorer:... 2 Configurar Impresora en Google Chrome:... 3 Configurar Impresora

Más detalles

WorfArt. Final. Obra de teatro. Grupo Gesfomedia

WorfArt. Final. Obra de teatro. Grupo Gesfomedia Final MÁS OPCIONES Vas a crear un cartel para anunciar una obra de teatro. Para hacerlo usa el WordArt y algunas de las opciones especiales que has aprendido. El resultado tiene que ser lo más parecido

Más detalles

CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D)

CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D) APRENDERAPROGRAMAR.COM CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D) Sección: Cursos Categoría: Tutorial básico

Más detalles

Profesor: Vicente Destruels Moreno. Teoría: Tipos de letra (Color de texto)

Profesor: Vicente Destruels Moreno. Teoría: Tipos de letra (Color de texto) Teoría: Tipos de letra (Color de texto) Tipos de letra En este apartado se indica cómo definir cabeceras mediante el elemento , y cómo modificar el tamaño y color de algún grupo de caracteres mediante

Más detalles

Ejercicio corto. Ejercicio corto. Ejercicio corto. Lección 1: Introducción a Word. Lección 2: Modificaciones de documentos

Ejercicio corto. Ejercicio corto. Ejercicio corto. Lección 1: Introducción a Word. Lección 2: Modificaciones de documentos Lección 1: Introducción a Word 1 Cómo se guarda una copia del documento actual sin modificar la versión original? 2 Qué dos formas hay de cerrar un documento? 3 Qué ocurre al hacer clic en el botón que

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: ELABORACIÓN DE HOJAS DE ESTILO Código: CSTI008 total: Horas Objetivo General: Construir Hojas de Estilos para

Más detalles

Mindomo

Mindomo Mindomo www.mindomo.com Descripción: Mindomo es una herramienta en línea gratuita para crear mapas conceptuales, lo que le permite organizar ideas y pensamientos, planificar y monitorear proyectos, definir

Más detalles

GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?

GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo? GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear

Más detalles

DEPARTAMENTO DE EDUCACIÓN VIRTUAL MANUAL PARA ETIQUETAS

DEPARTAMENTO DE EDUCACIÓN VIRTUAL MANUAL PARA ETIQUETAS No. Manual-2013-09-30 DEPARTAMENTO DE EDUCACIÓN VIRTUAL MANUAL PARA ETIQUETAS Elaborado por: Departamento de Educación Virtual (dev@url.edu.gt ) Contenido 1. Insertar texto... 3 2. Insertar imagen... 5

Más detalles

5.2. CONTROLAR CAMBIOS Y RESOLVER DIFERENCIAS.

5.2. CONTROLAR CAMBIOS Y RESOLVER DIFERENCIAS. 5.2. CONTROLAR CAMBIOS Y RESOLVER DIFERENCIAS. Comparar, combinar y realizar diferencias Advertencia: Visualizar, aceptar y rechazar revisiones en PowerPoint no es tan intuitivo como en Microsoft Word.

Más detalles

3.4 FORMATO DE HOJA DE CÁLCULO

3.4 FORMATO DE HOJA DE CÁLCULO .4 FORMATO DE HOJA DE CÁLCULO.4. El cuadro de diálogo Formato de celdas Use las opciones del cuadro de diálogo Formato de celdas para cambiar el formato de los números y el texto en las celdas seleccionadas

Más detalles

IMÁGENES, AUTOFORMAS Y WORDART

IMÁGENES, AUTOFORMAS Y WORDART WORD EJERCICIO 7 IMÁGENES, AUTOFORMAS Y WORDART Para el ejercicio te harán falta dos archivos de imagen: Teléfono rojo.wmf y Ordenador.wmf. Descárgalos de la web del módulo en la carpeta Word de tu memoria

Más detalles

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS4 - URJC

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS4 - URJC Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS4 - URJC Código: 13119 Modalidad Distancia 150 Duración Qué aprenderás? Con este curso aprenderás conocimientos teóricos y prácticos para poder desarrollar

Más detalles

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.) 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

Más detalles

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2 ver. 2 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/9 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 2...1 Procedimiento 1: Diseño con Gimp de una

Más detalles