Bootstrap: Introducción práctico en el Diseño Web

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Bootstrap: Introducción práctico en el Diseño Web"

Transcripción

1 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 al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como responsive design o diseño adaptativo. Para construir una página web se requiere del uso de tres tecnologías base, HTML, CSS y JavaScript. HTML es un leguaje de etiquetas que el navegador interpreta para mostrarnos la estructura de un sitio, CSS se encarga del formato y estilo de la página, mientras que JavaScript le imprime dinamismo y define el comportamiento de una página web. Escribir código para páginas web requiere muchas horas de trabajo y en algún punto nos lleva a identificar patrones típicos en el diseño de sitios web. Por lo tanto, existen algunas librerías que nos permiten reutilizar patrones de diseño ya estructurados e implementados a partir de un framework. Un framework es una librería de herramientas descargable que nos agrega estilo y funcionalidad a nuestro sitio web. Este tipo de herramientas disminuyen el tiempo de desarrollo y hacen más fácil el trabajo del desarrollador. En este artículo, explicaremos como utilizar el framework Bootstrap para construir sitios web desde cero. Bootstrap nos permite brincarnos los detalles de CSS y JavaScript en un principio, y enfocarnos en la construcción del sitio en HTML. Además de que nos permite crear sitios web responsivos y listos para dispositivos móviles. Para motivar un poco al uso de este framework podemos listar algunos sitios que lo utilizan como OpenDesk, Engine Yard, Meteor y Lyft entre otros. Para utilizar bootstrap debemos primero descargarlo de su sitio oficial:

2 y después seleccionar la versión compilada y minimizada como se muestra en la siguiente imagen: Descargaremos con esto un zip con 3 carpetas: css, fonts y js. La carpeta css contiene los estilos, la de fonts contiene tipos de letras usadas por el framework y la carpeta js los archivos Javascript necesarios para su uso. Comenzaremos escribiendo una página simple como se muestra a continuación con el nombre de index.html, debemos de colocarlo dentro de la carpeta que descargamos de la web, es posible renombrar la carpeta si así lo deseamos.

3 Esto nos dará como resultado la siguiente página: Para comenzar a utilizar Bootstrap dentro de nuestra página necesitamos agregar tres cosas, la hoja de estilo al encabezado y dos archivo JavaScript antes de finalizar el cuerpo como se muestra enseguida: Como podemos observar en el paso 3 hemos agregado Jquery, que es una librería requerida por Bootstrap para funcionar, estamos usando una versión desde un servidor público de Google, si queremos usarlo localmente y no tenemos acceso a internet podemos descargarlo a nuestra computadora y referenciarlo localmente.

4 Inmediatamente después de haber agregado estas líneas de código, veremos algunos cambios, como el tipo y el tamaño de letra, y el estilizado de los botones. Lo que haremos a continuación será ir agregando divisiones y clases alrededor de nuestros elementos HTML para estilizar, mediante el framework, nuestro sitio web. En primer lugar iniciaremos con la clase container que agrega márgenes, centrado y envuelve nuestro contenido para hacerlo responsivo. Para esto vamos a crear un div con la clase container que envuelva el contenido del body sin incluir los scripts finales: Si deseamos hacer que nuestra página se alargue al tamaño de la pantalla, especialmente útil si usamos pantallas grandes, podemos hacerlo con la clase container-fluid. Bootstrap está basado en un sistema de 12 columnas, la forma en la que indicamos cuantas columnas abarca cada elemento es mediante las clases.col-md-* donde el * se sustituye por el número de columnas que queremos que mida el elemento. En este caso vamos a estructurar nuestra página de la siguiente forma: col-md-12 col-md-6 col-md-6 col-md-4 col-md-4 col-md-4

5 Vamos a agregar una imagen en la segunda columna del segundo renglón, y acomodar nuestros elementos en sus respectivas divisiones, de manera que nuestro código HTML quedaría de la siguiente forma: Obtendremos como resultado la página que se muestra a continuación: Para tener una mejor lectura de código vamos a agrupar los elementos por filas mediante la clase row. Recordemos que como es un sistema de 12 columnas todas las filas deben sumar 12.

6 Ahora utilizaremos las clases lead y text-*, donde el * puede ser left, right, center, justify o nowrap, para resaltar el texto y modificar su alineación respectivamente. En la siguiente imagen se muestra el código para aplicar el centrado al texto de la última fila y a sus tres columnas respectivamente, solo basta con agregar la clase text-center al div con la clase row. Con esto dos cambios la página se debe ver de la siguiente forma:

