Modulo 5:e- LIFE Diseño Web

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

Download "Modulo 5:e- LIFE Diseño Web"

Transcripción

1 Modulo 5:e- LIFE Diseño Web e-life E-LEARNING VIRTUAL CENTER FOR PEOPLE WITH PHYSICAL DISABILITIES Este proyecto ha sido financiado con apoyo de la Comisión Europea. Este publicación refleja los puntos de vista del autor y la Comisión Europea no puede ser considerada responsable del uso que se haga de la información contenida aquí.

2 TABLA DE CONTENIDOS 1. DESCRIPCION DEL MODULO INTRODUCCION CONCEPTOS BASICOS Primer paso: Definir objetivos Formular una idea Diseño de pagina web Estructura de la pagina web CONSTRUYENDO TU SITIO WEB USANDO JOOMLA! Joomla! Hechos y múmeros: Porqué usarlo? Cómo construir una pagina web usando Joomla Paso 1: Cómo planificar un sitio Joomla Paso 2: Cómo instalar Joomla con JSAS o Fantastico Paso 3 : Construyendo y gestionando contenidos en tu sitio web Joomla Paso 4: Moviendo tu sitio Joomla desde JSAS a un servidor Web HERRAMIENTAS Y RECURSOS UTILES PARA CONSTRUIR FINALIZAR Y MANTENER SU SITIO WEB Alojamiento web gratuito Alojamiento de pago.sugerencias Nombre virtual de dominio Escogiendo tu nombre de dominio Subir la pagina web Promover la página web Controlar el tráfico web Generar ingresos Evolución de la página web Mercado global de trabajo Asociarse para triunfar Web Analytics Creando banners Comprobar enlaces Directorios Busqueda de nombres de dominio Adquisición de dominios Busqueda de la competencia Page Hit Trackers Guias de programación DREAMWEAVER CS Explorando Dreamweaver Creando un documento Probando nuestro sitio web Creando definiciones para el sitio web Dreamweaver y texto Dreamweaver e imágenes /71

3 Insertando fotos en Dreamweaver a través del sistema de archivos Imagenes y texto alternativo Almacen de imagenes Insertando películas Flash Estructurando los contenidos de nuestra página web La vista HTML y CSS del inspector de propiedades Párrafos, cabeceras y texto pre-formateado Menu de estilos Tablas INTRODUCCION A LA ANIMACION CON FLASH Fotogramas clave y la linea de tiempo Capas Fotogrmas yfoto gramas clave Interpolar capas y fotogramas clave automáticos Acciones marco Haciendo animaciones más suaves REFERENCIAS /71

4 1. DESCRIPCION DEL MODULO TITULO DEL MODULO Creando Websites - Principios y guía básicos de diseño CODIGO VAT2 PALABRAS CLAVE Website, diseño, destrezas básicas, estructura página web, Joomla!, instalación, web host, dominio, upload, promoción, tráfico web, banners, Dreamweaver, html DESTINATARIOS Los destinatarios del modulo son personas con discapacidad física que buscan oportunidades para entrar y/o mantener el contacto con el mercado virtual de trabajo NIVEL Medio OPORTUNIDADES PROFESIONALES Trabajadores independientes altamente especializados que realizan una serie de servicios administrativos y de servicios a la empresa OBJETIVOS DEL MODULO Esta guía ofrece instrucciones generales a personas que quieran construir ellos mismos una página web o con una minima asistencia profesional, con el objetivo de poner en marcha su propio negocio. La guía esta estructurada para que pueda facilmente construir su página web sin conocimientos técnicos previos en diseño de paginas web, además ofrce información sobre otros recursos para que pueda crearla de manera efcitiva y exitosa. El principal sistema de gestión de contenidos (CMS) de esta guía es Jommla. El sistema de gestión de contenidos (CMS) te proporciona un marco completo de una pagina web y te permite gestionarla de forma profesional y con un mínimo esfuerzo. Tuy principal trabajo será introducir los contenidos (texto, imagenes, videos). Al finalizar de forma exitosa el módulo los alumnos 4/71

5 RESULTADOS FORMATIVOS aprenderán a; 1. Definir sus objetivos y planificar el sitio web 2. Construir su sitio web 3. Localizar un sitio de alojameineto web adceuado 4. Vender y promocionar su sitio web 5. Controlar, evaluar, y mantenert su sitio web PRE-REQUISITOS (DESTREZAS): uso de tecnologias basicas de información y comunicación (TIC), uso básico de HTML y uso basico CSS (Cascading Stile Sheet - Hoja de estilos en cascada) PRE-REQUISITOS: Ninguno DURACION: 20 horas COMPETENCIA Crear, implementar, gestionar y mantener paginas maintain effective websites for business EVALUACION La evaluación consistirá en un test de respuestas múltiples. Cada test contendrá preguntas con varias respuestas que evaluarán el conocimiento de los participantes. CATEGORIA coste (optimización de costes) tiempo (gestión eficinete del tiempo) s-quality (calidad en el servicio) m-quality (calidad en la gestión) MATERIALES SUPLEMENTARIOS Ninguno 5/71

6 2. INTRODUCTION Estimado participantes, Bienvenido a este módulo! Este módulo ofrece instrucciones generales a personas que quieran construir ellos mismos su pagina web, o con una asistencia profesional mínima, con el proposito de poner en marcha su propio negocio. La guía esta estructurada para que pueda facilmente construir su página web sin conocimientos técnicos previos en diseño de paginas web, además ofrece información sobre otros recursos para que pueda crearla de manera efectiva y exitosa. El principal sistema de gestión de contenidos (CMS) de esta guía es Jommla. El sistema de gestión de contenidos (CMS) te proporciona un marco completo de una pagina web y te permite gestionarla de forma profesional y con un mínimo esfuerzo. Tu principal trabajo será introducir los contenidos (texto, imágenes, videos). Saludos, El equipo e-life 6/71

7 3. CONCEPTOS BASICOS 3.1. Primer paso: Definir objetivos Antes de empezar a diseñar una página web es importante que tus objetivos esten claros. Tus objetivos deberían determinar los contenidos y el diseño de tu sitio web. Mucha gente construye páginas web como un hobby, simplemente para su desarrollo personal. En este módulo de todas formas nos centraremos en la construcción de una pagina web por motivos profesionales, para iniciar tu propio negocio desde casa. Hay tambien un potencial para generar recursos desde las páginas web que diseñes. Esto se hace publicando paginas interesantes que atraigan a un gran número de visitantes y poder vender espacio para anuncios de bienes u otros servicios. Objetivos clave en los que deberias centrarte en la planificación inicial: 1. Crear una lista de comprobación 2. Establecer si necesitasa yuda, o podrás hacerlo solo 3. Tecnologia y conocimientos necesarios 4. Establecer tu presupuesto y tus previsiones 3.2. Formular una idea Para crear una pagina web popular y comercialmente viable, necesitas definir una buena idea o tema para la página. El tema de tu web debería ser algo en lo que estes interesado. No necesitas ser un experto en dicho tema. Sin embargo deberias poseer un conocimiento mas avanzado sobre el tema que el resto de las personas. El tema de tu página web debería ser algo relacionado con el trabajo y el asunto no tiene que ser de interes general. De hecho, el exito puede vernir de un tema especializado, donde tus competidores seran menos numerosos. Puedes iniciar tu sitio web localizando un nicho de mercado y a partir de ahí hacer crecer el sitio parta atrare a una audiencia mayor. Recuerda siempre que tu audiencia potencial es global y no está limitada a tu comunidad o tu país 3.3. Diseño página web El primer paso es determinat lo que quieres publicar y cuales serán los destinatarios, el proximo paso es determinar el tono y el diseño de tu página web. Piensa en su apariencia: Debería ser informal, profesional o de alta tecnología? Usarás graficos, animación o música? Cómo se estructurará el texto y cúal sera el tipo de letra? Cómo navegarán los visitantes por la página? Para cualquier cosa que decidas trata de mantener los mismos modelos en toda la página. 7/71

8 La parte más importante de tu sitio web es el contenido en texto. Lo que escribas proprocionar un valor añadido y hacer que el visitante quiera volver. Revisa los ojetivos de tu pagina web y tus destinatarios de modo que el mensaje llege a tu audiencia. No olvides revisar la ortografía y la gramática antes d epublicar tu página web. Publicar en la red es diferente de escribir en un periodico, ya que puedes aprovecharte de las recursos multimedia. Fotos, gráficos, musica y video pyeden hacer interesante tu sitio. De todas formas ten cuidado en no sobrecargar las páginas. Los gráficos por ejemplo son ficheros grandes que necesitan tiempo para ser descargados. La mayor parte de las personas no esperan un espacio de tiempo grande para que se cargue una página. El objetivo es producir todos los contenidos y una programación funcional. Esto incluye: - Texto, editado y revisadio - Especificaciones de diseño gráfico para todas las páginas (interfaz grafica, plantillas de paginas, encabezamientos, logos, botones) - Compilacioens detalladas de páginas o ejemplos finalizados de páginas claves - Diseño de la interfaz - Ilustraciones y fotografia Componentes lógicos y funcionales: - Tablas de datos y programación - Buscador diseñado y comprobado 3.4. Estructura de la página web Es importante mantener una consistencia estructural en toda la página web. Cada página deberia tener al menos un encabezamiento y un menú de navegación común. Hay dos método para estructurar las paginas web: usando "tablas" or "divisiones" (div. tags). Puedes encontrar gráficos para tu página d einicio en la red, buscando: - Index of GIF files - GIF library Cuando encuentres algo que te guste, copialo a tu disco duro, hacienda click en el boton derecho de tu raton y seleccionando "guardar como". Para encontrar música adecuada, busca:"midi" y el nombre del cantante o compositor. Los nombres de estos ficheros terminan en ".gif" y ".mid". Si sopechas que un gráfico o una canción tiene derechos de copyright, debes pedir persmiso al propietario de los dercehos antes de usarlo. El éxito de tu página web dependerá de tu habilidad para organizar la información y esto implica categorizar. Las formas fundamentales de organizar la información son las siguientes: 1. Alfabética: Es el esquema más lógico de organización, basado en la letra inicial de los nombres. Ejemplos de esto son las guías de teléfono y otros directories. Los sístemas alfabéticos son simples y comunes en la vida diaria. 8/71

9 2. Cronológica: La organización cronológica presenta los aconteciomientos de una manera ordenada por tiempo. A menudo este esquema es usado en formación, y en temas como automoviles, antiguedades y vinos. 3. Categoria:Organización en function de la similitud de caracteristicas de los registros. Particularmente útil cuando tos las cosas que deben organizarse son iguales o tienen una importancia que no puede ser predicha. Por ejemplo, libros en una librería o biblioteca. 4. Geografica:Organizada por factores espaciales o geográficos. Esta es la forma de organziación más usada para sitios relacionads con la jardinería,inmobiliarias o viajes. Es también importante cuando la situación es un factor importante para la compra 5. Orientado a procesos: Requiere que los resultados sean ordenados siguiendo un proceso. Por ejemplo, elegir una casa, encontrar un vendedor, escoger una hipoteca. La organziación incluye los pasos que un cliente debe seguir. 6. Temas: Más complicada que la primera opción. Requiere diseñar esquemas de organización con limites a la anchura de los contenidos. Tabla 1: Esto es un ejemplo de como la categorización funciona, y su importancia a la hora de navegar 1. Desorganziada/Al azar 2. Alfabética 3. Temac + Alfabética Regalos Niño Entretenimiento Nombre escuela Cama + Baño Musica/Películas/Libros Cama + Baño Autozrización Deportes Muebles del hogar Ropa Moda + Estilo Oficinas del hogar Electronica Accessorieos, Joyeria Cocina Regalos Belleza, Salud Niño Salud + Belleza Ropa Ropa Muebles del hogar Equipake Joyeria+ Accesorios Oficinas del hogar Hogar Salud + Beauty Joyeria + Accessorios Cama + Baño Juguetes Cocina Electronica Electronica Musica/Películas/Libros Muebles Musica/Pelliculas/Libros Tiempo de colegio Cocina Deportes + Equipaje Deportes + Equipaje Oficina Autorización Juguetes Niños Niños Tiempo de colegio Regalos Regalos Ofertas 9/71

10 4. CONSTRUYENDO TU SITIO WEB USANDO JOOMLA! 4.1. Joomla! Hechos y numeros: Porqué usarlo? - Joomla produce contenidos dinámicos Joomla tiene su propia forma de organizar los contenidos, de esta forma es más fácil navegar. A medida que aprendas, las cosas serán más fáciles. - Joomla usa Plantillas: Con el uso de plantillas todas las págionas tienen un aspecto consistente. Puedes cambiar fácilmente las plantillas sin cambiar el código. Una vez que te familiarizes con Joomla podrás crear tus propias plantillas. - Adapta los modulos hasta obtener el resultado que quieras. Joomla usa modulos, que pueden ser publicados o no, movidos a diferentes posiciones en una página y adaptados hasta que tu página adquiera el aspecto que quieres. - Editor de contenidos integrado: Al igual que con cualquier otro editor con características avanzadas puedes insertar texto, tablas y fotos. Los cambios se muestran al instante 4.2. Cómo contruir un sitio web usando Joomla! Esta guía te permitirá aprender todo lo que necesitas saber para construir tu propia página web usando Joomla!, desde la instalación a la publicación. La guía se organiza en cuatro pasos: Paso 1 Cómo planificar un sitio Joomla Paso 2 Instalando Joomla Paso 3 Construyendo y gestionando los contenidos en tu sitio web Paso 4 Subiendo y publicando tu sitio Joomla Paso 1: Cómo planificar un sitio Joomla! La primera regla es crear contenidos interesantes para tus visitantes. Preguntate a ti mismo para quién es la página, quíen va a usarla o leerla. Que obtendrán tus visitantes? Coge una hoja en blanco y escribe todo lo que te venga a la mente acerca de tu página web, escribe etiquetas o temas que quieras abordar en tu página. Estructurando tu sitio web Joomla El desarrollo de un sitio web Joomla es una parte importante del proceso. Crea una table en Word o Excel con cinco o más columnas. 1ª columna representa secciones 2ª columna representa categoriss 3ª columna representa contenidos 10/71

