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

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

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

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

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

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

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

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

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

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

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

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

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

Diseño de páginas web 2011

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

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

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

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

BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL I

BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL I BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL I [Escriba texto] Contenido INTRODUCCIÓN... 3 CAPÍTULO I: Crear Reportes Desde Carpetas Publicas... 4 CAPÍTULO II: Editar Reportes... 6 CAPÍTULO III: Visualización

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

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

Desarrollo Web. Realizamos todo tipo de páginas web adaptando el diseño a tus gustos y posibilidades.

Desarrollo Web. Realizamos todo tipo de páginas web adaptando el diseño a tus gustos y posibilidades. Tarifas 2015 Página 1 Desarrollo Web Realizamos todo tipo de páginas web adaptando el diseño a tus gustos y posibilidades. Tu web Profesional al mejor precio. Usamos las mejores tecnologías y bajamos los

Más detalles

Manual del Usuario de correo Webmail Consejo General de Educación INDICE

Manual del Usuario de correo Webmail Consejo General de Educación INDICE INDICE INDICE... 1 WEBMAIL... 3 QUE ES EL WEBMAIL?...3 COMO INGRESAR AL WEBMAIL?...3 1º Paso:...3 2º Paso:...4 3º Paso:...5 Bandeja de Entrada...5 De:...6 Fecha:...6 Asunto:...6 Tamaño:...6 CÓMO ESCRIBIR

Más detalles

Manual de Uso XML-Whois de Neubox. Manual del Sistema de XML Whois de Neubox Versión 9.12.4

Manual de Uso XML-Whois de Neubox. Manual del Sistema de XML Whois de Neubox Versión 9.12.4 Manual del Sistema de XML Whois de Neubox Versión 9.12.4 1 Índice Sección Página I. Introducción........ 3 II. Contenido del paquete............ 4 III. Instalación y uso....... 5 1. Cómo comprobar la plantilla......

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

Cómo modifico un formato de impresión

Cómo modifico un formato de impresión Cómo modifico un formato de impresión 1 Abre la plantilla en CONTPAQi Formatos Digitales Los sistemas comerciales ya contienen varias plantillas con diferentes estilos, tanto genéricas, como especiales

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

ENTORNO DE DESARROLLO MICROSOFT.NET 2010

ENTORNO DE DESARROLLO MICROSOFT.NET 2010 ENTORNO DE DESARROLLO MICROSOFT.NET 2010 UNIDAD 2 Estructura de contenidos: 1. Conociendo ASP 2. Sitio Web y Proyecto Web 3. WebForm 4. Características de los webforms 5. Entorno del.net 6. Controles básicos

Más detalles

Creación de contenidos en WebBuilder. Herramienta Web Builder en Word de Microsoft Office

Creación de contenidos en WebBuilder. Herramienta Web Builder en Word de Microsoft Office Creación de contenidos en WebBuilder Herramienta Web Builder en Word de Microsoft Office Una vez instalada el Plug-In de la herramienta Web Builder para el Word de Microsoft Office, esta se mostrará en

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

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

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

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

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

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

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

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

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

MANUAL COMISIONISTA 2 Tabla de contenido

MANUAL COMISIONISTA 2 Tabla de contenido MANUAL COMISIONISTA MANUAL COMISIONISTA 2 Tabla de contenido 1. Introducción... 3 2. Implementación del sistema... 4 1.1 Requerimientos de hardware... 5 1.2 Requerimientos de software... 5 1.3 Descripción

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

Manual de uso básico de la aplicación

Manual de uso básico de la aplicación Manual de uso básico de la aplicación Autor del documento Centro de Apoyo Tecnológico a Emprendedores, Fundación Parque Científico y Tecnológico de Albacete Datos de contacto E-Mail: bilib@bilib.es Página

Más detalles

Gestión de plantillas en Joomla!

Gestión de plantillas en Joomla! Gestión de plantillas en Joomla! Aplicaciones web. 2º SMR 1. Gestionar las plantillas de Joomla! 2. Instalar una nueva plantilla en tu web 3. Modificar el diseño de una plantilla instalada 1. Gestionar

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

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

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

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

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

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

Paso 1 de 10. Paso 2 de 10. Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación

Paso 1 de 10. Paso 2 de 10. Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación Guía de aprendizaje de Flash CS5 Tutorial 13 - Publicación y exportación Paso 1 de 10 Una vez que hemos creado una película Flash, sea una animación, un juego, un recurso educativo, etc., el último paso

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

Informática I ACI-191

Informática I ACI-191 ACI-983 Informática I ACI-191 Taller de Informática Escuela de Ingeniería Unidad IV : Software de Planilla de Cálculo TEMA 1: Microsoft Excel No todo el mundo sabe cuál es la potencialidad real de una

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

Instalación del Admin CFDI

Instalación del Admin CFDI Instalación del Admin CFDI Importante!!!Antes de comenzar verifique los requerimientos de equipo esto podrá verlo en la guía 517 en nuestro portal www.control2000.com.mx en el apartado de soporte, ahí

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

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

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

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

Tabla dinámica. Vamos a crear una tabla dinámica a partir de un conjunto de datos.

Tabla dinámica. Vamos a crear una tabla dinámica a partir de un conjunto de datos. Tabla dinámica Una tabla dinámica consiste en el resumen de un conjunto de datos, atendiendo a uno o varios criterios de agrupación, representado como una tabla de doble entrada que nos facilita la interpretación

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

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

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

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

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

Cómo empezar? Cyclope 2.0

Cómo empezar? Cyclope 2.0 Cómo empezar? Cyclope 2.0 Luego de ingresar a Cyclope 2.0 con tu usuario, contraseña y nombre de dominio, aparece un listado de las diferentes funcionalidades que ofrece el sistema. Para comenzar, las

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

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

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

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

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

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

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

MAD-511 Responsive Design: Diseño Web Adaptativo

MAD-511 Responsive Design: Diseño Web Adaptativo MAD-511 Responsive Design: Diseño Web Adaptativo Introducción Introducción del responsive design a diseñadores de páginas web noveles así como actualiza la formación de los diseñadores más experimentados,

Más detalles

PLANTILLAS DE DOCUMENTOS EN WORD 2007

PLANTILLAS DE DOCUMENTOS EN WORD 2007 1 PLANTILLAS DE DOCUMENTOS EN WORD 2007 Introducción 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

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

Manual Webquest Creator 2

Manual Webquest Creator 2 Manual Webquest Creator 2 Miguel A. Jorquera 19 de enero de 2014 Índice 1. Menú principal 1 1.1. INICIO.................................................. 2 1.2. WEBQUESTS..............................................

Más detalles

Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA. Gráficos de Excel. Hojas de cálculo Tema 4

Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA. Gráficos de Excel. Hojas de cálculo Tema 4 Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Gráficos de Excel Hojas de cálculo Tema 4 Gráficos Los gráficos son representaciones gráficas de datos numéricos. Facilitan la interpretación

Más detalles

DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES

DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES Una clase es una definición de un estilo CSS que en principio no está asociado a alguna etiqueta HTML, pero que se puede asociar a etiquetas concretas. Generalmente

Más detalles

MANUAL DE LA APLICACIÓN HELP DESK

MANUAL DE LA APLICACIÓN HELP DESK CASAMOTOR MANUAL DE LA APLICACIÓN HELP DESK Desarrollado por: NOVIEMBRE, 2012 BOGOTÁ D.C. - COLOMBIA INTRODUCCIÓN Este documento es el manual de la aplicación de Help Desk de Casamotor, producto desarrollado

Más detalles

4.- Composer: Formato de párrafos, títulos y listas

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

Más detalles

Contenidos del Curso Avanzado de Informática Educativa

Contenidos del Curso Avanzado de Informática Educativa Programa Editor de Páginas Web FrontPage Unidad 1 Programa Editor de páginas Web: recursos Lenguaje HTML Hipertexto - Hipervínculos URL Home Page o Página de Inicio Apertura del Programa FrontPage Ventana

Más detalles

Dreamweaver CS5 Full. 01. Conociendo Adobe Dreamweaver CS5. 02. Creación de sitios y páginas Web

Dreamweaver CS5 Full. 01. Conociendo Adobe Dreamweaver CS5. 02. Creación de sitios y páginas Web 01. Conociendo Adobe Dreamweaver CS5 01.1. Introducción a Adobe Dreamweaver 01.2. Novedades de Dreamweaver CS5 01.3. Requerimientos técnicos 01.4. Editar páginas Web 01.5. Cómo tener una página en Internet