7 Bootstrap también nos provee de iconografía, para poder utilizarlos debemos agregar un elemento i con las clases glyphicon y glypicon-* donde el * es el nombre del ícono, para ver todos los iconos disponibles consulte: Vamos nosotros a agregar un icono para cada y al mismo tiempo agregaremos otra clase a esa fila en particular llamada courses de manera que el código se debe ver así: Como queremos que estos iconos sean un poco mas grandes que el tamaño actual, vamos a utilizaremos la clase courses agregada a la fila para cambiar el tamaño por defecto de estos iconos a 32px por medio de CSS. Adicionalmente podemos usar un archivo CSS externo si así lo necesitamos y hacer otros cambios personalizados. Con estos cambios ya tenemos una página más presentable pero nos hacen falta algunos cambios en los estilos para mejorar su visualización:

8 Agregamos text-right a la columna de la imagen para alinearla a la derecha. Vamos a utilizar la clase well para darle un fondo gris y bordes redondeados a la parte superior de nuestra página. Luego estilizamos los botones adicionando la clase btn a cada uno y al primer botón usamos btn-default y al segundo btnprimary. Opcionalmente podemos usar la clase btn-lg en los botones para hacerlos un poco más grandes. Cuando hacemos mas pequeño el navegador la imagen salta a la siguiente línea y queda desajustada, en este caso podemos hacer que la imagen se oculte para los dispositivos con pantallas chicas como es el caso de los teléfonos móviles. Para esto utilizamos la clase hidden-xs. La siguiente imagen muestra como se vería la página en un dispositivo móvil.

9 Para saber un poco más acerca de diseño responsivo podemos consultar el artículo de Ethan Marcotte a quien se le atribuye este concepto en Al final nuestra página quedo de la siguiente forma:

10 Bootstrap es aún más extenso sin embargo en un solo artículo no nos alcanzaría el espacio para poder explicarlo por completo, esto es solo una muestra de lo mucho que este framework nos facilita el desarrollo de aplicaciones web. Existen algunas alternativas a esta herramienta como es el caso de Foundation, sin embargo Bootstrap es el más popular entre los desarrolladores.

Desarrollo Web Front-End utilizando Diseño Adaptativo. Ing. Henry Llanos Carranza

Desarrollo Web Front-End utilizando Diseño Adaptativo. Ing. Henry Llanos Carranza Desarrollo Web Front-End utilizando Diseño Adaptativo Ing. Henry Llanos Carranza Objetivos Desarrollo Web Front-End utilizando Diseño Adaptativo 2 Objetivos Conocer el uso Diseño Adaptativo en el Diseño

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

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

Más detalles

TFM Comunicación, Redes y Gestión de Contenidos

TFM Comunicación, Redes y Gestión de Contenidos TFM Comunicación, Redes y Gestión de Contenidos Aplicación móvil hibrida para control de asistencia y servicio técnico a domicilio y gestión de partes de trabajo Autor: Patricia Paguay Lara Tutorizado

Más detalles

Desarrollo de Aplicaciones Móviles. Proceso de creación de un sitio web en Artisteer. San Agustín Vidal Leonardo Daniel. 10ITI1

Desarrollo de Aplicaciones Móviles. Proceso de creación de un sitio web en Artisteer. San Agustín Vidal Leonardo Daniel. 10ITI1 Desarrollo de Aplicaciones Móviles. Proceso de creación de un sitio web en Artisteer. San Agustín Vidal Leonardo Daniel. 10ITI1 Arciniega Martínez Fernando. 08/11/2015 Introducción. La finalidad este manual

Más detalles

Elaborando WebQuest usando Power Point

Elaborando WebQuest usando Power Point Módulo WebQuest Elaborando WebQuest usando Power Point 2.1.- Creación de WebQuest usando el Miscrosoft Power Point En el Power Point le colocamos un Estilo a nuestra Diapositiva para iniciar nuestra Creación

Más detalles

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

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º 10 Nombre de la práctica: Maquetación de páginas web Lugar de ejecución: Laboratorio

Más detalles

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales.

Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. Qué es Powerpoint 2010? Powerpoint es un programa incluido en la suite de Microsoft Office, que nos ofrece la posibilidad de crear presentaciones profesionales. El entorno de trabajo En la siguiente imagen

Más detalles

Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015

Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Modalidad de realización del curso: Número de Horas: Titulación: Online 140 Horas Diploma acreditativo con las horas del curso OBJETIVOS Este

Más detalles

BASES DE DATOS - Microsoft ACCESS 2007-

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

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

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

Más detalles

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1 DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1 DREAMWEAVER CS5. ENTORNO DE DESARROLLO. Dreamweaver es una aplicación propietario que facilita la labor del desarrollador Web y le permite

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

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C Introducción Internet en la actualidad 7 El World Wide Web Consortium y los estándares 7 Los programas de creación de sitios web 7 Objetivo del libro 8 Interfaz de creación El entorno del sistema 9 La