11 4ª columna es para hacer los contenidos (blog/list of items/single item/static content) 5ª columna se reserve para los títulos. Ahora coge el papel que has usado para la tormenta de ideas y comienza a organziar los contenidos en secciones y categorias. Mueveleso hasta que este satisfecho. Deberia ser algo como esto: Secciones Categorias Contenidos Articulos Contenidos tipos Titulos Productos Para hombres Lista de articulos Producto 1 Zapatos negros Producto 2 Zapatos marrones Para mujeres Lista de artículos Servicios Acerca de nosostros Contenidos estáticos Joomla Diseño y Navegación Dónde debo colocar los menus? Cómo debe ser el diseño? Piensa como quieras que sea el aspecto de tu página web. Algunas opciones: Diseño Opcion 1 Diseño más común de página web :navegación en la izquierda y contenidos en la derecha. Diseño Opción Otra opción. Navegacion arriba, contenidos abajo con algunas columnas, que debe tener el aspecto de un portal. Diseño Opcion 3 Otra opción: Navegación dividida entre izquierda y arriba, el centro para contenidos, y una columna a la derecha para anuncios. 11/71

12 Interactividad Joomla es un constructor de sitios web dinamico y tiene components integrados que hacen tu sitio interactivo. Cuando desarrolles tu sitio puedes mejorarlo con numerosos add-ons and extensions disponibles en la págiba web de Joomla. Define qué es lo que quieres ofrecer Debes estar seguro acerca de lo que quieres ofrecer a tus visitantes, puede ser por ejemplo, calendarios, galerías de fotos y/o otras funciones avanzadas. Existen muchas extensiones disponibles y una ampia variedad de elección. Después de este paso deberia tener un imagen clara acerca de tu sitio web: una tabla detallada con la estructura de la página web y una idea acerca del diseño. Es hora de instalar Joomla y de empezar a hacer que las cosas funcionen Paso 2: Como instalar Jomla con JSAS o Fantastico Requisitos mínimos para Joomla: * PHP 4.2.x or above - * MySQL 3.23.x or above - * Apache or above - No te preocupes si nunc a has oido esto antes. Todo lo que debes saber es si tu Web Host soporta Joomla. Hosting Residence ofrece auto isntalción de Joomla Auto. Instalando Joomla localmente con JSAS EStas instruccioens son para Windows XP. Usaremos g JSAS - Joomla Stand Alone Server para instalar Joomla en nuestro ordenador C. 1. Ve a y descarga el paquete de instalación de JSAS a tu ordenador. 2. Ejecta el fichero que has descargado y sigue los pasos. 3. Una vez que JSAS este instalado, tendrás las herramientas que necesitas para arrancar Joomla en tu ordenador. 4. Ahora abre JSAS con el icono que estaá en tu escritorio del ordenador. 5. Una nueva ventana se abrirá con instrucciones para crear un sitio web Joomla con JSAS. 6. Ve a Joomla Pre-installation y comprueba para finalizar la instalación. 12/71

13 Joomla Fantastico Procedimiento de instalación En primer lugar, asegúrate de que Web Host dispone de Fantastico u otro cliente de auto instalación habilitado. 1. Inicia sesión en el panel de control de tu hosting. 2. Encuentra Fantastico Icon y haz click. 3. Encuentra Joomla y haz click. Habrá muchas aplicaciones disponibles para instalar. Busca CMS o algo similar. 4. El próximo paso es encontrar CMS (Content Managemnt System) 5. Define la ruta de instalación. Cuando hagas clcik debe haber algunos ajustes. Asegúrate que la ruta de instalación de Joomla es raiz (esto significa que Joomla se instalara en tu web 13/71

14 y no en ww.yoursite.com/applications/joomla/). 6. Escoge un nombre de administrador y una contraseña y escribelos en una hoja de papel. 7. Rellena tu y el nombre del sitio. 8. Una vez que has rellenado todos los detalles, haz click en Instalar. Has acabado Joomla está instalado. Joomla comprobación Pre-Instalación Cuando inicias Joomla Site la primera vez, debes ir a un asistente y rellenar los nombres de usuario y contraseñas. Si estas usando JSAS obtienes esa información en la última pantalla de la instalación de Joomla, si lo estas instalando en um servidor web, obtendrás esa información de tu servidor o en Fantastico una vez instalado Joomla. 1. Ve a tu pagina de Joomla. Si estas usando JSAS, abrelo y selecciona que sitio Joomla quieres iniciar. Si estas online, ve a tu la pagina de inicio: (asegúrate de que lo has instalado de forma correcta). 2. Deberias ver ahora la pagina de Pre-installation generada por Joomla. 14/71

15 Asegurate de que todo en la columna de la derecha está en verde. Haz click en siguiente. 3. Otra pantalla con licencia aparece. Han click en siguiente. 4. Ahora se te pide que rellenes tus detalles. 5. Toma un trozo de papel ye introduce los siguiente: o Nombre del servidor o MySql usuario o MySql contraseña o MySql nombre base de datos 6. Joomla te pedirá que confirmes los ajustes. Haz click en ok. 15/71

16 7. Si has introducido los parámetros correctamente se te pedirá que introduzcas el nombre de tu sitio. 8. Una nueva ventana aparece. Introduce el nombre de dominio, y contraseña. Asegurate de que escribes todo en un trozo de papel!! 9. Joomla esta instalado. De todas formas, debes hacer una cosa mas antes de conectarte. 10. Tienes que borrar un fichero llamado instalación en tu sitio Joomla. Atención! No borres el sitio Joomla entero. 11. Ve a tu administrador de ficheros (si estas usando JSAS) o tu programa FTP (si tu Joomla está online) y ve al fichero creado en el paso 6. Felicidades! Ahora puedes iniciar sesión por primera vez Paso 3: Construyendo y gestionado contenidos en tu sitio web Joomla Joomla organiza los contenidos de manera diferente a como están organizados en un sitio HTML. La principal diferencia es que las paginas web en Joomla no existen. Que significa esto? Significa que tecnicamente existen menus y modulos, que estan indexados a menus. Entoces, cada pagina web Joomla que ves en tu buscador es compilada desde una base de datos. Este tipo de organziación da a Joomla distintas ventajas, y te permite hacer mas cosas en menos tiempo. Añadamos ahora algunos contenidos a nuestro sitio Joomla. Gestionando contenidos. Añadir Secciones y Categorias Joomla organiza los contenidos en secciones, en esas secciones hay categorias y dentro de esas categorias hay articulos. 16/71

17 Añadiendo una sección 1. Ahora vamos a usar la table que hiciste en el paso 1: Planificando un sitio Joomla. 2. Inicia sesion en panel de control (administration area). 3. Ve a Contenidos, y selecciona Gestor de Secciones 4. Haz click en el icono Nuevo para crear una nueva secion. 5. En el campo Titulo introduce el nombre d etusección (solo será visto por ti). 6. En el campo Seccion introduce el nombre que quieres que vean los visitantes. 7. Haz click en Guardar. Ahora tenemos una nueva sección. Pero necesitamos crear al menos una categoría para nuestra sección. Añadiendo una categoria 1. Ve a Contenidos, y selecciona Gestor de categorias 2. Haz click en el icono Nuevo para crear una Nueva Categoria 3. En el campo Titulo introduzca el nombre de tu categair awue solo sera vista por ti 17/71

18 dministrator area. 4. En el campo Categoria introduzca el nombre que veran los visitants. 5. Hay un menu llamado Seccion. Seleccione en que sección quieres crear la nueva categoria. 6. Haz click en guarder. Ahora tenemos una nueva categoria. Nota: Las secciones y las categorias no son visible directamente en tu sitio Joomla. Lee abajo como crear artículos. Gestionando contenidos. Añadiendo artículos. Los artículos son similares a las páginas HTML. Para crearlos: 1. Ve a Contenidos, y selecciona Gestor de Artículos 2. Haz click en Nuevo Artícluo 3. Introduce el título de tu nuevo artículo 4. Selecciona la sección y la categoria donde queires que tu articulo esta ubicado. 5. Añade una introducción y algún texto. Gestionando contenidos y adaptando la página principal de Joomla Todos los contenidos pueden ser configurados para que se muestren en la página principal. Puedes hacerlo de la siguiente forma a crear ahora un nuevo menú en este panel. 1. Ve a Panel de control y selecciona Gestor de Menus 2. Para cada artículo puedes elegir si publicarlo ono en la página principal. Haz click en la cruz roja o verde. 3. Una vez que haya artículos publicados puedes adaptarlos y establecer un orden, yendo a Contenidos y Gestor de artículos 4. Haz click en NUEVO. Se abre una página con diferentes opciones y botones buttons. 18/71

19 5. Dado que queremos crear un enlace a un menu individual, seleciconados: Enlace - Artículo. Hacemos click. 6. Ahora introduce el nombre del menu tal y como quieres que aparezca en tu página de inicio. 7. Selecciona el artículo donde quieras que el menu esta dirigido. 8. Guardar. Gestionando contenidos. Añadir un menu de entrada para una lista de articulos Tus categorias pueden albergar diferentes artículos. Puedes añadir una entrada d emenu para una categoria entera de artículos. 1. Ve a menu, selecciona Gestor de Menus 19/71

20 2. Encuentra menu principal y haz click en Opciones Menu 3. Haz click en Nuevo Una página se abre con diferenets opcioens y botones. 4. Ahora crearemos un enlace a Artículos Haz click en Blog-Content Category. 5. Ahora introduce el nombre del menu como quieras que aparezca en la página de inicio. 6. Selecciona una o varias categorias donde queireas que el menu este situado. 7. Guardar Gestionando contenidos. Añadiendo contenidos estáticos Como siempre hay excepciones. Dijimos antes que los contenidos deben ser organizados en seccioens y categorias. De todas formas esto no es verdad para los contenidos estáticos. Los contenidos estáticos son similares a los articulos con la diferencia de que no pertenecen a ninguna sección o categoría. Son independientes. Paa crear contenidos estaticos: 1. Ve a Contenidos, y selecciona Gestor Contenidos Estático. 2. Haz click en el icono Nuevo. 3. Introduce un título 4. Introduce el texto. 5. Guardar Antes de que puedas verlo, tienes que añadir una nueva entrada de menú. Es similar al ejemplo de arriba (Añadiendo una entrada de menu a un artículo). La diferencia es que en este caso selecciona Enlace a Contenido Estático en lugar de Enlace a artículos. Eso es todo. Gestionando contenidos. Eliminado artículos. Joomla tiene algunos artículos que pueden no tener cabida en tu pagina web. Para borrarlos 1. Ve a contenidos, y selecciona Todos los articulos. 20/71

21 2. Señala los articulos que quieras borrar. 3. Haz click en el icono Papelera. Gestionando contenidos. Adaptando la pagina principal de Joomla Todos los articulos pueden ser configurados para ser mostrados en la pagina principal. Puedes adaptarlos de la siguiente manera: 1. Ve a Contenidos, y selecciona Todos los articulos. 2. Para cada articulo puedes establecer si es o no publicado en la pagina principal, marcando la posición de cada articulo. 3. Hay algunos artículos que puedes adaptar y establecer el orden de aparición, yendo a Contenidos, y seleccionando Gestor de la Pagina de inicio Paso 4: Moviendo tu sitio Joomla desde JSAS a un servidor web Preparando tu cuenta de almacenamiento web 1. Instala una copia de Joomla a tu servidor. 2. Cuando hayas acabadoi puedes ver un sitio Joomla predeterminado online, ve alli y continua. Subiendo tu sitio local a un servidor web 1. Abre tu FTP. 21/71

22 2. Conéctate a tu servidor (Contacta conb tu servidor para el nombre de usuario y contraseña). 3. Veras dos secciones.una es la de tus archives locales, la otra para ficheros online 4. En la sección local dirigete a tiu página web in el fichero Joomla Stand Alone Server de tu disco duro. Habitualmente esta localziado en in C:\Program Files\JSAS\http_root\www\xxx nombre de tu pagina web. 5. Si ves los ficheros administrador,cache, componentes estas en la carpeta buena. 6. Ahora que tienes las dos secciones listas, selecciona todos los ficheros locales excepto configuración.php 7. Sube los archivos al servidor. Exportando la base de datos de Joomla con PHP MyAdmin 1. Abre JSAS y haz click en el icono de administración. A la derecha se te abrirán varias opciones 22/71

23 2. Haz click en PHP MyAdmin para arrancarlo. 3. Desde la izquierda selecciona la base de datos que quieres exportar. 4. Haz click en Exportar. 5. Ahora tienes que seleccionar que tablas quieres exportar. Haz Click en Seleccionar Todas.Se colorearán una vez seleccionadas. 6. Comprueba Add Drop Table. 7. Selecciona Guardar como y haz click en OK. 8. Guardalo en tu disco duro. Importando la base de datos de Joomla al servidor web con PHP MyAdmin 1. Abre PHP MyAdmin en tu servidor (debe estar en el panel de control). 2. A la izquierda selecciona la base de datos que queiers exportar. 3. Haz click en Importar. 23/71

24 4. Busca el fichero.sql que has guardado en tu disco duro (en tu base de datos). 5. Haz click en OK. 6. Tu base de datos ya está importada. Compruena tu sitio. Debe trabajar ahora en modo online. Ya has creado tu página web usando Joomla! 24/71

