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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Facultad de Ingeniería Escuela de Ciencias y Sistemas 2011-14674 Estructura de Datos Guatemala 2013 JSF + JSP + RichFaces

Facultad de Ingeniería Escuela de Ciencias y Sistemas 2011-14674 Estructura de Datos Guatemala 2013 JSF + JSP + RichFaces JSF + JSP + RichFaces Manual Introductorio al uso de JSF, JSP y RichFaces en Java El siguiente documento es un manual muy introductorio, ya que la primera vez que me encontré con estas 3 frases juntas

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

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

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

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

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

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

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

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

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

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

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

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

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. DISEÑO DE PÁGINAS DINÁMICAS. En esta segunda sección de diseño de páginas Web con Dreamweaver CS, vamos a hablar sobre

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

Introducción a Ardora www.webardora.net

Introducción a Ardora www.webardora.net Ardora es un programa de autor enfocado principalmente al desarrollo de contenidos educativos para la web con el que se pretende que el profesorado centre su esfuerzo en el aspecto metodológico y didáctico

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

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

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

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

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

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

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 ACTUALIZACIÓN POR MENSAJERIA APLICACIÓN POLICIA

MANUAL DE ACTUALIZACIÓN POR MENSAJERIA APLICACIÓN POLICIA Pág. 1 de 14 MANUAL DE ACTUALIZACIÓN POR MENSAJERIA APLICACIÓN POLICIA Pág. 2 de 14 TABLA DE CONTENIDO 1 INTRODUCCIÓN... 4 2 OBJETIVO... 4 3 ALCANCE... 4 4 DEFINICIONES... 4 5 ACTIVIDADES A DESARROLLAR...

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

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

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

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

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

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

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

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

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

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

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

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

(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

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

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

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

Programa Piloto de Notificación Electrónica en el. Consejo de la Magistratura de la Provincia de Salta. Instructivos para la

Programa Piloto de Notificación Electrónica en el. Consejo de la Magistratura de la Provincia de Salta. Instructivos para la Programa Piloto de Notificación Electrónica en el Consejo de la Magistratura de la Provincia de Salta Instructivos para la Instalación y Acceso a una Cuenta de Correo Electrónico Contenidos Formas de acceso

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

Guía N 1: Fundamentos básicos(i)

Guía N 1: Fundamentos básicos(i) 1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,

Más detalles

Infocentro para el fortalecimiento de la red de micro y pequeñas empresas de la comuna de Ancud MANUAL DE ACCESS ILUSTRE MUNICIPALIDAD DE ANCUD

Infocentro para el fortalecimiento de la red de micro y pequeñas empresas de la comuna de Ancud MANUAL DE ACCESS ILUSTRE MUNICIPALIDAD DE ANCUD Infocentro para el fortalecimiento de la red de micro y pequeñas empresas de la comuna de Ancud MANUAL DE ACCESS ILUSTRE MUNICIPALIDAD DE ANCUD DIRECCIÓN DE DESARROLLO ECONOMICO Y FOMENTO PRODUCTIVO OPTIMICE

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

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

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

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

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

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

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

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

Portal Observatorio Tecnológico Hidalgo UAEH OTecH

Portal Observatorio Tecnológico Hidalgo UAEH OTecH Manual 1 Técnico Portal Observatorio Tecnológico Hidalgo UAEH OTecH Observatorio Tecnológico del Estado de Hidalgo Manual Técnico Portal Obserbatorio Técnologico de Hidalgo Descripción y contenido del

Más detalles

Para crear una actividad, pulsamos sobre la pestaña actividades

Para crear una actividad, pulsamos sobre la pestaña actividades Módulo 3: Diseño común a todos los tipos de actividades. 3.3.- Diseño común a todos los tipos de actividades. Pasamos ahora a diseñar nuestra propia actividad. En ella vamos a ir paso a paso realizando

Más detalles

Introducción: Los Mapas Conceptuales

Introducción: Los Mapas Conceptuales Introducción: Los Mapas Conceptuales Este Tutorial tiene por objetivo Facilitar el uso de la herramienta CmapsTools para realizar mapas conceptuales. Un mapa conceptual puede ser definido como un instrumento,

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

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