Más detalles

NOTAS TÉCNICAS SOBRE EL SIT: Comunicados (II)

NOTAS TÉCNICAS SOBRE EL SIT: Comunicados (II) NOTAS TÉCNICAS SOBRE EL SIT: Comunicados (II)... 2 Qué son y para qué sirven los modelos HTML... 2 Creación de un modelo HTML... 3 por defecto... 6 Enviar documentos basados en modelos HTML... 7 Envíos

Más detalles

D.1 Sitio web del proyecto. Tipo de documento: Entregable 05/11/2012

D.1 Sitio web del proyecto. Tipo de documento: Entregable 05/11/2012 D.1 Sitio web del proyecto Tipo de documento: Entregable 05/11/2012 2 Índice Funcionalidades Error! Marcador no definido. Estructura 3 Diseño 5 Temporización 5 3 Funcionalidades La web del proyecto ecoraee

Más detalles

Framework de twitter para desarrollo de aplicaciones web

Framework de twitter para desarrollo de aplicaciones web Bootstrap 3.0 Aplicaciones Web/Sistemas Web Juan Pavón Mestras Dep. Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense Madrid Curso de Aplicaciones Web/Sistemas

Más detalles

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página ADMINISTRACIÓN DEL SITIO WEB Todos los jefes de Departamento, coordinadores de proyectos y directivos del Centro somos administradores de la página web. Cada uno tendrá la responsabilidad de administrar

Más detalles

CUADERNIA 2.0. CÓMO INSTALAR CUADERNIA 2.0 Para instalar Cuadernia debemos seguir los siguientes pasos:

CUADERNIA 2.0. CÓMO INSTALAR CUADERNIA 2.0 Para instalar Cuadernia debemos seguir los siguientes pasos: CUADERNIA 2.0 Se trata de una herramienta fácil y funcional que nos permite crear de forma dinámica ebooks o libros digitales en forma de cuadernos compuestos por contenidos multimedia y actividades educativas

Más detalles

Técnico Especialista en Diseño Web Profesional con Dreamweaver CS6

Técnico Especialista en Diseño Web Profesional con Dreamweaver CS6 Técnico Especialista en Diseño Web Profesional con Dreamweaver CS6 TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO EUROPEO DE ESTUDIOS EMPRESARIALES Técnico Especialista en Diseño

Más detalles

Qué es una base de datos?

Qué es una base de datos? Qué es una base de datos? Una base de datos es un conjunto de datos organizados en filas y columnas. Access 2010 es una base de datos relacional, con lo que aún estando los datos guardados en tablas diferentes

Más detalles

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010 Word 2007 Arrancar Word Clic en inicio Clic en Microsoft Word 2010 Nuestro primer documento Tarea 1 Escribiremos nuestros datos: Busca 1º Cambiamos formato de guardado: 3º 2º 4º Guardar un documento Dónde

Más detalles

INSTALACIÓN DE MEDPRO

INSTALACIÓN DE MEDPRO 1 Estimado Cliente: Uno de los objetivos que nos hemos marcado con nuestra nueva plataforma de gestión, es que un cliente pueda instalar MedPro y realizar su puesta en marcha de forma autónoma. Siga paso

Más detalles

PERSONALIZAR OUTLOOK EXPRESS

PERSONALIZAR OUTLOOK EXPRESS PERSONALIZAR OUTLOOK EXPRESS Outlook Express es completamente personalizable y se puede adaptar para satisfacer las necesidades particulares de cada usuario. Casi todas las opciones de configuración de

Más detalles

Componente com_weblinks para listados de enlaces web a modo de directorio en Joomla. (CU00442A)

Componente com_weblinks para listados de enlaces web a modo de directorio en Joomla. (CU00442A) aprenderaprogramar.com Componente com_weblinks para listados de enlaces web a modo de directorio en Joomla. (CU00442A) Sección: Cursos Categoría: Curso creación y administración web: Joomla desde cero

Más detalles

PLANTILLAS EN MICROSOFT WORD

PLANTILLAS EN MICROSOFT WORD PLANTILLAS EN MICROSOFT WORD Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo de la fuente, el tamaño,

Más detalles

Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...

Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor... Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir

Más detalles

InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003).

InfoPath forma parte del paquete ofimático de Microsoft desde la versión XP (2003). Formularios Los Sistemas Informacionales utilizan los datos derivados de los OAS y Transaccionales (nóminas, facturaciones, etc.) para, en su aspecto más básico, generar informes que ayuden a los directivos

Más detalles

Técnico Profesional en Diseño con Adobe Dreamweaver CC 2015 (Curso Homologado con Titulación Universitaria + 20 Créditos tradicionales LRU)