25 5. HERRAMIENTAS Y RECURSOS UTILES DE AYUDA PARA CONSTRUIR, FINALIZAR Y MANTENER TU SITIO WEB 5.1. Alojamiento Web gratuito Muchas compañías ofrecen servicios de alojamiento web gratis. Esto incluye espacio de almacenamiento gratuito en un servidor web, las herramientas básicas para construir un sitio, una dirección de correo electrónico gratis y otros regalos. La mayoría de las empresas de hosting requiere que usted exhiba una pancarta en la parte superior de cada una de sus páginas. Muchos de ellos también restringen el uso de un nombre de dominio que usted posee o va a comprar. Si estas restricciones son demasiado restrictivas para sus necesidades, considere la compra de servicios de hosting a bajo coste. Sugerencias de alojamiento web gratuito: Sitios Google Google proporciona services de alojamiento web gratuitos para sus clientes en Google Sites. Ellos proporcionan una serie de plantillas para ayudarte a comenzar. Fotos, videos, "gadgets" y otros contenidos pueden ser facilmente añadicos. Los sitios pueden ser públicos o privados. https://accounts.google.com/ Servidores gratuitos FeeServers.com proporciona 20 MB de espacio gratuito web. Si posees a ".com" o un nombre internacional de dominio (por ejemplo ".ca", ".uk"), FreeServers lo alojara de forma gratuita Alojamiento de pago. Sugerencias. En lugar de utilizar un servicio de alojamiento web gratuito y tener que mostrar los anuncios de banner en cada una de sus páginas web, usted puede optar por alquilar el espacio del servidor web de una de las empresas de alojamiento web. Miles de empresas en todo el mundo ofrecen una gran variedad de servicios web, y los costos varían de manera significativa. Antes de decidirse por un proveedor de servicio de alojamiento web, considere las siguientes preguntas: 1. Proporciona el servidor un servicio adecuado? 2. Soporta el software de base de datos que utiliza? 3. Proporiciona buen apoyo tecnico en tiempo reducido? 4. Proporciona servicios para la industria? 5. Cuanto espacio de almacenamiento y ancho de banda sera requerido? 25/71

26 6. Sera suficinte un servidor virtual? 7. Dados su requerimientos, qué paquetes están disponibles? Lo más importante es conocer sus necesidades particulares y seleccionar un proveedor de alojamiento web en consecuencia. No pague por servicios que no necesitan y monitoree el rendimiento del servidor regularmente Nombres de dominios virtuales Un nombre de dominio es único para Vd asi la gente puede ver tu sitio web en internet. Un nombre de dominio es la única deriección que puede usarse en internet. Es lo que se ve después de la "www." en su navegador y es lo que viene después del en su correo electrónico. Si usted ya tiene un nombre de dominio usted puede utilizar eso también. Las direcciones de internet fáciles de recordar son una mercancía valiosa que puede ser comprada y vendida. Afortunadamente, muchas buenas direcciones de Internet están todavía disponibles. Por ejemplo, facebook.com es fresco y pegadizo y no tiene nada que hacer con la red social. Siempre ten en mente las siguientes carateristicas acerca de tu dominio. Hazlo simple Registra un dominio.com cuando sea posible. Hazlo corto Registralo para al menos 2 años Algunas empresas de alojamiento web ofrecen un nombre de dominio virtual con poco o ningún costo, siempre que utilice sus servicios de alojamiento web Escogiendo tu nombre de dominio Si usted desea tener una presencia en la web, su nombre de dominio es una de las decisiones más importantes que tendrá que hacer. Su nombre de dominio debe hacer las cosas fáciles para que la gente encuentre su sitio. La regla de oro es mantener el nombre de dominio corto: debe tener en cuenta que la gente debe ser capaz de recordarlo. Trate de registrar el nombre más corto que sus clientes y visitantes puedan asociar con su sitio. Hay muchas extensiones disponibles en este momento. Para las empresas, se recomienda un sufijo com. Se trata de la primera extensión que la mayoría de la gente prueba cuando navega por internet. Dado que es una de las extensiones más antiguas, una dirección dot.com muestra que su negocio tiene presencia en la web. No olvide registrar su dominio web lo antes posible. Tenga siempre en mente que los nombres de dominio solo pueden contener letras números y guiones. Los espacios y los símbolos no están permitidos. Además, los nombres de dominio no distinguen entre mayúsculas y minúsculas. 26/71

27 5.5. Subir la página web La copia de archivos desde el disco duro al servidor es un proceso sencillo. El sitio de acogida le pedirá el nombre del directorio en su disco duro donde se almacenan los archivos y los nombres de los archivos específicos para cargar. Una vez que hayas subido todos los archivos, usted debe probar la página en el servidor web y asegurarse de que funciona correctamente y que todos los archivos se han subido correctamente Promocionar la página web Muchos desarrolladores de páginas web parecen pensar que si se construye una página, la gente vendrá. Las cosas no son tan simples. Debes promocionar tu página web. La promoción de una página web puede incluir por ejemplo rsgitrar tu URl en uno o más buscadores y portales as en Internet. Los motores de búsqueda pueden ser nacionales, internacionales, o específicos. Dependiendo de sus objetivos, es posible que también desee inscribirse en algunos de los motores de búsqueda internacionales, regionales o específicos. Usted puede agregar tu URL a cada uno de los principales motores de búsqueda haciendo clic a continuación: 1. Añade URL a Google 2. Añade URL a Open Directory un directorio abierto Alternativamente, puede utilizar un servicio de envío URL para registrar su sitio en motores de búsqueda a la vez.los motores de búsqueda usan algoritmos diferentes, sin embargo, en la indexación general se produce en función del número de veces que las palabras específicas o combinaciones de palabras que se encuentran en el título, encabezados de sección y el cuerpo de la página. El título y el primer párrafo de la página son importantes para fines de indexación Controle el trafico web Es muy importante hacer un seguimiento estadístico a los visitantes a su sitio web. Los programas de seguimiento web ofrecen una gran cantidad de información sobre los visitantes de sitios web que pueden ayudarle a mejorar su contenido web, estructura de navegación y "pegajoso". Una buena información le ayudará a formular las estrategias de los grandes que en última instancia reducir sus costos y aumentar sus ingresos. Un buen seguidor da respuesta a las siguientes preguntas: 1. De qué países qué mis visitantes del sitio web viene? 2. Qué motor de búsqueda se utilizan para encontrar mi sitio? 3. Qué palabras o frases se buscan en? 4. Qué sitios y URLs me están enviando el tráfico? 27/71

28 5. Cómo navegar a través de mis visitas a mi sitio? 6. Cuál de mis páginas son las más populares y por lo menos? Al analizar regularmente las estadísticas web, usted hará algunos descubrimientos asombrosos! Por ejemplo, usted probablemente encontrará que sólo unos pocos motores de búsqueda se le envía la mayor parte de su tráfico. Es probable que descubra que muy pocas de sus páginas están recibiendo el 90% de sus éxitos. Es importante utilizar la información para definir mejor las etiquetas meta y desarrollar estrategias que mejoren la visibilidad de su sitio en los principales motores de búsqueda Generar recursos Cómo hacer dinero con un sitio web? Una forma fácil de hacer dinero es unirse a un programa de afiliados y entregar anuncios publicitarios de su sitio. Hay muchas empresas de publicidad de banner, en los negocios y varios modelos de compensación están en uso. Algunas empresas pagan el "editor web" cada vez que aparece un anuncio en su sitio web. Algunos pagan una cuota fija, cuando un visitante hace clic en un anuncio. Otras compañías de publicidad de banners pagar comisiones basadas en el rendimiento de ventas. Por ejemplo, si un visitante hace clic en su sitio web en un anuncio de la bandera y, posteriormente, compra un producto, usted recibirá una porción del precio de compra. Es importante encontrar una compañía con cierta reputación que pague un precio razonable y haga pagos puntuales. Para ser aceptado como afiliado, la mayoría de los principales actores en la industria de la publicidad, pedirá que el sitio web cumpla una serie de requisitos como : 1. El sitio web no debe ser alojado en un servidor libre. Debe tener su propio nombre de dominio virtual. 2. El sitio web debe recibir un número mínimo de visitas al mes 3. El contenido debe ser legal, original, y socialmente aceptable. Al seleccionar una empresa de bandera de la publicidad, las siguientes preguntas deben ser hechas: 1. Qué modelo de pago utilizan? por ejemplo coste por clic (CPC), el costo por cada visualizaciones (CPM), importe de la comisión por venta 2. Se hacen los pagos mensuales o se retienen hasta un cierto limite. 3. Qué negocio representa la publicidad? Qué productos se venden? Cómo de compatibles son los productos con el contenido de su sitio web? 4. Qué estadísticas se ofrecen (por ejemplo, anuncios en pantalla, el porcentaje de clics, los ingresos obtenidos)? 5. Cómo son de rápidos y fiables son los servidores web que alojan los banners? 6. Qué tipos de anuncios se apoyan? (Banners, botones, cubos, pop-ups) 28/71

29 7. Se le permite optar por determinadas categorías de anuncios? (por ejemplo, alcohol, tabaco, juegos de azar, anuncios pop-up) 5.9. Evolución de la web La evolución de las aplicaciones debe ser una parte clave de su estrategia de desarrollo de sitios web. Cuántas veces has visitado un sitio web sólo para encontrar un gráfico animado diciendo "en construcción"? Asegurarse grande volúmenes de trafico es uno de los procesos más duros y que exigen más tiempo, incluso si su sitio es de alta calidad y esta registrado en todos los motores de búsqueda más importantes. En consecuencia, es vital que usted publique sus páginas rápidamente, a sabiendas de que son imperfectas. No te olvides de que hay varios billones de páginas publicadas en el momento en el Internet y los números están creciendo rápidamente. Cuanto más rápido establezca su presencia, mayor tráfico va a recibir su sitio Mercado global Para los creadores de sitios web comerciales, es vital pensar de manera global. Recuerde siempre que sus visitantes no pueden ser expertos en el idioma inglés o no compartir su cultura y valores. Hay algunas herramientas de la web disponibles para traducir páginas web de un idioma a otro. Aunque las traducciones no son elegantes, nos proporcionan un buen "primer esbozo" de traducción que puede ser mejorado por alguien que sea hábil con el lenguaje. Si publica algunas páginas web clave en idiomas extranjeros, serán indexados por los motores de búsqueda con los términos del idioma extranjero. Esto le traerá más tráfico. Una alternativa a la creación de páginas de lenguas extranjeras es proporcionar enlaces al software que traduce las paginas automaticamente de una lengua a otra Asociarse para el éxito Desarrollar un sitio web comercial puede requerir habilidades diferentes. Por ejemplo, usted podría encontrarse en la necesidad de encontrar alguna de estas personas: 1. Un autor para escribir contenido del sitio web 2. Un investigador para encontrar otros sitios web con los que establecer vínculos. 3. Un diseñador de páginas web para desarrollar gráficos y navegación 4. Un analista de base de datos para el diseño de las tablas en las que se almacenan los datos subyacentes 5. Un programador para escribir Java, los scripts otros componentes de software 6. Un traductor. 7. Un vendedor para promocionar tu web 29/71

30 A menos que tenga todos los conocimientos necesarios para construir un sitio web comercial. Puedes buscar socios y desarrollar partenariados eficaces. Una vez que haya establecido una presencia en la red y su sitio este recibiendo grandes volúmenes de tráfico, otros editores web y las empresas se acercarán con intención de asociarse. En este campo de cambiante tecnología, la asociación es particularmente importante. Es una buena práctica para comenzar una relación de asociación sobre una base pequeña e informal. Si la sociedad demuestra ser de beneficio mutuo, puede ser ampliada y formalizada. La asociación con personas en el extranjero puede ser muy gratificante especialmente con individuos en los países en desarrollo que a menudo tienen fuertes habilidades técnicas, pero no tienen acceso al conocimiento de los mercados más desarrollados Web Analytics Web Analytics es un conjunto de herramientas y métodos que se utilizan para entender las interacciones de los clientes con un sitio web de la empresa. Utilizando los datos de los registros del servidor web, bases de datos y otras fuentes. El objetivo es incrementar el conocimiento sobre los clientes y el uso de un sitio web. Web Analytics puede ser utilizado para identificar y resolver problemas técnicos y de navegación con un sitio web. También se utiliza para comprender mejor las necesidades del cliente y sus patrones de compra. Web Analytiscs puede ayudar a identificar problemas de diseño de páginas web y sus oportunidades Creando banners Crear un anuncio para promocionar su sitio web es fácil. Ni siquiera tendrás que descargar un software especial. Animación en línea El uso en línea de animación para crear al instante banners animados para publicidad, intercambio de enlaces, etc Este producto también se puede utilizar para crear botones animados. CoolText Este sitio ofrecen una gran herramienta para la creación de logotipos personalizados, botones y balas, como los que utilizamos. Una amplia variedad de plantillas y las fuentes están disponibles. 3D TextMaker 30/71

31 Este sitio personalizado crea banners animados y botones. Las imágenes creadas con el Creador de texto 3D se puede utilizar de forma gratuita en las páginas personales y comerciales Comprobar enlaces Para evitar malas clasificaciones en motores de búsqueda, es importante eliminar los enlaces rotos de sus páginas web. Puede usar paquetes de software como Microsoft FrontPage y Expression Web, que incluyen una funcionalidad para encontrar enlaces rotos. Existen otros comprobadores de enlaces disponibles en internet como: W3C Link Checker Este comprobador de enlaces es fácil de usar HTML del W3C servicio de validación, basado en un analizador SGML. Submit Express Submit Express ofrece un comprobador de enlaces muertos y el número de otras herramientas para el webmaster Directorios Además de registrar su sitio en los principales motores de búsqueda, es importante que se enumeren en los grandes directorios de Internet. Para conseguir que su sitio aparezca en un directorio, usted debe encontrar un directorio de la categoría apropiada escribir una sinopsis breve pero descriptiva de su sitio y enviar la URL. Open Directory El Open Directory fue comprado por Netscape en noviembre de Utiliza editores voluntarios para catalogar las presentaciones de directorio. Lycos, AOL, AltaVista y Hotbot utilizar los listados de directorios de este servicio de directorio de Internet Busqueda de nombres de dominio Checkdomain.com Es el lugar en Internet para comprobar si un nombre de dominio está disponible para casi todos los países del mundo. NameDroppers.com 31/71