Más detalles

BASE DE DATOS ACCESS INICIACION

BASE DE DATOS ACCESS INICIACION BASE DE DATOS ACCESS INICIACION DURACION: 24 HORAS Los participantes al finalizar la acción formativa serán capaces de gestionar las bases de datos, adquiriendo los conocimientos teóricos y prácticos necesarios

Más detalles

MANUAL DE GUADALINEX

MANUAL DE GUADALINEX MANUAL DE GUADALINEX Aspecto general Lo primero que nos encontramos al iniciar Guadalinex es el escritorio. Es el punto de partida de todas las operaciones que realizamos con el ordenador por eso vamos

Más detalles

Guía Notas Parciales. Avanzado

Guía Notas Parciales. Avanzado Guía Notas Parciales Avanzado ÍNDICE I. INTRODUCCIÓN 3 II. CREAR LA ESTRUCTURA DE NOTAS EN U CURSOS 3 III. DESCARGAR LA PLANILLA EXCEL AL COMPUTADOR 7 IV. INGRESAR LAS NOTAS EN LA PLANILLA EXCEL 8 V. SUBIR

Más detalles

Banco de la República Bogotá D. C., Colombia

Banco de la República Bogotá D. C., Colombia Banco de la República Bogotá D. C., Colombia Dirección General de Tecnología Departamento de Gestión Informática MANUAL DE USUARIO INTERACTIVO GESTIÓN DE TRANSFERENCIA DE ARCHIVOS DEL BANCO DE LA REPÚBLICA

Más detalles

TEMA 2 WINDOWS XP Lección 3 PROGRAMA WORDPAD

TEMA 2 WINDOWS XP Lección 3 PROGRAMA WORDPAD TEMA 2 WINDOWS XP Lección 3 PROGRAMA WORDPAD 1) TRATAMIENTO DE TEXTOS Uno de los programas accesorios más útiles entre los que vienen con Windows XP es WordPad: un tratamiento de textos pequeño, pero potente,

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

Creación de Informes por Asistente y Usuario

Creación de Informes por Asistente y Usuario 1 Facultad: Ingeniería. Escuela: Biomédica Asignatura: Informática Médica Creación de Informes por Asistente y Usuario Objetivos Conocer la estructura de un informe. Crear informes utilizando el asistente

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

Taller 1. Creación una Página Web Personal

Taller 1. Creación una Página Web Personal Taller 1 Creación una Página Web Personal El objetivo de este taller es comenzar a trabajar los elementos básicos utilizados en HTML como imágenes, hipervínculos (links), listas, tablas, para crear una

Más detalles

www.maclearn.mx Maclearn Centro de Capacitación Digital [ 53 63 71 39 ] [ 46 33 20 22 ]

www.maclearn.mx Maclearn Centro de Capacitación Digital [ 53 63 71 39 ] [ 46 33 20 22 ] Maclearn Centro de Capacitación Digital [ 53 63 71 39 ] [ 46 33 20 22 ] Circuito Médicos # 3, Segundo Piso Ciudad Satélite, C.P. 53100 Naucalpan Estado de México contacto@maclearn.mx Curso de Adobe Fireworks

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

Manual de Usuario. Gestor Documental

Manual de Usuario. Gestor Documental p. Gestor Documental Principales funcionalidades. PLATAFORMA DE SERVICIOS PSUV Teléfono: 0800-CONTODO Sitio Web: http://www.psuv.org.ve Índice de Contenidos Introducción... 3 Cómo acceder al Gestor Documental?...

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

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

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

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

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

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

Bienvenidos a la 1ª lección del curso de AutoCAD (2d)

Bienvenidos a la 1ª lección del curso de AutoCAD (2d) Lección 1: Introducción a AutoCAD 2D Descargar PDF >>> Bienvenidos a la 1ª lección del curso de AutoCAD (2d) En este curso romperemos con ese mito de que AutoCAD es una aplicación difícil de aprender y

Más detalles

Diseño de Páginas Web 2011

Diseño de Páginas Web 2011 Diseño de Páginas Web 2011 PRESENTACIÓN Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización

Más detalles