Técnico Profesional en Diseño con Adobe Dreamweaver CC 2015 (Curso Homologado con Titulación Universitaria + 20 Créditos tradicionales LRU) Técnico Profesional en Diseño con Adobe Dreamweaver CC 2015 (Curso Homologado con Titulación Universitaria + 20 Créditos tradicionales LRU) TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO

Más detalles

Certificación IT en Adobe Dreamweaver CC 2015 (Online)

Certificación IT en Adobe Dreamweaver CC 2015 (Online) Certificación IT en Adobe Dreamweaver CC 2015 (Online) TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO EUROPEO DE ESTUDIOS EMPRESARIALES Certificación IT en Adobe Dreamweaver CC 2015

Más detalles

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL OBJETIVO El alumno aprenderá a configurar un servidor local para realizar diferentes pruebas de la página hasta publicar el sitio web en Internet. TEMARIO 2.1 INTRODUCCIÓN

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

Más detalles

Manual de uso: Editor Web del CMS

Manual de uso: Editor Web del CMS Manual de uso: Editor Web del CMS Este manual sirve de apoyo para aquellas personas que usen el CMS y requieran editar textos dentro del mismo. Índice: 1. Cómo copiar texto desde Word? 2. Cómo resaltar

Más detalles

Informes. 3. Elija la opción Nuevo (en la parte superior de la ventana) 4. Elija Autoinformes: en tablas y luego la tabla o consulta que se usará.

Informes. 3. Elija la opción Nuevo (en la parte superior de la ventana) 4. Elija Autoinformes: en tablas y luego la tabla o consulta que se usará. Informes Se pueden imprimir fácilmente los registros en una tabla o el resultado de un filtro simplemente usando el botón de Impresora de la barra de herramientas, o la opción Archivo / Imprimir. Sin embargo,

Más detalles

Páginas multimedia Dashboard www.webardora.net

Páginas multimedia Dashboard www.webardora.net En este tipo de página web podremos crear una tabla con una serie de celdas independientes (las celdas pueden combinarse) susceptibles de incluir diversos tipos de contenido inicial y asociar diversas

Más detalles

Una plantilla es un documento de Word 2003 con la característica de que el tipo de documento es plantilla de documento (.dot).

Una plantilla es un documento de Word 2003 con la característica de que el tipo de documento es plantilla de documento (.dot). Unidad 3. Plantillas Objetivos de la unidad: Una plantilla es un documento prediseñado que usted puede usar para crear nuevos documentos con el mismo formato. A través de una plantilla, el aspecto de un

Más detalles

MANUAL. J. Enrique Durán Colaborador TIC Huesca

MANUAL. J. Enrique Durán Colaborador TIC Huesca MANUAL ÍNDICE 1.- QUÉ ES DROPBOX. 2.- DESCARGA DE DROPBOX 3.- INTRODUCCIÓN 4.- ARCHIVOS 4.1.- INVITAR A CARPETA 4.2.- COMPARTIR VÍNCULO 4.3.- DESCARGAR 4.4.- ELIMINAR 4.5.- CAMBIAR NOMBRE 4.6.- MOVER 4.7.-

Más detalles

Curso POWERPOINT 97. Introducción

Curso POWERPOINT 97. Introducción Curso POWERPOINT 97 Introducción El curso PowerPoint 97 está destinado a aquellos alumnos que necesiten crear presentaciones que informen de la evolución de un proyecto. PowerPoint es un programa de edición

Más detalles

(Objetivo) Curso de Informática Básica. Word 2003. Índice. Word 2003. Conceptos Básicos. Uso avanzado de Word. Universidad Rey Juan Carlos

(Objetivo) Curso de Informática Básica. Word 2003. Índice. Word 2003. Conceptos Básicos. Uso avanzado de Word. Universidad Rey Juan Carlos Universidad Rey Juan Carlos Estefanía Martín Liliana P. Santacruz Laboratorio de Tecnologías de la Información en la Educación 2 Objetivo Entender los conceptos procesador de texto y sistema de tratamiento

Más detalles

Manual CMS Mobincube

Manual CMS Mobincube Manual CMS Mobincube CMS Mobincube Qué es? El CMS (Sistema de Gestión de Contenidos) es un completo website que permite la creación y actualización de contenido remoto. De esta forma, una vez creada una

Más detalles

Personalización de la Base de Datos

Personalización de la Base de Datos Personalización de la Base de Datos Tabla de contenidos 1.- INTRODUCCIÓN... 3 2.- CREACIÓN DE UNA VENTANA DE ENTRADA (FORMULARIO)... 3 3.- AGREGACIÓN DE UN CONTROL DE BOTÓN PARA ABRIR EL FORMULARIO PROVEEDORES