32 Namedroppers.com ofrecen un nombre de dominio - motor de búsqueda que le permite buscar por nombres de dominio con múltiples palabras clave Adquisición de dominios La siguiente web proprociona nombres de dominio de manera gratuita, siempre que se usen sus servicios de alojamiento web: Busqueda de la competencia Cuando se desarrolla un sitio web, es importante ser consciente de la competencia. Cómo se atrae a los visitantes? Qué te gusta o disgusta de sus sitios? Marketleap La búsqueda Marketleap herramienta de motor de comparación de los volúmenes de enlaces a tu sitio con los volúmenes de enlaces a los sitios líderes en más de 30 categorías de la industria. Alexa Alexa es una gran herramienta para identificar y aprender acerca de su competencia. Simplemente escriba la dirección URL de un sitio y ver cómo filas! Reloj Backlink Esta herramienta webmaster le permitirá ver los sitios que se enlazan con un sitio web (es decir, los vínculos de retroceso) Page Hit Trackers Google Analytics Insertando unas pocas lineas de código en cada pagina web de tu sitio, Google Analytics producirá una gran cantidad de gráficos y estadisticas incluyendo número de visitantes únicos, URL de referencia y enlaces desde buscadores. Yahoo! Analytics Similar a Google Analytics, Yahoo Analytics proporciona información útil acerca de las visitas a los sitios. Extreme Tracking Este producto proporciona numerous, porcentajes, estados, totales y medias. Proporciona un rango completo de estados, incluyendo datos y claves para usar en tu página. 32/71

33 Guias de programación Hay una serie de guías de programación disponibles en Internet que le puede ayudar con HTML, CGI y otros lenguajes de programación. Hipertexto Mark-up Language Esta es una excelente guía de HTML y XTML de referencia. Manual de PHP PHP es un lenguaje de script que esté incrustado en HTML muy similar a ASP de Mirosoft (Active Server Pages). A diferencia de ASP, sin embargo, este lenguaje se puede ejecutar en varios tipos de servidores, no sólo en los servidores de Microsoft Windows NT. Este manual explica cómo escribir páginas web dinámicas que utilizan este lenguaje de scripting del lado del servidor. PHP Builder Proporciona más información para los desarrolladores de PHP. Traductores de paginas web Proporcionar apoyo multilingüe en su sitio web puede ser importante. Las herramientas están actualmente disponibles en Internet para traducir fácilmente páginas web a distintos idiomas. Aunque la calidad de la traducción no es perfecta, las herramientas pueden proporcionar una buena traducción del primer corte, que luego puede ser refinado por un hablante nativo de la lengua. Babelfish de Yahoo Este producto traduce páginas web de Inglés a: francés, español holandés, portugués, alemán, italiano, chino, japonés, coreano y ruso. Traducciones en la dirección inversa también puede ocurrir. Este servicio es gratuito. 33/71

34 Ranking de las páginas web Existe una variedad de herramientas en Internet que están disponibles para controlar el ranking de páginas web en los principales motores de búsqueda. Algunos instrumentos de clasificación evaluarán sobre la base de consultas específicas. El análisis de popularidad de enlaces es una de las mejores formas de medir cuantitativamente la visibilidad global de su sitio web. En pocas palabras, la popularidad de enlaces se refiere al número total de enlaces que un motor de búsqueda ha encontrado para su sitio web. LinkPopularity.com Este servicio gratuito genera una "Informe de popularidad de enlace", que detalla los sitios que enlace a una URL determinada. Índice de Visibilidad Marketleap Esta herramienta de la popularidad de enlaces está diseñado para ayudar a los optimizadores de buscadores y marketing en línea, no sólo para saber quién está enlazando a su sitio, pero para ejecutar también un informe de evaluación comparativa para mostrar rápidamente cuál es su postura respecto a los competidores y otros jugadores en línea más importantes. Markup Validation El Servicio de Validación de marcado es un validador gratuito de World Wide Web Consortium (W3C) que permite a los usuarios de Internet comprobar que los documentos HTML y XHTML estén bien marcados. El marcado de la validación es un paso importante para asegurar la calidad técnica de las páginas web. Dado que la mayoría de los documentos web se escriben utilizando lenguajes de marcas, éstas son definidas por las especificaciones técnicas, que suelen incluir una gramática formal de lectura mecánica (y vocabulario). La validación de los documentos Web puede ayudar a mejorar y asegurar su calidad, y puede ahorrar mucho tiempo y dinero. La validación no es, sin embargo, ni un control de calidad completo, ni es estrictamente equivalente a la comprobación de la conformidad con la especificación. Así que uno debe asegurarse de emplear aún otra medida de aseguramiento de la calidad. 34/71

35 6. DREAMWAVER CS Explorando Dreamweaver Qué es Dreamweaver? Dreamweaver es una excelente herramienta de desarrollo tanto para usuarios expertos como nuevos. Proporciona un entorno creativo para diseñadores, y se ha convertido rapidamente en el programa preferido para crear y gestionar páginas web. Tanto si desarrollas páginas web, contenidos para móviles, o aplicaciones para servidores, Dreamweaver tienen algo que ofrecer. Figura 1.1 Dreamweaver, vista general Dreamweaver dispone de todo lo que puedes necesitar para una gestión completa de sitios, incluyendo protocolos de transferencia entre un servidor y una máquina local, plantillas de páginas web, y mecanismos de seguridad como comprobadores de enlaces e informes de sitios. Usando estas herramientas puedes estar seguro que tu sitio web funciona bién y tiene un diseño atractivo Si estás diseñando páginas web con CSS (Cascading Style Sheets), el Browser Compatibilty check y CSS Advisor te ayudará a localizar cualquier problema que puedan surgir con el uso de los diferentes buscadores. 35/71

36 Figura 1.2 Dreamweaver, vista de código Dreamweaver te permite trabajar en código con vista de un documento. Este es un poderoso editor de texto. Puedes editar código HTML directamente y cambiar las vistas para ver los resultados del codigo con el que trabajas. Caracteristicas como color del código, indexación, y ayudas visuales hacen de Dreamweaver un editor de textos ideal para diseñadores web de cualquier nivel. Figure 1.3 Pagina de bienvenida de Dreamweaver y selección del tipo de fichero a desarrrollar Para desarrolladores experimentados, Dreamweaver soporta lenguajes populares como JavaScript, además de lenguajes como ColdFusion, PHP, and ASP.NET. 36/71

37 Menus especializados y paneles de código te ayudarán a contruir páginas y aplicaciones en el lenguaje que escojas. Inserción personalizada de menus y paneles de código te ayudarán a construir páginas y aplicaciones en el lenguaje de tu elección. Características de Dreamweaver Figure Tipos de edición de ficheros de Dreamweaver Dreamweaver tiene tres opciones diferentes. Cuando editas un documento Dreamweaver te permite trabajar en Design, Split, o Code view. Puedes cambiarlas las vistas mediante un simple click en la barra de herramientas del documento. Las vistas de diseño te permiten crear visualmente y ver todo lo que haces. Figura 1.5 Ftp a través Dreamweaver Construido en FTP te permite subir y descargar ficheros a y desde el servidor web usando el panel y la interfaz. O puedes usar también el botón Get/Put en cualquier momento para colocar imágenes con las que este trabajando. No hay necesidad de software adicional. Dreamweaver tambien proporciona la funcionalidad Check In/Check Out ademas de sincronización para una fácil gestión de archivos. El panel Insertar proporciona iconos intuitivos para los elementos más comunes de la pagina web. Esto le permite añadir elementos a una página con un simpe click. Paneles adicionales le permitirán 37/71

38 cualquier elemento para asegurarte de que ves exactamente lo que quieres. Incluidas en el panel pre-determinado Insertar se encuentran elementos para formatear texto, construir formas y crear diseños. Tambien podrás adaptar Favoritos con los elementos más usados. Figure 1.6 Insertar iconos para Desarrollo Web Diseños de trabajo adaptables te permiten guarder combinacioens y posiciones de paneles y barras de tareas para un uso más fácil. Puedes guardar diseños de trabajo para diferentes usuarios o crear espacios diferentes de trabajo para tareas diferentes. 38/71

39 Figura 1.7 workspace layout El panel CSS te permite beneficiarte de opciones de diseño y formateado a taves de Cascading Style Sheets. Este panel te permite crear, editar y gestionar estilos. Figura 1. 8 HTML y CSS panel 39/71

40 6.2. Creando un documento Figura 2.1 Pantalla de bienvenida Un documento puede ser hecho por medio de la pantalla de bienvenida o de forma alternativa presionando File New. Figure 2.2 Creando un nuevo fichero Página en blanco: Esta opción te permite escoger desde 17 tipos diferentes de docuemntos web. Si seleccionas <ninguno> en la columna de diseño, Dreamweaver crea una página web sin mas contenidos que el esqueleto básico HTML usado en cada página web. Plantilla en blanco: Esta opción te permite crear una plantilla Dreamweaver. Pagina desde la Plantilla: Esta opción lista todos los sitios que has definido en Dreamweaver, junto con la splantiilas asociadas. 40/71

41 Pagina desde ejemplo: Contiene una selección de hojas de etilo de ejemplo que pueden ser usadas como un punto de inicio para crear la tuya. Tambien ofrece esquema de páginas. Otro: Esto crea otros documentos web relacionados Probando nuestro sitio web Desarrollar un sitio web especialmente cuando se utiliza un lenguaje dinámico como PHP requiere un montón de pruebas. Por esa razón un entorno de prueba local ayuda en muchos aspectos al desarrollador y ofrece muchas ventajas como la seguridad, estabilidad, velocidad y comodidad. Hay muchas pruebas de PHP entornos de software que usted puede encontrar y descargar lado a otro de Internet. Uno de ellos es XAAMP para las ventanas. Se puede descargar e instalar, desde aquí. El software es fácil de instalar y también proporciona instrucciones para ayudar si hay problemas. Cuando se ha instalado por primera vez, Apache es capaz de albergar un solo sitio web, que se identifica en un entorno de prueba local por el siguiente URL: Para anular esta restricción, se podría desarrollar sitios web en las subcarpetas de la raíz del servidor Apache. Por ejemplo, si tenemos dos sitios web llamados sitio1 y sitio2 y crear subcarpetas separadas para ellos en la raíz del servidor, podemos acceder a ellos en nuestro entorno de prueba, como: y Creando definiciones para el sitio web Después de decidir dónde colocar los archivos del sitio web que usted necesita para continuar con el proceso de instalación de Dreamweaver. El proceso es el mismo o bien se refiere a las pruebas de archivos PHP localmente a distancia. Figura 2.3 Definiendo el sitio web Podemos abrir el cuado de diálogo Site Definition. 41/71

42 Figure 2.4 Definición del sitio y opciones avanzadas. Es mejor usar las opciones básicas y avanzadas del cuadro de diálogo para definir el sitio web, ya que la opción básica contiene solamente las opciones esenciales Dreamweaver y textos Cuando creamos una nueva página web, como por ejemplo una con extensión html. o. Php, Dreamweaver inserta automáticamente todas las etiquetas HTML necesarias para una página básica. En la vista Diseño, como podemos ver en la Figura 2.3 se nos presenta lo que parece ser una página completamente en blanco. Sin embargo, si revisamos la vista Código o en la vista Dividir, vemos las etiquetas básicas creadas. Figura 2.5 Código básico detrás de una página en blanco 42/71

43 Si empezamos a escribir en la vista Diseño nuestro texto aparecerá como en un procesador de textos. Como podemos ver en la figura 2.4 el mismo texto aparece en la vista de código. Cuando presionamos Enter, Dreamweaver ajusta el texto. Figure 2.6 Escribiendo texto, visible en diferenets vistas El texto se alinea automáticamente a la izquierda y se ajusta cuando se alcanza el borde de la ventana del documento. Se parece a un procesador de textos sin embargo tenemos que pulsar Enter sólo cuando se cambia el párrafo, de lo contrario puede haber espacio a la izquierda en nuestro sitio web en los apartados vacíos. 43/71

44 Figura 2.7 Uso de Enter y párrafos vacios Copiando y pegando texto Copiar y pegar texto en Dreamweaver se puede hacer desde documentos de texto procesados y otras aplicaciones directamente en la vista de diseño. Dreamweaver mantiene casi todo el formato del texto. También ofrece las opciones de copia Con el fin de hacer eso, tenemos que ir al menú Edición y seleccione Preferencias. Entonces, como podemos ver en la Figura 2.6 se selecciona el tipo de pasta que le gustaría usar. 44/71

45 Figura 2.8 Opciones de copiar-pegar Del mismo modo podemos importar documentos completos en Dreamweaver con el mismo resultado que la opción de copiar y pegar. Para hacer eso tenemos que ir a Archivo Importar y seleccione Documento de Word. Luego buscamos en nuestra unidad de disco duro para encontrar el documento que desee y pulse Abrir. Figura 2.9 Importando desde un documento word Dreamweaver e imagenes Las imágenes se insertan en HTML con la etiqueta <img>, que tiene los atributos que describen el origen del archivo de imagen, su altura y anchura, y el texto alternativo para los navegadores no 45/71

46 visuales. Al insertar una imagen en Dreamweaver la vista Diseño o la vista Código, el programa genera el código necesario. Lo único que tienes que hacer es decidir dónde colocar la imagen. Podemos insertar una imagen en nuestro documento de trabajo de muchas maneras. Uno muy común es que arrastre y suelte la imagen desde el panel Activos. Por supuesto, tenemos que definir el primer directorio, como se muestra en la Figura 2.4. Figura 2.10 Assets panel Como alternativa podemos utilizar el panel Archivos para buscar la imagen y arrastrar y soltar en el documento. Sin embargo esta opción no tiene la vista previa en miniatura del panel Activos. Como podemos ver en la figura 2.10 dentro del panel de Activos podemos encontrar los activos clasificados en nueve categorías. Aparte de la vista previa en miniatura del panel nos muestra las dimensiones del archivo, el tamaño y el tipo. Con el botón de edición que podemos encontrar en la esquina inferior derecha del panel se puede cambiar la imagen antes de insertarla en el documento de Dreamweaver. El botón se inicia el programa de diseño gráfico por defecto que hemos instalado en nuestro ordenador. Podemos agregar imágenes a los favoritos en el caso que nos guste usarlas a menudo y no queremos buscarlas. Podemos cambiar el modo de los favoritos de los activos del sitio, seleccionando los botones de radio en la parte superior del panel Activos. Además de arrastrar y soltar una imagen desde el panel Activos, podemos hacer clic en el botón Insertar en la parte inferior izquierda del panel para insertar la imagen siempre que nuestro cursor se encuentra en la ventana de documento Insertando fotos en Dreamweaver a través del sistema de archivos Otra forma de insertar imágenes es a través del cuadro de diálogo Seleccionar origen de imagen. Para hacer eso tenemos que ir al menú superior principal de Dreamweaver y seleccionar Insertar, Imagen 46/71