Más detalles

Los sistemas operativos

Los sistemas operativos 1. Combinación de correspondencia en LibreOffice Writer En esta práctica crearemos una carta personalizada para diez destinatarios diferentes utilizando la herramienta de combinación de correspondencia.

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO: 01/ 2015 Nombre de la Practica: Lugar de Ejecución: Tiempo Estimado: Materia: GUIA DE LABORATORIO #06 Introducción a Excel. Tablas y datos,

Más detalles

Curso Diseño Web con Software libre, VNU

Curso Diseño Web con Software libre, VNU 1. - QUE ES VNU? NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin

Más detalles

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009)

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: domingo, 15 de febrero de 2009) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos

Más detalles

Curso de Frontend Online HTML5, CSS3, JavaScript, jquery y Responsive Design

Curso de Frontend Online HTML5, CSS3, JavaScript, jquery y Responsive Design Curso de Frontend Online HTML5, CSS3, JavaScript, jquery y Responsive Design Objetivo General: Al final del curso el estudiante tendrá los conocimientos y habilidades necesarios para generar (diseñar y

Más detalles

Combinar correspondencia (I)

Combinar correspondencia (I) Combinar correspondencia (I) Mediante la opción Combinar correspondencia Word2007 nos permite incluir en un documento, datos almacenados en otro sitio. De esta forma podremos obtener copias de un mismo

Más detalles

CL_55010 Sharepoint Designer 2010 - Customizing and Branding SharePoint 2010 and Office 365

CL_55010 Sharepoint Designer 2010 - Customizing and Branding SharePoint 2010 and Office 365 Sharepoint Designer 2010 - Customizing and Branding SharePoint 2010 and Office 365 www.ked.com.mx Av. Revolución No. 374 Col. San Pedro de los Pinos, C.P. 03800, México, D.F. Tel/Fax: 52785560 Introducción

Más detalles

CURSO DE ACCESS 2007 BÁSICO

CURSO DE ACCESS 2007 BÁSICO CURSO DE ACCESS 2007 BÁSICO Aprender la gestión básica de datos empleando Access. El alumno a la finalización del curso sabrá crear una tabla, introducir, modificar y borrar los datos de la misma, realizar

Más detalles

Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6 (Online)

Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6 (Online) Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6 (Online) Titulación certificada por EUROINNOVA BUSINESS SCHOOL Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6 (Online)

Más detalles

CURSO DE INTRODUCCIÓN AL WORD

CURSO DE INTRODUCCIÓN AL WORD CURSO DE INTRODUCCIÓN AL WORD 1. INTRODUCCIÓN 2. PRIMER DOCUMENTO 3. UN EJEMPLO 4. TABLAS 5. FORMATO DE PAGINAS Y COLUMNAS 6. ORTOGRAFÍA, GRAMÁTICA Y SINÓNIMOS 7. WORDART 8. IMPRIMIR UN DOCUMENTO INTRODUCCIÓN

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

Tema 8. Creación y diseño de un sitio web

Tema 8. Creación y diseño de un sitio web 1. Interfaz de Dreamweaver MX El entorno de trabajo de Dreamweaver está compuesto por una serie de ventanas, paneles y otros elementos configurables por el usuario. En la Figura 1 podemos ver una posible

Más detalles

CURSO DE INFORMATICA 2005

CURSO DE INFORMATICA 2005 CURSO DE INFORMATICA 2005 Qué es Outlook? Outlook es un programa de Microsoft que se usa principalmente para recibir y enviar correos electrónicos. Además posee otros accesorios como Agenda, Calendario

Más detalles

DEPARTAMENTO: 09640 - Habilidades Básicas en Computación

DEPARTAMENTO: 09640 - Habilidades Básicas en Computación FACULTAD: Ingenierías DEPARTAMENTO: TIC MATERIA: 09640 - Habilidades Básicas en Computación PRERREQUISITOS Ninguno PROGRAMA: Todos los programas de pregrado PERIODO ACADÉMICO: 2015-01 INTENSIDAD HORARIA:

Más detalles

HOJA DE CALCULO EXCEL NIVEL II

HOJA DE CALCULO EXCEL NIVEL II HOJA DE CALCULO EXCEL NIVEL II DURACION: 30 HORAS Los participantes al finalizar la acción formativa serán capaces de utilizar la hoja de cálculo EXCEL, adquiriendo los conocimientos teóricos y prácticos

Más detalles

Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder

Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder Ministerio de Educación Base de datos en la Enseñanza. Open Office Módulo 5: Report Builder Instituto de Tecnologías Educativas 2011 Informes con Oracle Report Builder En su configuración original, OpenOffice

Más detalles

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011)

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: miércoles, 2 de marzo de 2011) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos con