47 Figura 2.11 Seleccione el cuadro de diálogo Fuente de la imagen Si empezamos a desarrollar una página web a través de Dreamweaver y no se ha definido el sitio web las imágenes que se insertan seran codificadas de alguna manera como: <img width="350" height="232" /> src="file:///c /vhosts/mywebsite/images/mountain.jpg" Si guardamos esta página en un sitio definido, Dreamweaver cambia automáticamente la fuente de archivo en un vínculo relativo, algo como. <img width="350" height="232" /> src="../../mywebsite/images/mountain.jpg" Este cambio permitirá que la imagen sea visible cuando el sitio web se carga en un servidor web Imagenes y texto alternativo Después de seleccionar la imagen y presionar el botón de insertar, Dreamweaver muestra la etiqueta de imagen Atributos de accesibilidad. Este cuadro nos permite insertar un texto alternativo para describir la imagen. Al hacer esto ayudamos a las personas con discapacidad visual que utilizan equipos de asistencia tecnológica (como lectores de pantalla) para navegar a través de nuestra página web con más eficacia. El campo de descripción larga con la dirección URL se utiliza a menudo para imágenes complejas o diagramas con el fin de proporcionar una descripción más detallada. Figura Atributos de las etiquetas de accesibilidad 47/71

48 Después de llenar el texto alternativo presiona OK y vemos la imagen insertada. Si pulsamos cancelar, una vez más la imagen se inserta, pero sin el texto alternativo y la descripción larga Almacen de imágenes Hay muchos casos en los que desarrollamos una página web y no tenemos la imagen adecuada para ello. En ese caso, temporalmente usamos un marcador de posición. De esta manera logramos la especificación de tamaño de la imagen y otros atributos. También impide que Dreamweaver muestre un icono roto en la imagen, como sucede si se utiliza el nombre de una imagen inexistente. Para hacer eso tenemos que posicionar a nuestro cursor en la ventana de documento donde queremos que la imagen que se inserta y luego seleccione Marcador de posición de imagen en la ficha Común de la barra Insertar. Figura 2.13 Imagenes de marcador de exposición Después de seleccionar el marcador de posición, vemos un cuadro de diálogo con las especificaciones de nuestro marcador de posición. Figure 2.14 Espeficicaciones de marcador de posición 48/71

49 6.2.8 Insertando peliculas Flash La inserción de una película Flash en una página web es muy similar a la inserción de una imagen. Sin embargo, el código subyacente es muy diferente. El primer cambio es relativamente menor. El submenús de Medios del menú Insertar y ficha Común de la barra Insertar ya no se refieren a Flash, sino a SWF. Esto se debe a las películas hechas en Flash (http://www.adobe.com/products/flash/) utilizar el formato SWF y ejecutan un plugin para el navegador Flash Player. Dreamweaver CS4 para flash evita el uso de la etiqueta <embed>, que no forma parte del estándar HTML. Es necesario actualizar su versión de Flash Player si es demasiado antigua para soportar las características utilizadas por el archivo SWF. Para insertar un archivo SWF, tenemos que posicionar el cursor de la ventana de documento donde desea que la película este, y seleccionar SWF en el submenú de Medios del menú Insertar o la ficha Común de la barra Insertar. Navegue hasta el archivo SWF en el cuadro de diálogo Seleccionar archivo y haga clic en Aceptar. Figura 2.15 Insertando un fichero SWF Después de eso nos encontramos con el cuadro de dialogo de accesibilidad de la etiqueta de objeto, donde podemos introducir un título, clave de acceso, y el índice de tabulación para la película. Todos los elementos son opcionales. Al igual que con las imágenes, hacer clic en Cancelar no se detiene la película desde que se inserta en la página, lo único que hace es ignorar los atributos de accesibilidad. 49/71

50 De forma predeterminada, Dreamweaver muestra un marcador de posición para el archivo SWF. Para ver la película como se ve en el contexto de la página, seleccione el marcador de posición en la vista Diseño y haga clic en el botón Reproducir en la parte inferior derecha del inspector de propiedades. Figure 2.16 Reproduciendo un fichero flash en Dreamweaver Como podemos ver en la figura 2.16, el inspector de propiedades tiene un montón de opciones para controlar la configuración de las películas de Flash. En la parte superior izquierda, se muestra el tipo de archivo y el tamaño. Inmediatamente a continuación es un campo de etiqueta que muestra el atributo id de la etiqueta. Dreamweaver asigna automáticamente FlashID como el valor para el primer objeto SWF. Posteriores películas SWF insertados en la misma página se numeran FlashID2, FlashID3, y así sucesivamente. El campo es editable, para que podamos entrar en nuestra propia elección de Identificación del lugar. Una descripcion de otras opciones: 50/71

51 W y H: anchura de la película y la altura en píxeles. Estos se rellenan automáticamente cuando se inserta el objeto SWF. Archivo: La ruta de acceso del archivo SWF. El Punto de archivo de la herramienta y los iconos de carpeta de trabajo del mismo modo que para las imágenes. Src: Este campo es para que ingrese la ubicación del archivo FLA de la cual se creó una película de Flash. BG: Se inserta un parámetro en la etiqueta <object> para establecer el color de fondo para el archivo SWF. Edit: Esto abre el archivo de la película FLA para editarlo. Para utilizar esta opción, primero debe entrar en la ubicación del archivo en el campo Origen. Clase: Esto le permite aplicar una clase CSS a la etiqueta <object>. Loop: Esta opción está seleccionada por defecto. Anule la selección si no desea que la película se ejecute como un bucle continuo. Reproducción automática: Esta opción está seleccionada por defecto. Anule la selección si no desea que la película se ejecute automáticamente cuando la página se carga por primera vez. Espacio V y Espacio H: Estos insertan el vspace obsoleta y los atributos hspace en la objeto para añadir espacio vertical y horizontal en torno a la película. Calidad: Controla la apariencia de la película durante la reproducción. Elija entre las siguientes opciones: Alto: Este es el valor predeterminado. Se ofrece la mejor calidad, pero requiere una gran cantidad de energía del procesador. Bajo: seleccione esta opción si la velocidad es más importante que la calidad. Auto Bajo: Esta prioridad de velocidad, pero mejora la calidad cuando sea posible. Alta automática: Esto le da la misma prioridad a la velocidad y la apariencia, pero sacrifica la calidad, si se requiere más velocidad. Escala: Esto determina cómo se ajusta la película a las dimensiones establecidas en anchura y altura. Alineación: Se inserta el obsoleto atributo align en la etiqueta <object>. Wmode: Esto determina la forma en la película SWF interactúa con menús desplegables y otros elementos controlados por JavaScript. Elija entre las siguientes opciones: Opaco: Este es el valor predeterminado. Permite a los menús desplegables para visualizar correctamente a través de la película. Se da a la película un fondo opaco de manera que los elementos con un menor índice z se ocultan detrás. (Z-index es una propiedad CSS que controla el orden de apilamiento de los elementos posicionados.) Transparente: Si la película SWF tiene elementos transparentes, esto permite que los elementos con menor z-index para mostrar a través de detrás de él. Ventana: Esto elimina el parámetro wmode de la etiqueta <object>. Seleccione esta opción si la película no se ve afectada por elementos dinámicos, tales como menús desplegables. Es más eficiente y fácil de usar para los lectores de pantalla para invidentes. 51/71

52 Parámetros: Se abrirá un cuadro de diálogo para configurar los parámetros adicionales que se esperan en la película. Dreamweaver coloca una ficha de color azul brillante con un icono de ojo abierto en la parte superior izquierda del marcador de posición SWF. Si seleccionamos el icono veremos el contenido alternativo que aparecerá cuando un usuario accede a la página con un navegador utilizando una versión antigua de Flash Player. Podemos editar o eliminar este contenido de la manera que nos guste Estructurando los contenidos de nuestra página web Anteriormente vimos que Dreamweaver encierra el texto escrito en la vista Diseño con <p> (punto) las etiquetas cuando se presiona Enter / Return. También puede importar texto de Microsoft Word o pegar texto desde otras aplicaciones, y Dreamweaver intentará preservar la estructura y el formato. El texto se estructura normalmente utilizando una o más de los siguientes elementos: Los párrafos <p>) Las cabeceras (h1 a través h6) Texto preformateado (<pre>) Las etiquetas en línea (por ejemplo, <strong>, <em>, <code>, etc) Listas (<ul>, <ol> o <dl>) Las citas de bloque (blockquote) Tablas (<table>) Hay cinco formas básicas de añadir estos elementos estructurales: A través de la vista HTML del inspector de propiedades A través de la ficha Texto de la barra Insertar (tablas de utilizar las fichas comunes y Diseño) A través del menú Formato (tablas de utilizar la opción Insertar y modificar los menús) Mediante el uso de atajos de teclado (no disponible para todos los elementos) Al escribir el código directamente en la vista Código La vista HTML y CSS del inspector de propiedades Como podemos ver en la figura 2.17 el inspector de propiedades puede ser utilizado de forma diferente para HTML y CSS. La captura de pantalla en la figura 2.17 se muestra la vista HTML y la captura de pantalla inferior muestra la opción de CSS. Podemos ver muchas similitudes, pero su uso es completamente diferente. 52/71

53 Figura 2.17 HTML and CSS property Inspectors La vista HTML se ocupa principalmente del código HTML, aunque la clase en el menú desplegable de la página el botón Propiedades de dar algún tipo de acceso a la CSS. El punto de vista CSS está dedicado exclusivamente a la CSS. Los botones de negrita y cursiva que son comunes a ambos puntos de vista funcionan de maneras muy diferentes. Si hace clic en el botón Negrita en la vista HTML, Dreamweaver inserta etiquetas en el código subyacente. Al hacer clic en el mismo botón en la vista de CSS lanza la nueva regla de estilo de cuadro de diálogo o se abre una regla de estilo existente para su edición, en función del valor que aparece en la regla de destino en el menú desplegable Párrafos, cabeceras y texto pre-formateado. El formato en el menú desplegable en la parte superior izquierda de la vista HTML del inspector de propiedades (ver Figura 2.17) agrega texto envolviéndolo en el párrafo (<p>), título (h1 a través h6), o texto preformateado (<pre>) etiquetas. También elimina las etiquetas cuando se selecciona Ninguna como opción. Para entender cómo funciona el formato en el menú desplegable, es una buena idea abrir la vista de Split y ver donde las etiquetas se conectan o se desconectan. Es importante entender que la estructura no se aplica al texto seleccionado, sino a toda la manzana donde actualmente se encuentra el cursor. Si el cursor se encuentra dentro de un párrafo y selecciona la Línea 2 del Formato en el menú desplegable, los <p> se sustituyen por etiquetas <h2>. Si selecciona Ninguno, el más próximo par de <p>, <h1> través <h6> o <pre> etiquetas se retira. No hay otras etiquetas se ven afectados. La ficha Texto de la barra Insertar (ver Figura 2.18) y en el submenú Formato de párrafo del menú Formato funcionan básicamente de la misma manera. El botón Párrafo de la ficha Texto de la barra Insertar es el quinto icono desde el principio. 53/71

54 Figura 2.18 Insertar format de texto Los botones de negrita y cursiva en la vista HTML del inspector de propiedades funcionan de la misma manera que en un procesador de textos. Si hacemos clic en uno de los botones, no pasa nada en la vista Código, pero tan pronto como empiece a escribir, Dreamweaver inserta etiquetas <strong> o <em>. Haga clic en el botón de nuevo. El punto de inserción no se mueve en la vista Código, pero tan pronto como empiece a escribir de nuevo, salta fuera de la etiqueta de cierre y vuelve a texto normal. También puede resaltar una selección de texto y lo envuelve en las etiquetas <em> o <strong>. Figura 2.19 Texto en negrita y cursiva Los botones de negrita y cursiva aparecen incrustadas cuando estan dentro del texto en negrita o cursiva. Selecciónando la totalidad o parte del texto con formato y haciendo clic en el botón de nuevo se elimina el formato de la selección. El uso de estos botones es útil y ahorra tiempo Menu Estilo El submenú Estilo del menú Formato ofrece una gama mucho más amplia de etiquetas en línea, muchas de los cuales están diseñadss para añadir estructura a nuestro documento. Como podemos ver en la figura 2.20, además de negrita y cursiva, este submenú ofrece, de uso menos frecuente, 54/71

55 pero importante, etiquetas de código (<code>), teclado (<kbd>), y Cita (<cite>). Las mismas funciones que se pueden encontrar en la ficha Texto de la barra Insertar (ver Figura 2.18). Figure 2.20 Style menu El submenú Estilo trabaja de la misma forma que los botones de negrita y cursiva en la vista HTML del inspector de propiedades. Podemos seleccionar una opción, comienza a escribir, y seleccionar la opción de nuevo para insertar la etiqueta de cierre. Alternativamente, podemos seleccionar una opción para ajustar el texto resaltado en las etiquetas en línea, o eliminar las etiquetas de una selección. Al mismo submenú se puede acceder desde el menú contextual haciendo clic derecho en la vista Diseño. Viñetas y listas numeradas Lista desordenada: Por defecto, los navegadores muestran cada elemento como un punto de bala. La lista está rodeado por las etiquetas <ul>, y cada elemento está envuelto en <li>. Lista ordenada: Por defecto, los navegadores prefijo cada elemento con un número, a partir del 1. La lista está rodeado por las etiquetas <ol> y cada elemento está envuelto en <li>. Lista Definición: Este tipo de lista se ha diseñado para un glosario, una lista de términos, o una colección de pares nombre / valor. La lista está rodeado por las etiquetas <dl>; cada término que se define está envuelto en las etiquetas <dt>, y las definiciones están envueltos en las etiquetas <dd>. Figure 2.21 Viñetas y números 55/71

56 Los iconos situados a la derecha de la clase en el menú desplegable en la vista HTML del inspector de propiedades crean listas ordenadas y desordenada, en otras palabras, viñetas y listas numeradas, como se muestra en la figura Tablas De acuerdo al W3C las tablas no deben ser utilizadas únicamente como un medio para el diseño del documento de contenido ya que esto puede presentar problemas cuando se presenten en medios no visuales, tales como lectores de pantalla. Además, cuando se utilizan con los gráficos, las tablas pueden obligar a los usuarios desplazarse horizontalmente para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deberían usar hojas de estilo para controlar la maquetación en lugar de tablas. Se considera que es mejor utilizar las tablas exclusivamente para presentar los datos que necesitan ser dispuestos en filas y columnas. Para insertar una tabla tenemos que posicionar a nuestro cursor donde queremos que la tabla empieze y hacer clic en la opción Tabla en la ficha Común o Diseño de la barra Insertar. Figure 2.22 Insertando tablas en un document Dreamweaver 56/71

57 Figura 2.23 Insertando tablas en un documento Dreamweaver: El cuadro de dialógo ofrece las siguientes opciones: Filas y columnas: Introduzca el número de filas y columnas que desee en la tabla. Se pueden agregar más columnas o filas o eliminarla más adelante. Ancho de la tabla: Se puede configurar el ancho en píxeles o como porcentaje. Si no queremos especificar un ancho, podemos eliminar el valor y dejarlo en blanco. Grosor del borde: Esto establece el atributo del borde en la tabla que se esta abriendo y aplica el grosor del borde mismo de la tabla y todas las celdas de la tabla. CSS nos da un mayor control sobre las tabla y las celda. Debemos dejar este campo en blanco para eliminar todas los bordes o si queremos usar CSS. Relleno de celda: Esto establece el atributo relleno de la etiqueta en la apertura y se aplica la misma cantidad de relleno interior por todos los lados de cada celda. Para un control más preciso, hay que dejar este campo en blanco y el usar CSS. Espacio entre celdas: Esto establece el atributo espaciado de celda en la etiqueta <table> apertura y se aplica la misma cantidad de espacio en todos los lados entre las celdas de la tabla. Encabezado: Esto controla el uso de celdas de la tabla <th> de cabecera y del atributo scope para indicar si el encabezado se aplica a una fila de tabla o columna. Los navegadores visuales suelen mostrar texto en las celdas <th> negrita y centrado. Al atributo scope hace que sea fácil para las personas con discapacidad visual para navegar por la tabla con un lector de pantalla. Podemos elegir una de las cuatro opciones: Ninguna, Izquierda, Arriba, o ambos. Leyenda: Si queremos dar a la mesa de un título, nos adentramos en el texto en este campo. Por defecto, el título se muestra por encima de la mesa, pero podemos usar CSS para moverlo a la parte inferior. Resumen: Cualquier texto introducido aquí es leído por el lector de pantalla, pero no aparece en la pantalla. Cuando se hace clic en Aceptar, Dreamweaver crea el esqueleto de la tabla e inserta un 57/71

58 espacio de no separación (&nbsp) en cada célda en el código subyacente. Esto evita las céldas vacías de manera extraña en un navegador. Tan pronto como se inserta el contenido en la celda, Dreamweaver normalmente elimina los &nbsp. Sin embargo, si nos encontramos con el texto mal alineado en una celda de la tabla, es una buena idea revisar el código subyacente y retire el manualmente, si es necesario. Figure 2.24 Esqueleto de la tabla Si deja en blanco Ancho de Tabla en el cuadro de diálogo de la tabla y les resulta difícil colocar el cursor dentro de celdas de la tabla, seleccione el botón Ampliado de la izquierda de la ficha Diseño de la barra Insertar. Como alternativa, seleccione Ver Tabla de los modos Modo de tablas expandidas. Esto expande las celdas de la tabla en la vista Diseño para que sean más fáciles de editar, no afecta al código subyacente o de cómo la tabla se representa en un explorador. Una vez que se ha insertado en la tabla de contenido, haga clic en el enlace de salida en la parte superior de la ventana de documento o seleccione el botón estándar en la ficha Diseño de la barra Insertar para contraer la tabla a su forma y tamaño normales. Una vez hemos insertado una tabla, puede cambiar sus propiedades básicas mediante la selección de la tabla en vista Diseño y utilizando el inspector de propiedades. Para seleccionar la tabla, tenemos que hacer clic en uno de sus bordes en la vista Diseño. Si nos encontramos con esta dificultad, podemos hacer clic dentro de cualquier celda, y luego seleccione <table> en el selector de etiquetas en la parte inferior de la ventana de documento. La figura 2.25 muestra las opciones disponibles en el inspector de propiedades cuando una tabla se ha seleccionado.. 58/71

59 Figure 2.25 Opciones de tabla en el inspector de propiedades La mayoría de las opciones son los mismos que en el cuadro de diálogo Tabla. Al campo en blanco a la izquierda del inspector de propiedades es donde podemos introducir en un atributo id de la tabla. Si las reglas de estilo se han creado una lista de identificadores utilizados se puede acceder a un menú desplegable en este campo (ID debe ser único, por lo que los identificadores que han sido asignados a otros elementos que no se incluyen). Si aumentamos el número de filas o columnas en el inspector de propiedades, que se añaden a la parte inferior y derecha de la tabla, respectivamente. Si reducimos el número, que se retiran de la parte inferior y derecha, y cualquier contenido en ellos se elimina. Al Alinear en el menú desplegable en la parte superior derecha se inserta el obsoleto atributo align en la etiqueta de en la apertura <table> para alinear a la izquierda la tabla, a la derecha, o centro de su elemento padre. La mejor práctica es dejar esto en Default (alineado a la izquierda) y el uso de CSS para posicionar a la mesa. Los cuatro iconos en la parte inferior izquierda del inspector de propiedades retire la altura y la anchura de los atributos de todas las celdas de la tabla y convertir anchos entre los píxeles y porcentajes. Podemos identificar sus papeles de la información sobre herramientas que se muestran cuando pasamos nuestro puntero del ratón sobre cada uno de ellos. El inspector de propiedades, cambia cuando ponemos nuestro cursor dentro de una celda de la tabla o seleccionamos sólo una parte de una tabla. Como muestra la Figura 2.26, la mitad superior del inspector de propiedades muestra la vista de CSS o HTML, dependiendo de qué botón se ha seleccionado a la izquierda, y la mitad inferior contiene las opciones relacionadas con las celdas de tabla. Figure 2.26 Opciones de celda en inspector de propiedades 59/71

60 La mitad superior se aplica al contenido dentro de la celda; la mitad inferior se aplica a la celda seleccionada (s). La mayoría de las opciones de los atributos de inserción inferior y medio en desuso alineación horizontal y vertical, anchura, altura, sin ajuste de texto y color de fondo). Estos valores normalmente se deben establecer a través de CSS, en lugar de utilizar el inspector de propiedades. Las opciones útiles en el inspector de propiedades de las celdas de la tabla son la casilla de verificación Encabezado, que cambia la celda seleccionada (s) entre el uso de etiquetas <th> y <td>, y los dos iconos en la parte inferior izquierda, que Combinar y dividir celdas. En la figura 2.26, el icono que une las células usando rowspan y colspan atributos aparece en gris, ya que sólo se activa cuando más de una celda se selecciona en la vista Diseño. Por otro lado, el icono de división sólo se activa cuando una sola célula se selecciona. Cuando haga clic en él, el cuadro de diálogo Dividir celda le preguntará si queremos dividir la celda en columnas o filas y cuántas ha de crear. Las etiquetas <Div> Las etiqueta <div> es una sencilla herramienta para agrupar los elementos de una página que se desee mantener juntos. No tiene estilos que hacen que esté disponible para el estilo que queramos. En combinación con el atributo id, que es también una manera de gran alcance de la aplicación de estilos en consonancia con todo lo que dentro de la misma <div>. Una vez que hemos organizado nuestro contenido en una estructura lógica usando las etiquetas y otros elementos clave a nivel de bloque, se puede utilizar CSS para darles estilo visualmente, añadir imágenes de fondo y colores, y la modificación de su posición y relación con otros elementos mediante el ajuste de los márgenes y relleno. Dar estilo con CSS le ofrece una herramienta mucho más poderosa establece que las tablas, pero, por supuesto, aprender a dominar ese conjunto de herramientas es algo que viene sólo a través de la experiencia. Figure 2.27 Insertando la etiqueta <div> 60/71

61 Con el fin de insertar una etiqueta <div, tenemos que seleccionar el botón Insertar etiqueta Div. en la ficha Común de la barra Insertar, como se muestra en la figura Alternativamente, podemos usar el botón Insertar etiqueta Div. en la ficha Diseño de la barra Insertar, o seleccionamos Insertar Presentación Objetos Etiqueta Div... Después de hacer eso abrimos el Insertar etiqueta Div cuadro de diálogo. Figura 2.28 Cuadro de dialogo etiqueta div Insertar: Este menú desplegable es sensible al contexto. Si el contenido está seleccionado en la ventana de documento, se muestra Ajustar a la selección, como se muestra en la figura Si no se selecciona nada, el valor por defecto está en el punto de inserción. Ambas opciones se explican por si mismas.al seleccionar una de las otras opciones en el menú Insertar se activa el menú desplegable al lado. Tanto los menús de trabajar en conjunto e insertar un <div> con texto de marcador de la siguiente manera: Antes de la etiqueta: Esta opción sólo está disponible cuando elementos de la página tiene los atributos id. Se inserta la clave inmediatamente antes del elemento seleccionado en el desplegable de la derecha del menú. Después del inicio de la etiqueta: Se inserta la clave inmediatamente después de la etiqueta de apertura del elemento seleccionado en el desplegable de la derecha del menú. Además de los elementos con los atributos id, el menú de la derecha muestra la etiqueta <body>. Antes de final de la etiqueta: Se inserta la clave inmediatamente antes de la etiqueta de cierre del elemento seleccionado en el desplegable de la derecha del menú. Además de los elementos con los atributos id, el menú de la derecha muestra la etiqueta <body>. Después de la etiqueta: Esta opción sólo está disponible cuando los elementos de la página tienen los atributos id.. Se inserta la clave inmediatamente después de la etiqueta de cierre del elemento seleccionado en el desplegable de la derecha del menú. Clase: Introduzca el nombre de la clase CSS que desea aplicar a la <div>. Clases existentes aparecen como un menú desplegable. Identificación: Escriba el nombre del atributo id desea asignar a la <div>. ID existentes definidos en las hojas de estilo asociadas a la página se enumeran como un menú desplegable. Desde un ID puede ser utilizado una sola vez en una página, la lista sólo muestra los identificadores que aún no han sido asignados a otro elemento. Nueva regla CSS: Esto le permite definir una regla de nuevo estilo que se aplicará a la <div>. 61/71

Manual de uso de Wordpress 2015