Más detalles

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar

Más detalles

AGREGAR COMPONENTES ADICIONALES DE WINDOWS

AGREGAR COMPONENTES ADICIONALES DE WINDOWS INSTALACIÓN DE IIS EN WINDOWS XP El sistema está desarrollado para ejecutarse bajo la plataforma IIS de Windows XP. Por esta razón, incluimos la instalación de IIS (Servidor de Web) para la correcta ejecución

Más detalles

Desarrollo de una aplicación de ejemplo: movilidapp. Desarrollado por movilidapp www.movilidapp.com

Desarrollo de una aplicación de ejemplo: movilidapp. Desarrollado por movilidapp www.movilidapp.com Desarrollo de una aplicación de ejemplo: movilidapp Desarrollado por movilidapp www.movilidapp.com Introducción Veamos un ejemplo de construcción de una App con Mi Aplicación. Concretamente la App de movilidapp,

Más detalles

TÉCNICAS DE GESTIÓN ADMINISTRATIVA PARA PEQUEÑAS EMPRESAS

TÉCNICAS DE GESTIÓN ADMINISTRATIVA PARA PEQUEÑAS EMPRESAS COMBINAR CORRESPONDENCIA CON OFFICE 2003 Combinar correspondencia nos permite incluir en un documento datos almacenados en otro lugar. De esta forma podremos obtener copias de un mismo documento pero con

Más detalles

Responsive Web Sites with Certified Adobe Dreamweaver CC

Responsive Web Sites with Certified Adobe Dreamweaver CC Dirigido a: Diseñadores gráficos e ilustradores interesados en crear web Programadores y diseñadores Web. Profesionistas, docentes y estudiantes relacionados con el área. Profesionistas interesados o publico

Más detalles

UNIDAD I PROCESADOR DE TEXTOS

UNIDAD I PROCESADOR DE TEXTOS UNIDAD I PROCESADOR DE TEXTOS 1. Entorno de Microsoft Word 2007 Lic. Silvia Mireya Hernández Hermosillo 1.1 INTRODUCCIÓN 1.1.1 Generalidades de Microsoft Word 2007 Microsoft Word 2007 es un procesador

Más detalles

RIA. http://goo.gl/zhfj7. Desarrollo con Tecnologías Open Source. Diego F. Quiroga diegoq@unsl.edu.ar

RIA. http://goo.gl/zhfj7. Desarrollo con Tecnologías Open Source. Diego F. Quiroga diegoq@unsl.edu.ar http://goo.gl/zhfj7 Desarrollo con Tecnologías Open Source Diego F. Quiroga diegoq@unsl.edu.ar Tecnologías de la Información Universidad Nacional de San Luis Introducción Las nuevas tecnologías y estándares

Más detalles

Especialista en Creación de Portales Web con Joomla 3.3

Especialista en Creación de Portales Web con Joomla 3.3 Especialista en Creación de Portales Web con Joomla 3.3 TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO EUROPEO DE ESTUDIOS EMPRESARIALES Especialista en Creación de Portales Web

Más detalles

CONOCIMIENTOS ESENCIALES PARA OFICINAS

CONOCIMIENTOS ESENCIALES PARA OFICINAS CONOCIMIENTOS ESENCIALES PARA OFICINAS DURACIÓN Y OBJETIVOS DEL CURSO OBJETIVOS: Todo profesional debe ser muy versátil, ya que en muchos casos ejerce labores muy variadas y que requiere de una preparació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

Escuela Industrial Superior SISTEMAS OPERATIVOS. Windows 7 Conceptos básicos. Ventajas de Windows. Elementos de trabajo

Escuela Industrial Superior SISTEMAS OPERATIVOS. Windows 7 Conceptos básicos. Ventajas de Windows. Elementos de trabajo SISTEMAS OPERATIVOS Un Sistema Operativo (SO, frecuentemente OS, del inglés Operating System) es un programa o conjunto de programas que en un Sistema Informático controla los recursos de hardware y gestiona

Más detalles

Informe de Sistema Reserva de Salas

Informe de Sistema Reserva de Salas Informe de Sistema Reserva de Salas Nombre: Wilder Julio Espinoza Bravo DNI: 46635819 Dirección: Urb. Hijos de Apurímac Manzana F2 Lote 7 Sta. Clara Celular: 940 245 605 Teléfono Fijo: 3562677 Adjunto

Más detalles

SESIÓN 6 INTRODUCCIÓN A WORD.