Manual de uso de Wordpress 2015 Manual de uso de Wordpress 2015 Introducción Sitio Completo Secciones y áreas del sitio Acceder al gestor de contenido Explorando el escritorio Administración de Entradas (Añadir nueva entrada, Editar,

Más detalles

MANUAL AUTOFORMACIÓN DEL PROFESORADO EDICIÓN DE PÁGINAS WEB

MANUAL AUTOFORMACIÓN DEL PROFESORADO EDICIÓN DE PÁGINAS WEB 2013 MANUAL AUTOFORMACIÓN DEL PROFESORADO EDICIÓN DE GRUPO DE TRABAJO CONSERVATORIO PROFESIONAL DE MÚSICA ÍNDICE Introducción...Pág. 2 Descarga e instalación... Pág. 4 Desarrollo Joomla.. Pág. 10 Edición

Más detalles

Guía de iniciación. Enhorabuena! Ya has creado tu propia página web. Descubre cómo administrarla.

Guía de iniciación. Enhorabuena! Ya has creado tu propia página web. Descubre cómo administrarla. Guía de iniciación Enhorabuena! Ya has creado tu propia página web. Descubre cómo administrarla. Entender la interfaz del manager... página 2 Cómo crear contenido... página 2 Ordenar y gestionar los menús...

Más detalles

Joomla! 3.3 Cree y administre sus sitios Web

Joomla! 3.3 Cree y administre sus sitios Web Capítulo 1: Descubrir Joomla! A. Razones para crear un sitio con Joomla! 9 B. Documentarse sobre Joomla! 9 C. La hoja de ruta de Joomla! 10 D. Qué es un CMS? 12 E. HTML y XHTML 12 F. Diferenciar el contenido

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

JOOMLA!, UNA HERRAMIENTA EDUCATIVA Y DE CENTROS

JOOMLA!, UNA HERRAMIENTA EDUCATIVA Y DE CENTROS JOOMLA!, UNA HERRAMIENTA EDUCATIVA Y DE CENTROS Tomás Clemente Carrilero. Profesor de enseñanza secundaria. Introducción. Joomla! es un sistema gestor de contenidos dinámicos (CMS, Content Management System)

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

Los blog y su uso en educación Capítulo 4: Crear y gestionar un blog con WordPress

Los blog y su uso en educación Capítulo 4: Crear y gestionar un blog con WordPress Los blog y su uso en educación Cap. 4: Crear y gestionar un blog con WordPress Pág. 1 Los blog y su uso en educación Capítulo 4: Crear y gestionar un blog con WordPress Reconocimiento-NoComercial-CompartirIgual

Más detalles

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

Configuración de un sitio local

Configuración de un sitio local Configuración de un sitio local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes

Más detalles

Manual de Administrador

Manual de Administrador Servicio Manual de Administrador Web 2.0 Servicio Web 2.0 Presentación Diseño Web Inicial Diseño Personalizado Control Contenidos Registro de Dominio Hosting en Servidor Correos Electrónicos Con Redes

Más detalles

EDITOR MANUAL DE USUARIO:

EDITOR MANUAL DE USUARIO: MANUAL DE USUARIO: EDITOR Sistema drag & drop... 2 1. Gestor de contenidos... 3 2. Editor de estilo... 5 3. Añadir elementos... 6 4. Deshacer/Rehacer... 13 5. Guardar... 13 Al acceder al visualizador del

Más detalles

Nuevas Tecnologías Aplicadas a la Educación Taller Práctica 1 Primeros pasos con WYSIWYG Web Builder

Nuevas Tecnologías Aplicadas a la Educación Taller Práctica 1 Primeros pasos con WYSIWYG Web Builder Nuevas Tecnologías Aplicadas a la Educación Taller Práctica 1 Primeros pasos con WYSIWYG Web Builder 1. Preparativos Antes de empezar con la práctica, vamos a crear una carpeta donde guardar la web creada.

Más detalles

Bonsai: consulta web del catálogo de la biblioteca

Bonsai: consulta web del catálogo de la biblioteca Bonsai: consulta web del catálogo de la biblioteca Manual de instalación, configuración y uso Versión 5.0 Julio 2009 Fernando Posada fernandoposada@gmail.com Índice 1. Qué es Bonsai?... 3 2. Requisitos

Más detalles

Bonsai: consulta web del catálogo de la biblioteca

Bonsai: consulta web del catálogo de la biblioteca Bonsai: consulta web del catálogo de la biblioteca Manual de instalación, configuración y uso Versión 4.0 Agosto 2008 Fernando Posada http://www.canaltic.com Índice 1. Qué es Bonsai?... 3 2. Requisitos

Más detalles

1. OBJETIVOS DE ESTE TUTORIAL... 2 2. QUÉ ES WORDPRESS?... 2 3. REGISTRARSE COMO USUARIO Y DAR DE ALTA EL PRIMER BLOG... 2

1. OBJETIVOS DE ESTE TUTORIAL... 2 2. QUÉ ES WORDPRESS?... 2 3. REGISTRARSE COMO USUARIO Y DAR DE ALTA EL PRIMER BLOG... 2 1. OBJETIVOS DE ESTE TUTORIAL... 2 2. QUÉ ES WORDPRESS?... 2 3. REGISTRARSE COMO USUARIO Y DAR DE ALTA EL PRIMER BLOG... 2 4. GESTIONAR NUESTRO SITIO WEB WORDPRESS... 8 4.1 ACCEDER AL PANEL DE GESTIÓN...

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

Gestor de Contenidos. Manual del Usuario

Gestor de Contenidos. Manual del Usuario Gestor de Contenidos Manual del Usuario Gestor de Contenidos de Ayuntamiento Acceso al Gestor El acceso al Gestor de Contenidos se realiza a través de la página http://www.emanises.es/empresarialauthor

Más detalles

TEMA 8: CREACIÓN Y PERSONALIZACIÓN DE UN BLOG

TEMA 8: CREACIÓN Y PERSONALIZACIÓN DE UN BLOG Colegio La Inmaculada Misioneras Seculares de Jesús Obrero Nueva del Carmen, 35. 47011 Valladolid. Tel: 983 29 63 91 Fax: 983 21 89 96 e-mail: lainmaculadava@planalfa.es TEMA 8: CREACIÓN Y PERSONALIZACIÓN

Más detalles

GUÍA INSTRUCTIVA PARA INGRESO DE CONTENIDOS EN SITE BUILDER INDEX

GUÍA INSTRUCTIVA PARA INGRESO DE CONTENIDOS EN SITE BUILDER INDEX GUÍA INSTRUCTIVA PARA INGRESO DE CONTENIDOS EN SITE BUILDER INDEX Introducción...2 I. Cómo puedo Editar mi sitio?...4 1. General...4 2. Diseño...6 3. Logotipo y pie...7 4. Páginas de mi sitio...8 a. Página

Más detalles

Acceso al panel de gestión

Acceso al panel de gestión 1 Acceso al panel de gestión Para acceder a la gestión de tu web entra en http://www.siweb.es y pulsa en Acceso clientes en el menú superior. Introduce tus datos de acceso (usuario y contraseña) y pulsa

Más detalles

EXPERIENCIAS EDUCATIVAS. CREAR UN PORTAL EDUCATIVO CON JOOMLA

EXPERIENCIAS EDUCATIVAS. CREAR UN PORTAL EDUCATIVO CON JOOMLA EXPERIENCIAS EDUCATIVAS. CREAR UN PORTAL EDUCATIVO CON JOOMLA AUTORÍA PEDRO J. MORENO GARCÍA TEMÁTICA TIC ETAPA ESO, BACHILLERATO,FP Resumen Con Joomla podemos crear en pocas horas un completo portal para

Más detalles

Manual del Estudiante

Manual del Estudiante Manual del Estudiante Por favor, mándenos sus comentarios, sugerencias y mejoras a teleensino@cesga.es Indice Índice de Contenidos Página de Bienvenida...2 Inscripción...2 Mis Cursos...3 Modificar mi perfil...4

Más detalles

Guía traducida y readaptada por Comunidad Joomla!

Guía traducida y readaptada por Comunidad Joomla! Guía traducida y readaptada por Comunidad Joomla! Tabla de contenidos Introducción Instalar y configurar XAMPP Descargar y descomprimir Joomla! Instalar Joomla! Secciones, categorías y artículos Gestión

Más detalles

acensguías Guía de inicio rápido para crear una tienda online

acensguías Guía de inicio rápido para crear una tienda online Guía de inicio rápido para crear una tienda online Desea montar su propia tienda online? Ahora es más fácil que nunca. Siga los pasos de esta guía de inicio rápido y empiece a vender! Tenga preparado de

Más detalles

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites 1. INTRODUCCIÓN Google Sites es una aplicación gratuita que se enmarca dentro de la filosofía Web 2.0. Permite crear el sitio que puede adaptarse a cualquier situación: web personal, informativa, educativa,

Más detalles

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6 Parallels Panel Contenidos Prólogo 3 Convenciones Tipográficas... 3 Sugerencias... 4 Introducción 5 Familiarizándose con el interfaz de SiteBuilder 6 Creación de un sitio web 8 Edición de un sitio web

Más detalles

Gestor de Contenidos CMS. Prof: Ing. Henrry Servitá

Gestor de Contenidos CMS. Prof: Ing. Henrry Servitá Gestor de Contenidos CMS Que es un CMS? CMS son las siglas de Content Management System, que se traduce directamente al español como Sistema Gestor de Contenidos. Como su propio nombre indica, es un sistema

Más detalles

Crear y gestionar un blog con WordPress

Crear y gestionar un blog con WordPress Crear y gestionar un blog con WordPress Pág. 1 Crear y gestionar un blog con WordPress Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: José Sánchez Rodríguez (Universidad de Málaga)

Más detalles

Gestores de Contenidos (CMS)

Gestores de Contenidos (CMS) Joomla Gestores de Contenidos (CMS) Sistema de Gestión de Contenidos o Content Managment System (CMS) Aplicación informática para crear, editar, manejar y publicar contenidos de una forma organizada y

Más detalles

GUÍA DE INICIO RÁPIDO

GUÍA DE INICIO RÁPIDO GUÍA DE INICIO RÁPIDO Bienvenido a SugarSync. Estamos muy contentos de que te hayas unido a nosotros! En esta guía, te explicaremos los pasos para instalar SugarSync en tu ordenador y sincronizar tus carpetas

Más detalles

Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com

Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com Índice 1.Introducción 2.Acceder en modo Editor 3.Explorando el escritorio de wordpress 4.Administración de

Más detalles

TU REPUTACIÓN EN INTERNET S.L. - CIF B-85.882.157 antonio@tureputacioneninternet.com TUTORIAL DE WORDPRESS

TU REPUTACIÓN EN INTERNET S.L. - CIF B-85.882.157 antonio@tureputacioneninternet.com TUTORIAL DE WORDPRESS TUTORIAL DE WORDPRESS TU REPUTACIÓN EN INTERNET 2011 Índice 1. Introducción... 3 2. Acceder en modo Editor... 3 3. Explorando el escritorio de wordpress.com... 4 4. Administración de Entradas... 6 4.1.

Más detalles

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR SERVICE DEFINITION MANUAL DEL ADMINISTRADOR Versión de producto: 1.5 Última revisión: 11-11-2008 2008 Carabela Consulting, S.L. Este documento contiene información confidencial. Página 1 de 18 ÍNDICE 1.

Más detalles

Internet Explorer 5.0

Internet Explorer 5.0 Internet Explorer 5.0 Trucos para la suite de comunicaciones de Microsoft 1 Actualizaciones Es importante tener siempre actualizado el navegador, sea cual sea la versión que se emplee, por lo que conviene

Más detalles

Guía de inicio rápido: Cómo crear su propia tienda online

Guía de inicio rápido: Cómo crear su propia tienda online Guía de inicio rápido: Cómo crear su propia tienda online Desea montar su propia tienda online? Ahora es más fácil que nunca. Siga los pasos de esta guía de inicio rápido y empiece a vender! Tenga preparado

Más detalles

Creación de páginas Web FrontPage

Creación de páginas Web FrontPage Creación de páginas Web FrontPage 1.- Introducción Las páginas web están basadas en lo que se llama el hipertexto. En el hipertexto no hace falta seguir el documento de forma lineal, sino que se establecen

Más detalles

Virtual-C: Una Herramienta para Administración de Contenidos en Sitios Web

Virtual-C: Una Herramienta para Administración de Contenidos en Sitios Web Virtual-C: Una Herramienta para Administración de Contenidos en Sitios Web Kexy Rodríguez kexy.rodriguez@utp.ac.pa Centro de Investigación, Postgrado y Extensión UTPVirtual Universidad Tecnológica de Panamá

Más detalles

INSTITUTO POLITÉCNICO NACIONAL ESCUELA SUPERIOR DE MEDICINA Academia de Informática Médica Laboratorio de Informática Médica Internet Explorer

INSTITUTO POLITÉCNICO NACIONAL ESCUELA SUPERIOR DE MEDICINA Academia de Informática Médica Laboratorio de Informática Médica Internet Explorer Introducción INSTITUTO POLITÉCNICO NACIONAL ESCUELA SUPERIOR DE MEDICINA Academia de Informática Médica Laboratorio de Informática Médica Internet Explorer Internet Explorer es el navegador Web de Microsoft

Más detalles

Mejora tu sitio web. Rafael Sebastián Aguilar. Curso de extensión universitaria Campus de Burjasot Universidad de Valencia Febrero 2014

Mejora tu sitio web. Rafael Sebastián Aguilar. Curso de extensión universitaria Campus de Burjasot Universidad de Valencia Febrero 2014 Mejora tu sitio web Rafael Sebastián Aguilar Curso de extensión universitaria Campus de Burjasot Universidad de Valencia Febrero 2014 Mejora tu sitio web R. Sebastian Universitat de Valencia - Febrero

Más detalles

Registra tu dominio y crea tu identidad!

Registra tu dominio y crea tu identidad! Registra tu dominio y crea tu identidad! Gratis con cada dominio: espacio web ilimitado, 3 emails de 2 GB y mucho más. OFERTA DEL MES POR S/. 250 TU DOMINIO SOLO PARA COMPRAS ONLINE Características DominioPro

Más detalles

Pavel Kasík, Technet.cz

Pavel Kasík, Technet.cz Imagina que quieres crear tu propio sitio web. Normalmente, tendrías que descargar el software, instalarlo y comenzar a programar. Con Webnode no es necesario instalar nada. Puedes crear tu página web

Más detalles

Cómo crear, compartir y modificar un formulario

Cómo crear, compartir y modificar un formulario Cómo crear, compartir y modificar un formulario Los formularios de Google Docs son una herramienta útil que te permite planificar eventos, enviar una encuesta, hacer preguntas a tus estudiantes o recopilar

Más detalles

EDICION DE PRESENTACIONES CON POWERPOINT 2007

EDICION DE PRESENTACIONES CON POWERPOINT 2007 EDICION DE PRESENTACIONES CON POWERPOINT 2007 1. Qué es POWERPOINT? Microsoft Office PowerPoint 2007 es una aplicación que permite la creación de presentaciones gráficas, al estilo de diapositivas que

Más detalles

MANUAL DE USUARIO. Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es

MANUAL DE USUARIO. Versión: 1.0.0. Desarrollado por AloOnline Alojamiento Web. http://www.aloonline.es. soporte@aloonline.es MANUAL DE USUARIO Versión: 1.0.0 Desarrollado por AloOnline Alojamiento Web http://www.aloonline.es soporte@aloonline.es 1 ÍNDICE 1. ACCEDER AL PANEL DE PRESTASHOP. 3 2. ADMINISTRAR CATEGORÍAS: 4 2.1.Crear

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

MANUAL PARA EL USO DE WIX

MANUAL PARA EL USO DE WIX MANUAL PARA EL USO DE WIX CREA TU PROPIO SITIO WEB CON FACILIDAD ALEX PENSO ROMERO Qué es Wix y de que nos sirve? Wix es un editor online que permite crear y publicar un sitio web en flash indexado en

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

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

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

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

Tutorial de Dreamweaver MX 2004

Tutorial de Dreamweaver MX 2004 1 Tutorial de Dreamweaver MX 2004 Dreamweaver MX 2004 es una aplicación para el diseño de espacios web que incorpora múltiples posibilidades de edición. 1. Configurar un sitio local El método más común

Más detalles

Índice. Introducción CMS CAMALEONS Presentación de plataforma Opciones. Configuración de la web Página de Inicio Barra Lateral Widgets

Índice. Introducción CMS CAMALEONS Presentación de plataforma Opciones. Configuración de la web Página de Inicio Barra Lateral Widgets Índice Introducción CMS CAMALEONS Presentación de plataforma Opciones Configuración de la web Página de Inicio Barra Lateral Widgets Cómo crear y administrar páginas Gestión de Módulos Gestión de usuarios

Más detalles

Manual básico de administración de Joomla

Manual básico de administración de Joomla Manual básico de administración de Joomla INDICE ADMINISTRACIÓN DEL SITIO Ingresando al administrador Editar algún documento ya creado Crear documento nuevo Administrar menú Editar enlace existente Crear

Más detalles

Qué necesito saber para tener mi sitio web en Internet?

Qué necesito saber para tener mi sitio web en Internet? Qué necesito saber para tener mi sitio web en Internet? Introducción Antes es importante tener en cuenta que Es importante considerar lo siguiente: Definir claramente tu actividad en Internet Establecer

Más detalles

El editor de presentaciones: Impress

El editor de presentaciones: Impress BIBLIOTECA UNIVERSITARIA El editor de presentaciones: Impress Material formativo Reconocimiento NoComercial-CompartirIgual (By-ns-sa): No se permite un uso comercial de la obra original ni de las posibles

Más detalles

Guía del usuario. Guía del usuario - Wordpress

Guía del usuario. Guía del usuario - Wordpress Guía del usuario Guía del usuario - Wordpress 1. Qué es Wordpress? Pag.3 1. 1 Cómo acceder al Escritorio Wordpress? Pag.4 1. 2 Elementos destacables del Panel de Control Pag.5 1. 3 Secciones del Escritorio

Más detalles

TRABAJANDO CON NUESTRO BLOG DE AULA

TRABAJANDO CON NUESTRO BLOG DE AULA TRABAJANDO CON NUESTRO BLOG DE AULA Tutorial sobre cómo crear un Blog de Aula mediante la plataforma Blogger Curso 2012/13 Daniel Mantilla Fernández Tutorial 1. Crear una cuenta de correo en Gmail Para

Más detalles

Guía #5: Gestión de plantillas, componentes, módulos y plug-ins

Guía #5: Gestión de plantillas, componentes, módulos y plug-ins UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN CICLO: 02/2012 GUIA DE LABORATORIO #5 Nombre de la Práctica: Gestión de plantillas, plug-ins y módulos Lugar de Ejecución:

Más detalles

INDICE PASO 1: REGISTRO DE DATOS PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS...

INDICE PASO 1: REGISTRO DE DATOS PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS... MANUAL GOOGLE SITE Google Sites INDICE INTRODUCCIÓN PASO 1: REGISTRO DE DATOS...5 PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS.....18 PASO 5: CONFIGURANDO

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

Web Mastering y Design

Web Mastering y Design Web Mastering y INTRODUCCIÓN Propósito de este documento El presente documento contiene el programa del curso online de Web Mastering y. OBJETIVOS Y MÉTODO DE USO Y EVALUACIÓN Objetivo y métodos de uso

Más detalles

HTML & Fila Zilla. Temario:

HTML & Fila Zilla. Temario: HTML & Fila Zilla Conocer la estructura de tus páginas te permite tener un control total sobre estas, sin mencionar, que también te permite modificar la apariencia de tus sitios con CSS y mejorar tu presencia

Más detalles

Por Jennifer Islas. Manual de uso para Intranet

Por Jennifer Islas. Manual de uso para Intranet Por Jennifer Islas Manual de uso para Intranet Presentación El siguiente manual se ha hecho con la finalidad de que los miembros del laboratorio de átomos fríos se sirvan de una ayuda para poder gestionar

Más detalles

Introducción al programa EasyPHP.

Introducción al programa EasyPHP. Introducción al programa EasyPHP. EasyPHP es un paquete fácil de instalar y configurar cuya misión es instalar Apache, MySQL, Php y PhpMyAdmin en una máquina que disponga del S.O. Windows 9x, 2k y XP.

Más detalles

Arsys Backup Online Manual de Usuario

Arsys Backup Online Manual de Usuario Arsys Backup Online Manual de Usuario 1 Contenido 1. Instalación del Programa Cliente... 3 Pasos previos... 3 Instalación... 3 Configuración del acceso... 6 Ubicación del servidor de seguridad... 6 Datos

Más detalles

Gestión de Extensiones en Joomla!

Gestión de Extensiones en Joomla! Gestión de Extensiones en Joomla! Aplicaciones web. 2º SMR 1. Tipos de extensiones en Joomla 2. Crear un canal electrónico RSS 3. Inserción de anuncios (Banners) en nuestro sitio 4. Crear un foro con el

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

Crear presentaciones con PREZI

Crear presentaciones con PREZI 2012 Crear presentaciones con PREZI Manual de creación y manejo de la HERRAMIENTA WEB 2.0 PREZI. JAVIER FERNÁNDEZ ÁLVAREZ www.masqueunlapiz.com Crear una presentación con PREZI PREZI es una herramienta

Más detalles

INTRODUCCIÓN AL WEB. Pag. 1 de 10

INTRODUCCIÓN AL WEB. Pag. 1 de 10 INTRODUCCIÓN AL WEB La World Wide Web o simplemente WWW o Web es uno de los métodos más importantes de comunicación que existe en Internet. Consiste en un sistema de información basado en Hipertexto (texto

Más detalles

Manual de uso www.mayoresudp.net

Manual de uso www.mayoresudp.net Confinanciado por: Proyecto realizado por: Indice de contenidos 1. Qué es la página Web de mi asociación?......... Pág. 1 2. Cómo accedo a ella?.... Pág. 1 3. Qué ofrece al usuari@?...... Pág. 5 4. Características

Más detalles

http://www.fileden.com/) Fileden. usuario y contraseña para accesar a tu cuenta. entra con tus datos

http://www.fileden.com/) Fileden. usuario y contraseña para accesar a tu cuenta. entra con tus datos Copia Subir de un la siguiente archivo a dirección una Web electrónica a través del en servicio la barra de de alojamiento direcciones Web (http://www.fileden.com/ http://www.fileden.com/) Fileden. capacidad

Más detalles

PRIMEROS PASOS EN WINDOWS

PRIMEROS PASOS EN WINDOWS 1. EL ESCRITORIO PRIMEROS PASOS EN WINDOWS En Windows el escritorio está prácticamente vacío al principio para que seamos nosotros los que decidamos qué queremos situar en él. De hecho sólo nos encontramos

Más detalles

Posicionamiento en buscadores y Diseño de páginas Web PRODUCTOS Y SERVICIOS. www.podioweb.com

Posicionamiento en buscadores y Diseño de páginas Web PRODUCTOS Y SERVICIOS. www.podioweb.com Posicionamiento en buscadores y Diseño de páginas Web PRODUCTOS Y SERVICIOS www.podioweb.com INDICE 1. DISEÑO WEB 2. POSICIONAMIENTO EN BUSCADORES 3. PUBLICIDAD EN INTERNET PPC 4. SERVICIOS ADICIONALES

Más detalles

Tema 1. Gestión de correo y agenda electrónica

Tema 1. Gestión de correo y agenda electrónica Tema 1 Gestión de correo y agenda electrónica 1 Índice Gestión de correo y agenda electrónica 1. El correo electrónico o e-mail 2. Microsoft Outlook 2007 3. Correo electrónico y configuración 3.1. Carpeta

Más detalles

Primeros pasos Instalación y puesta a punto

Primeros pasos Instalación y puesta a punto Primeros pasos Instalación y puesta a punto Eliot / Guía del usuario 2 Introducción Bienvenido a la guía de instalación de Eliot. Este manual explica cómo poner en marcha una instalación o un nuevo puesto

Más detalles

Visión general. Buscar en tu equipo Mejorado! Resultados útiles

Visión general. Buscar en tu equipo Mejorado! Resultados útiles Visión general Google Desktop logra que la búsqueda en tu equipo sea tan fácil como buscar en la web con Google. Se trata de una aplicación de búsqueda en el escritorio que permite encontrar texto en mensajes

Más detalles

DISEÑO FLASH DE RECURSOS MULTIMEDIA PARA LA ENSEÑANZA

DISEÑO FLASH DE RECURSOS MULTIMEDIA PARA LA ENSEÑANZA Edición 2005 Guía del alumn@ DISEÑO FLASH DE RECURSOS MULTIMEDIA PARA LA ENSEÑANZA MATERIALES PARA LA FORMACIÓN A DISTANCIA DEL PROFESORADO Autor: Fernando Posada Prieto Guía del alumn@ Contenidos 1. Objetivos

Más detalles

Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web

Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web Por qué utilizar sitios web en educación? Los sitios web integran recursos variados, lo que los hace muy útiles en el

Más detalles

COMO HACER UN SERVIDOR LOCAL

COMO HACER UN SERVIDOR LOCAL DISEÑO PÁGINAS WEB COMO HACER UN SERVIDOR LOCAL 1 2 DISEÑO PÁGINAS WEB Index 1. INSTALACION DE WAMP 2. CREAR UNA BASE DE DATOS 3. INSTALACION DE JOOMLA 4. COMO HACER UNA COPIA DE SEGURIDAD 5. COMO COPIAR

Más detalles

Tutorial de como crear un curso en Milaulas.com basado en Moodle

Tutorial de como crear un curso en Milaulas.com basado en Moodle Tutorial de como crear un curso en Milaulas.com basado en Moodle 1. Mil aulas.com Mil Aulas es una Plataforma Educativa Virtual que nos permite llevar a cabo un sistema de gestión de cursos. De distribución

Más detalles

Manual del Estudiante

Manual del Estudiante Manual del Estudiante EST http://estvirtual.iese.edu.ar Cabildo 15 -(C1426AAA) Ciudad Autónoma de Buenos Aires Tel: ( 54-11) 4779-3356 Plataforma de e-learning Learning Management System Manual del estudiante

Más detalles

DESARROLLA TU BLOG O PÁGINA

DESARROLLA TU BLOG O PÁGINA 1 DESARROLLA TU BLOG O PÁGINA WEB CON WORDPRESS Introducción a los sistema de gestión de contenidos. Instalación de Wordpress PROGRAMA DEL TALLER Introducción a los sistemas de gestión de contenidos. Instalación

Más detalles

Administración de archivos y carpetas

Administración de archivos y carpetas Administración de archivos y carpetas Los archivos son algunos de los recursos más importantes que utilizará en Microsoft Windows 8. Cada documento, imagen o sonido con el que trabaja es un archivo. Los

Más detalles

PRÁCTICA 10. Configuración de Correo y Publicar en la Web

PRÁCTICA 10. Configuración de Correo y Publicar en la Web PRÁCTICA 10. Configuración de Correo y Publicar en la Web INFORMÁTICA BÁSICA Publicidad y Relaciones Públicas y Periodismo. Curso 2006/2007 1. Configuración del correo Gestores de correo en la máquina

Más detalles

Instrucciones de uso del panel de control de igluk (cpanel)

Instrucciones de uso del panel de control de igluk (cpanel) Instrucciones de uso del panel de control de igluk (cpanel) Este breve manual describe la utilización del panel de control de usuario y sus distintas posibilidades a través de una explicación de los menús

Más detalles

ÍNDICE. POSTEANDO EN JOINCUBE o Como actuar sobre un post o Tus últimas activ.idades... 12 o Privacidad de tus post... 13 NOTIFICACIONES...

ÍNDICE. POSTEANDO EN JOINCUBE o Como actuar sobre un post o Tus últimas activ.idades... 12 o Privacidad de tus post... 13 NOTIFICACIONES... MANUAL DEL USUARIO ÍNDICE CONOCIENDO JOINCUBE o Qué es Joincube? o Ingresando a Joincube por primera vez o Como empezar a usar la plataforma... 4 o Primeros pasos o Próximos pasos o Sector derecho de tu

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

BÚSQUEDA, SELECCIÓN Y GESTIÓN DE RECURSOS ON LINE

BÚSQUEDA, SELECCIÓN Y GESTIÓN DE RECURSOS ON LINE Taller: BÚSQUEDA, SELECCIÓN Y GESTIÓN DE RECURSOS ON LINE Cómo buscar información en Internet? Como ya muchos sabemos en Internet se encuentran datos que alguien subió desde un libro, una noticia o de

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 de administración Web Site

Manual de administración Web Site Manual de administración Web Site Índice Administración Web Site 1. Introducción...4 2. Acceso al panel de administración...5 3. El menú principal...6 4. Listado de entradas...7 5. Opciones del menú principal...8

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

E 4.3.1 Manual para administradores. Versión: 0.2 Fecha: 19/07/11 Autor: Antoni Bertran Bellido Email: abertran@opentrends.net

E 4.3.1 Manual para administradores. Versión: 0.2 Fecha: 19/07/11 Autor: Antoni Bertran Bellido Email: abertran@opentrends.net E 4.3.1 Manual para administradores Versión: 0.2 Fecha: 19/07/11 Autor: Antoni Bertran Bellido Email: abertran@opentrends.net Historial de cambios Versión Fecha Autor Cambios 0.1 15/12/2012 Antoni Bertran

Más detalles

Qué es Blogger? Qué hay que hacer para tener una cuenta Blogger?

Qué es Blogger? Qué hay que hacer para tener una cuenta Blogger? Qué es Blogger? Blogger es un servicio creado por Pyra Labs y posteriormente adquirida por Google para crear y publicar una bitácora (blog) en línea. El usuario no tiene que escribir ningún código o instalar

Más detalles

Manual de uso Te Destaco Índice

Manual de uso Te Destaco Índice Manual de uso Te Destaco Índice 1. Introducción: a. Qué es Te Destaco? b. A quién va dirigido? c. Funcionamiento 2. Beneficios 3. Conceptos clave 4. Consejos para aprovechar Te Destaco 5. Configuració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

Administración de portales Joomla antonio.duran.terres@gmail.com

Administración de portales Joomla antonio.duran.terres@gmail.com Administración de portales Joomla antonio.duran.terres@gmail.com Gestores de Contenidos (CMS) Sistema de Gestión de Contenidos o Content Managment System (CMS) Aplicación informática para crear, editar,

Más detalles

Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS

Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Versión 2.0 3/05/2010 Manual de Gestión de correo electrónico y SMS (v 2.0) 1 GESTOR DE CORREO ELECTRÓNICO

Más detalles

CESDE ESCUELA DE PROCESOS TECNOLOGICOS E INDUSTRIALES AMBIENTES COLABORATIVOS WORDPRESS

CESDE ESCUELA DE PROCESOS TECNOLOGICOS E INDUSTRIALES AMBIENTES COLABORATIVOS WORDPRESS WORDPRESS Es un sistema de gestión de contenido CMS (siglas en del inglés de Content Management System) enfocado a la creación de blogs o bitácoras digitales para web. Es como un cuaderno donde se puede

Más detalles