SESIÓN 6 INTRODUCCIÓN A WORD. SESIÓN 6 INTRODUCCIÓN A WORD. I. CONTENIDOS: 1. La pantalla de Word. 2. Partes de la pantalla de Word. 3. Funcionamiento de los menús. 4. Distintas formas de ver un documento. 5. Trabajar con varios documentos

Más detalles

Manual de ayuda para la utilización del Correo Interno en el Campus Virtual

Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Página 1 de 12 Contenido 1. INTRODUCCIÓN... 3 2. CONFIGURACIÓN DEL BLOQUE DE CORREO INTERNO... 3 3. GESTIÓN DEL CORREO... 4 4.

Más detalles

TUTORIAL GOOGLE DOCS

TUTORIAL GOOGLE DOCS TUTORIAL GOOGLE DOCS Las principales ventajas de Google Docs son: Nuestros documentos se almacenan en línea: esto nos permite acceder a ellos desde cualquier ordenador con conexión a internet, y compartirlos

Más detalles

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH Jornadas de INCLUSION DIGITAL a través de las TIC ORGANIZAN: CAPACITA: CLAEH Con Google Docs puedes crear, compartir y editar documentos online con facilidad. A continuación te indicamos algunas acciones

Más detalles

White Paper: Responsive Design para Email

White Paper: Responsive Design para Email El Responsive Design o diseño adaptativo es una técnica de diseño y desarrollo html que permite que con una sola versión del HTML, se cubran todas las resoluciones de pantalla. El email o página web en

Más detalles

Fuente: http://www.kzgunea.net

Fuente: http://www.kzgunea.net APRENDE A NAVEGAR INTERNET EXPLORER El navegador Internet Explorer ya lo tenemos integrado en el Sistema Operativo, en sus diferentes versiones desde Windows 95, por lo cual no tendremos que instalarlo.

Más detalles

Elaboración de un Formulario Web utilizando ASP.NET desde cero.

Elaboración de un Formulario Web utilizando ASP.NET desde cero. Elaboración de un Formulario Web utilizando ASP.NET desde cero. Realizado por: Fabricio.A.Santillana.V. 2-718-1147 TABLA DE CONTENIDO Pág. Introducción...3 Objetivos...4 Contenido...5 1. Introducción a

Más detalles

La visualización de la ventana de Word tiene las siguientes partes:

La visualización de la ventana de Word tiene las siguientes partes: TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación

Más detalles

Prácticas con Elastix Asterisk - Lab. 3

Prácticas con Elastix Asterisk - Lab. 3 1-1-2015 Prácticas telefonía IP Prácticas con Elastix Asterisk - Lab. 3 Jesse Padilla Agudelo Adaptado por Ing. Pedro Alberto Arias Quintero SENA - CIMI Red de telefonía para práctica inicial a trabajar

Más detalles

Movistar Tu Web Manual de Usuario

Movistar Tu Web Manual de Usuario Movistar Tu Web Manual de Usuario Contenido 1. Introducción... 1 2. Visión general de la aplicación online Tu Web... 2 3. Páginas... 3 Añadir una nueva página o una carpeta... 4 Editar páginas... 4 4.

Más detalles

1 MANUAL DE INSTALACIÓN

1 MANUAL DE INSTALACIÓN 1 MANUAL DE INSTALACIÓN El software necesario para la ejecución de las aplicaciones se incluye en el apartado software del cd del proyecto. Aún así, a continuación se explica como poder descargar los programas

Más detalles

Tema: CREACIÓN DE CONSULTAS E INFORMES EN UNA BASE DE DATOS CON MICROSOFT ACCESS 2013.

Tema: CREACIÓN DE CONSULTAS E INFORMES EN UNA BASE DE DATOS CON MICROSOFT ACCESS 2013. Empremática, Guía12 1 Facultad: Ingeniería Escuela: Computación Asignatura: Empremática Tema: CREACIÓN DE CONSULTAS E INFORMES EN UNA BASE DE DATOS CON MICROSOFT ACCESS 2013. Objetivos: Identificar las

Más detalles

Diseño Web. Temario. www.capacitaciongrafica.com

Diseño Web. Temario. www.capacitaciongrafica.com Diseño Web Temario Diseño Web Temario Objetivos: Que el alumno aprenda a Diseñar y Desarrollar sitios web informativos, dinámicos e interactivos cumpliendo con los estandares del diseño web mundial. Al

Más detalles

Tècnic Auxiliar en Disseny Industrial - Manual Autocad 2011. Atributos. Un atributo es un objeto que se crea e incluye con una definición de bloque.

Tècnic Auxiliar en Disseny Industrial - Manual Autocad 2011. Atributos. Un atributo es un objeto que se crea e incluye con una definición de bloque. ATRIBUTOS Un atributo es un objeto que se crea e incluye con una definición de bloque. Los atributos pueden almacenar datos como números de serie, nombres de productos, etc. Ejemplos de algunas aplicaciones

Más detalles

Cloud Hosting. Cloud Hosting. Manual Instructivo. Primeros pasos con SmartMail versión 2

Cloud Hosting. Cloud Hosting. Manual Instructivo. Primeros pasos con SmartMail versión 2 Cloud Hosting Manual Instructivo Primeros pasos con SmartMail versión 2 SmartMail es una poderosa herramienta de Marketing vía email que le permite crear, administrar y analizar sus envíos de la manera

Más detalles

Observe las diferencias entre las distintas posibilidades de alineación del texto. En la figura 3.38 se muestra Alineación del texto.

Observe las diferencias entre las distintas posibilidades de alineación del texto. En la figura 3.38 se muestra Alineación del texto. 3.6.3 Alineación del texto. La manera más fácil de cambiar la alineación del texto en el documento es utilizar los botones de alineación de la barra de herramientas Formato. En el Cuadro de diálogo Párrafo

Más detalles

Wikis Trabajando en una Wiki

Wikis Trabajando en una Wiki Wikis Trabajando en una Wiki Contenido CONTENIDO... 1 VENTANA PRINCIPAL DEL WIKI... 2 AGREGAR UNA NUEVA PÁGINA... 4 EDICIÓN DE UNA PÁGINA... 5 DAR FORMATO A LA PÁGINA... 7 DESHACER Y REHACER ACCIONES...

Más detalles

Manual de Plantillas para Listados

Manual de Plantillas para Listados 1 Manual de Plantillas para Listados 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 21/09/2010

Más detalles

Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE

Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE . Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE El entorno de trabajo La página tiene como base una plantilla

Más detalles

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

Más detalles

Nombre. El nombre corto del recurso. Éste será mostrado en la página principal de curso.

Nombre. El nombre corto del recurso. Éste será mostrado en la página principal de curso. 4.4. ENLAZAR UN ARCHIVO O UNA PÁGINA WEB 4.4.1. Características El contenido de un curso no sólo se limita a los creados mediante los editores de Moodle, puesto que este tipo de recursos permite enlazar

Más detalles

Cómo crear tu propio tema gráfico para Chamilo paso a paso

Cómo crear tu propio tema gráfico para Chamilo paso a paso Cómo crear tu propio tema gráfico para Chamilo paso a paso Autor de este documento: el equipo de Contidos Dixitais Fecha de creación: 9 de mayo de 2012 Válido para: versión 1.8.8.4 de Chamilo LMS Cómo

Más detalles

MICROSOFT FRONTPAGE Contenido

MICROSOFT FRONTPAGE Contenido MICROSOFT FRONTPAGE Contenido CREAR UN SITIO WEB... 2 MARCOS... 5 FONDO DE LA PÁGINA... 7 MARQUESINAS... 8 CREAR HIPERVÍNCULOS... 9 BOTONES ACTIVABLES... 11 LOS MAPAS DE IMÁGENES... 13 INSERTAR SONIDOS...

Más detalles

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 Manual de Formulario info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 MANUAL DE FORMULARIO CONTROL DEL DOCUMENTOS Realizado (21/01/2010) Inmaculada Peña Ruiz Técnico Revisado

Más detalles

Técnico TIC en Diseño Web Responsive con HTML5 y CSS3

Técnico TIC en Diseño Web Responsive con HTML5 y CSS3 Técnico TIC en Diseño Web Responsive con HTML5 y CSS3 TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO EUROPEO DE ESTUDIOS EMPRESARIALES Técnico TIC en Diseño Web Responsive con HTML5

Más detalles

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0 ADAPTAEMPLEO INFORME ACCESIBILIDAD octubre 2013 Versión 1.0 1.0 Primera versión del documento. CONTROL DE CAMBIOS Índice de Contenido 1. ACCESIBILIDAD WEB...4 2. PUNTOS DE VERIFICACIÓN...5 2.1. IMÁGENES

Más detalles

UNIDAD 4 HIPERENLACES

UNIDAD 4 HIPERENLACES UNIDAD 4 HIPERENLACES OBJETIVO El alumno será capaz de crear, modificar y probar hipervínculos personalizados en un documento de Dreamweaver. TEMARIO 4.1 CONCEPTO Y TIPOS DE ENLACES 4.2 PERSONALIZAR NUEVOS

Más detalles

Herramientas de Google

Herramientas de Google 1 Índice de contenido Licencia y condiciones de uso...3 Introducción...4 Crear sitio...5 Acceso a Google Sites...5 Registro del sitio...6 La página de inicio...8 Añadir páginas...9 Añadir páginas...9 Página

Más detalles