Guía para creación de temas para editor de EditandSend

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

Download "Guía para creación de temas para editor de EditandSend"

Transcripción

1 Guía para creación de temas para editor de EditandSend En este documento se describen las acciones que debe realizar el diseñador/maquetador para personalizar un tema y poder ser utilizado en el EDIT. Los tema compatibles con EDIT podrán utilizar las funcionalidades de drag&drop, copia de módulos y edición de contenidos que permite Edit&Send. La forma más sencilla para personalizar tu primer tema, es utilizar el que ofrecemos de ejemplo y añadir allí tu CSS e imágenes personalizadas. Estructura general La maquetación del tema se realiza mediante código HTML. Cada tema estará formado por un fichero theme.html, donde se definirá el código. Las imágenes utilizadas se deberán almacenar dentro de un único subdirectorio que deberá llamarse images. Cabecera Es recomendable revisar una plantilla de ejemplo para poder comprobar cuál es la estructura general a nivel de organización de cabecera, tags de meta y estilos. En los ejemplos vemos: Declaración de title <title>* MC:SUBJECT *</title> Declaración de meta s <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi"/> Los metas definidos en el ejemplo, son los recomendados, se pueden modificar acorde a las necesidades específicas. Declaración de estilos Primer bloque style con los atributos deseados para maximizar la compatibilidad con los diferentes dispositivos. Segundo bloque style, con las mediaqueries necesarias para obtener un tema responsive. No es necesario utilizar los bloques de style de los ejemplos, se puede definir de forma personalizada, siempre y cuando el resultado sea responsive.

2 Es importante que la definición de las mediaqueries se haga en utilizando un formato como el siguiente, donde la clase se declara utilizando [class=.. ]: table[class="flexiblefull"] {width:100%!important; clear:both;} Cuerpo Para poder utilizar un tema en el editor, éste debe tener una estructura concreta. Se utiliza un sistema de tags especiales, que permiten definir el comportamiento e integración de cada apartado en el editor. Todos los tags de estilo utilizados tienen el prefijo dad. Hay diferentes tipos de tags: Tags de bloque El editor actualmente soporta 11 tipos diferentes de bloques: Par ello, es necesario que cada theme incluya un bloque indicando que código corresponde a cada bloque. Cada bloque estará contenido dentro de la siguiente estructura, a nivel raíz dentro del body: <div class="dad-module-wrap"> Por defecto, al abrir el tema, se mostrarán en el editor todos los bloques definidos en el HTML. Si se desea ocultar un bloque, para que se muestre únicamente cuando el usuario lo añada, se debe añadir el siguiente atributo: <div class="dad-module-wrap" data-hide="1">

3 El siguiente tag será una tabla, donde se especificarán los detalles utilizando los siguientes tags: data-module Indica el tipo de módulo entre los 11 listados anteriormente. Los valores pueden ser los siguientes: header topgraphic onlyfulltext cols3text gallery fulbgrighttext fulbgtextbutton rightcontent leftcontent blognews footer En los ejemplos veremos bloques como col2textimage o copyrigth. Los bloques que tengan un nombre NO definido en el listado anterior, no podrán ser añadidos mediante el menú, pero si podrán ser utilizados y clonados. dad-color-background1 Define que el color de fondo utilizado corresponderá al Color de fondo 1, modificable mediante el editor. Los campos de color, deben estar siempre acompañados del estilo dad-module-color y pueden ser: dad-color-theme1 dad-color-theme2 dad-color-background1 dad-color-background2 dad-color-header dad-color-subject dad-color-description

4 <div class="dad-module-wrap"> <table data-module="header" class="dad-module-color dad-color-background1" cellpadding="0" style="background:#fff;" cellspacing="0" align="center" border="0" width="100%"> Vemos también que los estilos deberán definirse inline para maximizar la compatibilidad con los diferentes dispositivos. Sub módulos Se pueden incluir bloques dentro de los módulos, llamados sub módulos. Los sub módulos disponibles son los siguientes: header Texto de cabecera, al definir el sub módulo, este podrá ocultarse o mostrarse en las opciones del bloque del editor. image Imagen, al definir el sub módulo, este podrá ocultarse o mostrarse en las opciones del bloque del editor. rows Utilizado en los módulos de gallery y fulbgrighttext, permite especificar cada fila, para permitir modificar el número mediante el editor. Cada row dentro del sub módulo deberá identificarse mediante el estilo dad-row. <td data-submodule="rows"> <div class="dad-row" style="clear:both; display:block;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> imagetext Texto de imagen, al definir el sub módulo, este podrá ocultarse o mostrarse en las opciones del bloque del editor. button Botón, podrá definir si desea ocultarse o mostrarse, color de borde y alineación.

5 Imágenes Para definir una imagen se deberá especificar el tag data-custom-image, con el nombre de la etiqueta a mostrar en la herramienta de edición. El campo style podrá tener la información de max-width, min-width, max-height y min-height, que se le mostrará al usuario cuando esté editando la imagen. <img src="images/img-icon1.png" border="0" class="flexibleimage" datacustom-image="image Left" alt="image Left" style="max-width:170px; min-width:80px;"> Imágenes de fondo El atributo data-custom-background permite definir la imagen de fondo como personalizable. El texto asignado al campo, se mostrará como nombre del campo en el editor. Es necesario especificar en el style, el valor inicial de la imagen. <table data-custom-background="image bg" style="background:url(images/cc-pattern-transparent.png);" cellpadding="0" cellspacing="0" border="0" width="100%"> Texto editable Para definir que el texto de un bloque es editable, utilizamos el estilo dad-editable. <div class="dad-editable" style="text-align: center;"> <span style="font-size: 22px; display:block; color: #666; position: relative;" class="dad-color-description">you Will Save Time and Effort!</span> </div> Espaciador Para añadir un espacio entre elementos, se utiliza el elemento spacer: <tr> </tr> <td class="dad-spacer" height="30" width="100%"></td> El valor de height deberá ser igual en todos los elementos y podrá ser personalizado mediante el deslizador del editor.

6 Redes sociales El tag dad-social, permite mostrar un nuevo icono de personalización en el editor, donde definir los enlaces a las redes sociales. El uso del campo dad-social implica que se deberán incluir tantos campos a como redes sociales soportar, para que el usuario pueda personalizar los datos. Es importante que para cada a se defina un title. <td class="dad-social" align="left" width="100%"> <table cellpadding="2" cellspacing="0" border="0"> <tr> <td align="center" height="30" width="30"> <a title="facebook" href="#"><img src="images/icon-facebook.png" alt="" width="24" height="24" border="0"/></a> </td> <td align="center" height="30" width="30"> <a title="twitter" href="#"><img src="images/icon-twitter.png" alt="" width="24" height="24" border="0"/></a></td> Enlace ver online Se puede incluir el valor #dad-view-online en el campo href, para que este sea substituido por la URL donde se pueda ver la newsletter online.

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

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

Más detalles

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre

Más detalles

Wenceslao Zavala. www.producciondigitalup.com.ar

Wenceslao Zavala. www.producciondigitalup.com.ar Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:

Más detalles

Manual de v2cms v2cms v1.01

Manual de v2cms v2cms v1.01 Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una

Más detalles

CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB

CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER

Más detalles

MANUAL TECNICO DE EMAILING BIZBOX

MANUAL TECNICO DE EMAILING BIZBOX MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos

Más detalles

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar

Más detalles

Herramientas para crear páginas.

Herramientas para crear páginas. Herramientas para crear páginas. Herramientas para la creación de páginas Web. Como hemos visto resulta sencillo pero engorroso escribir directamente en HTML. Por ello es más sencillo utilizar un editor

Más detalles

GUÍA HTML EMAIL RES PONSIVE

GUÍA HTML EMAIL RES PONSIVE GUÍA HTML EMAIL RES PONSIVE Campañas impactantes en todos los dispositivos Ya lo expuso Darwin con su teoría de la evolución: solo aquellos seres vivos que se adapten a su entorno podrán sobrevivir. Y

Más detalles

Para instalar la radio en la PC sólo se tiene que seguir estos paso.

Para instalar la radio en la PC sólo se tiene que seguir estos paso. Inicio de servicio: 3 de Marzo del 2008 Para instalar la radio en la PC sólo se tiene que seguir estos paso. 1.- Bajar estos dos programas e instalar en nuestra PC http://www.tuwebhost.com/descargas/1.exe

Más detalles

B1 Print & Delivery Ejemplo Sistema de recordatorio de fechas de vencimiento.

B1 Print & Delivery Ejemplo Sistema de recordatorio de fechas de vencimiento. B1 Print & Delivery Ejemplo Sistema de recordatorio de fechas de vencimiento. Resumen Modulo B1 Print & Delivery Nivel Avanzado Requerimientos B1UP 6.2.0 Escenario En este ejemplo utilizaremos el módulo

Más detalles

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

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

Más detalles

ACTIVIDADES PÁGINAS WEB

ACTIVIDADES PÁGINAS WEB ACTIVIDADES PÁGINAS WEB PRÁCTICA 1: Plantilla Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar rápidamente todas nuestras páginas y ahorrarnos escribir los elementos

Más detalles

Guía para el armado de un HTML

Guía para el armado de un HTML Guía para el armado de un HTML Maquetear una pieza con estándares de usabilidad Utilizar un formato de html clásico: Diseñar con CSS Inline que es un método para insertar el lenguaje de estilo de página

Más detalles

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML

Más detalles

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

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

Más detalles

Temario Dreamweaver CS4

Temario Dreamweaver CS4 Temario Dreamweaver CS4 1 El entorno de trabajo de Dreamweaver CS4 1 Introducción 2 Requisitos del sistema 3 Abrir el programa 4 Cerrar el programa 5 Interfaz de Dreamweaver CS4 6 La barra de Aplicaciones

Más detalles

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes 10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.

Más detalles

Manual de Plantillas para Listados

Manual de Plantillas para Listados 1 Manual de Plantillas para Listados www.sagasoluciones.com info@sagasoluciones.com C/ Salado 11 Local 10. 41010 Sevilla T. + 34 954 45 72 75 F. + 34 954 45 75 72 CONTROL DEL DOCUMENTO Realizado 21/09/2010

Más detalles

[MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL]

[MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL] [MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL] [EDICIÓN DEL INICIO (HOME)] 1 2 3 5 4 1. Cambio Nota del Día Para cambiar la nota del día ubicada en el recuadro

Más detalles

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin

Más detalles

Guía para crear, editar y eliminar páginas. WordPress Grupo Mutual

Guía para crear, editar y eliminar páginas. WordPress Grupo Mutual Guía para crear, editar y eliminar páginas WordPress Grupo Mutual Crear una nueva Página (1) 1. Ingresar a WordPress y acceder al panel de "Páginas": Crear una nueva Página (2) 2. Seleccionar uno de los

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional

Más detalles

56h DREAMWEAVER 8 OBJETIVOS DEL CURSO. ÍNDICE 1 Conociendo Macromedia Dreamweaver. 2 Creación de sitios y páginas Web

56h DREAMWEAVER 8 OBJETIVOS DEL CURSO. ÍNDICE 1 Conociendo Macromedia Dreamweaver. 2 Creación de sitios y páginas Web 56h DREAMWEAVER 8 OBJETIVOS DEL CURSO Dreamweaver es el programa líder en la edición profesional de páginas Web. Es el software más utilizado para la creación y mantenimiento de páginas Web por los principales

Más detalles

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

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

Más detalles

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando

Más detalles

Creación de templates para Knews. Tutorial paso a paso para crear templates de Newsletters para el plug-in Knews de Wordpress

Creación de templates para Knews. Tutorial paso a paso para crear templates de Newsletters para el plug-in Knews de Wordpress Creación de templates para Knews Tutorial paso a paso para crear templates de Newsletters para el plug-in Knews de Wordpress Documento disponible en: English Español Català URL del plug-in, documentación

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página

Más detalles

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

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

Más detalles

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio

Más detalles

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

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales. 1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio

Más detalles

Crear una página Html con el Editor.

Crear una página Html con el Editor. Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles

agenciaisbn.es Manual de uso Herramienta de gestión Enero 2011

agenciaisbn.es Manual de uso Herramienta de gestión Enero 2011 agenciaisbn.es Manual de uso Herramienta de gestión Enero 20 Web pública Mapa web 3 Secciones editables 3 Inicio 3 Noticias 4 Formularios 4 Herramienta de gestión Acceso 5 Inicio Barra de herramientas

Más detalles

MÓDULO 1: FrontPage 2003 Parte 1ª

MÓDULO 1: FrontPage 2003 Parte 1ª MÓDULO 1: FrontPage 2003 Parte 1ª TEMA 1. Introducción a la Web Internet y el World Wide Web Hipertexto HTML Servidores, Clientes y Redes Protocolos de Comunicación Direcciones, Dominios y Accesos TEMA

Más detalles

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

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver

Más detalles

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ Abril 2005 Jordi Llonch jordi@laigu.net Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ http://creativecommons.org/licenses/by-sa/2.0/ 2 Conceptos básicos World Wide

Más detalles

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

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

Más detalles

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

Manual de uso del Taglib de Template Saga

Manual de uso del Taglib de Template Saga 1 Manual de uso del Taglib de Template Saga www.sagasoluciones.com info@sagasoluciones.com C/ Salado 11 Local 10. 41010 Sevilla T. + 34 954 45 72 75 F. + 34 954 45 75 72 CONTROL DEL DOCUMENTO Realizado

Más detalles

AS237 - Dreamweaver CS5

AS237 - Dreamweaver CS5 AS237 - Dreamweaver CS5 Características Modalidad: Online Horas: 56 Objetivos Dreamweaver es el programa líder en la edición profesional de páginas Web. Es el software más utilizado para la creación y

Más detalles

Apuntes básicos de HTML I.E.S. Pintor José María Fernández

Apuntes básicos de HTML I.E.S. Pintor José María Fernández Manual Básico de HTML Este manual lo he realizado con la intención de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creación de páginas

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí. Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la

Más detalles

MAQUETAR. 18 de Octubre de 2012. Wenceslao Zavala http://producciondigitalup.com.ar

MAQUETAR. 18 de Octubre de 2012. Wenceslao Zavala http://producciondigitalup.com.ar MAQUETAR ESTRATEGIAS DE MAQUETADO CSS Páginas Diseño Líquido o Fluído Son las que siguen el comportamiento natural del navegador. Ventajas: No se diseña para una resolución en particular Se evitan espacios

Más detalles

Prácticas H T M L U.A.C.M COMPUTACIÓN II

Prácticas H T M L U.A.C.M COMPUTACIÓN II Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos

Más detalles

CIRCUITO CERRADO DE TELEVISIÓN Y SEGURIDAD ELECTRÓNICA

CIRCUITO CERRADO DE TELEVISIÓN Y SEGURIDAD ELECTRÓNICA TÍTULOS 1. Instalación de alarma de seguridad basada en el módulo EZ WEB LYNX. 2. Instalación de alarma de proximidad disparada por cámara basada en el módulo EZ WEB LYNX. NIVEL EDUCATIVO del ciclo formativo

Más detalles

Gestión de plantillas en Joomla!

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

Más detalles

Diseño de Páginas Web 2011

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

Más detalles

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto

Más detalles

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

Personalizar Dolibarr Guía Rapida

Personalizar Dolibarr Guía Rapida Personalizar Dolibarr Guía Rapida Índice de contenido Empezando...3 La post-instalación...3 Algo más...4 Modificar el Favicon...6 Con más estilo...7 Agradecimento...8 Empezando Si bien la instalación de

Más detalles

El editor incluye los siguientes componentes:

El editor incluye los siguientes componentes: El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante contribución. Ofrece numerosas

Más detalles

Práctica 4: Edición de contenidos web

Práctica 4: Edición de contenidos web Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la práctica En esta práctica se pretende realizar una introducción a

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 1: HTML 1. Objetivos Aprender el lenguaje de marcado HTML, o algunas de sus variantes, como XHTML o HTML5, y la importancia de escribir código correcto

Más detalles

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor.

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor. Curso de creación de documentos Web Servicio de Comunicaciones Uso del Netscape Composer para la creación de documentos HTML 1.- Creación de un documento. El Netscape Communicator incluye un programa,

Más detalles

TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar

Más detalles

HTML INDICE: 1 Internet 2 Conceptos básicos 3 Estructura de un documento HTML 4 Dar formato a un documento 5 Listas 6 Imágenes

HTML INDICE: 1 Internet 2 Conceptos básicos 3 Estructura de un documento HTML 4 Dar formato a un documento 5 Listas 6 Imágenes HTML INDICE: 1 Internet 1.1 Qué es Internet 1.2 Los comienzos de Internet 1.3 Aplicaciones que nos ofrece Internet 1.4 Qué es WWW 1.5 Servicios que nos ofrece WWW 1.6 Cuestionario: Internet 2 Conceptos

Más detalles

Manual Sistema de Afiliados Lomas Travel

Manual Sistema de Afiliados Lomas Travel Manual Sistema de Afiliados Lomas Travel Contenido Registro de Afiliados... 3 Administración de su cuenta... 7 Ingresar... 7 Uso del Administrador... 8 Configuración de Plantilla... 9 1.-Opción de subir

Más detalles

Responsive Web Design

Responsive Web Design Responsive Web Design Diseño flexible para PC, celulares y tabletas (y relojes, televisores, heladeras, etc ) Hernán Beati @hernan_beati hernan@saberweb.com.ar Hernán Beati Diseñador gráfico (+19 años)

Más detalles

Plantilla de texto plano

Plantilla de texto plano Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en

Más detalles

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

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

Más detalles

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

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Modalidad: Distancia, On-Line Duración: 154 horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos

Más detalles

UNED - Página Web del Centro Asociado de Madrid

UNED - Página Web del Centro Asociado de Madrid www.circuloweb.es UNED - Página Web del Centro Asociado de Madrid La página web del Centro Asociado de Madrid es un Gestor de Contenidos desarrollado con WordPress. Sobre el uso y manejo de wordpress existe

Más detalles

Sistema CRM 2.0 (Administración)

Sistema CRM 2.0 (Administración) Sistema CRM 2.0 (Administración) 4.1 Crear Usuario Para crear un nuevo usuario presione en el siguiente botón. CREAR USUARIO Ingrese los datos que le indica la siguiente pantalla: Dirección de Correo electrónico:

Más detalles

Documentación de Usuario SEO EXPERT

Documentación de Usuario SEO EXPERT Documentación de Usuario SEO EXPERT SEO EXPERT es un completo módulo que te ayuda a optimizar eficazmente el SEO natural de tu tienda en los principiales buscadores y en las redes sociales. Este módulo

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

Más detalles

Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador.

Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador. HTML Etiquetas Básicas y de Estructura de páginas Web, Manejo de Texto y diseño de Páginas. Objetivo: Hacer prácticos los conocimientos adquiridos en la clase teórica. Investigar más etiquetas para el

Más detalles

Curso.NET con C# Modulo 2 / Página 1. Servicio de Informática

Curso.NET con C# Modulo 2 / Página 1. Servicio de Informática SKINS Y THEMES... 2 Aplicando Estilos a Controles HTML... 2 Aplicando Estilos a Controles Web de Servidor... 3 Usar Temas para Personalizar un Sitio... 3 La carpeta App_Themes... 4 Temas Globales y de

Más detalles

Diseño web. Fundamentos de CSS. Informática 4º ESO

Diseño web. Fundamentos de CSS. Informática 4º ESO Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido

Más detalles

Lenguaje HTML y páginas web. Alex Sánchez

Lenguaje HTML y páginas web. Alex Sánchez Lenguaje HTML y páginas web Alex Sánchez Introducción: La web y las páginas web Componentes de la web Como funciona la web? Como es la comunicación en la web El acceso a la Web suele basarse en un un explorador

Más detalles

Implementación del código JavaScript de Nosto. Tagging de todas las páginas del sitio web. Previsualización del tagging

Implementación del código JavaScript de Nosto. Tagging de todas las páginas del sitio web. Previsualización del tagging Guia de instalación Hola! Soy Romain, su guía para la instalación de Nosto! Veremos como instalar Nosto en 7 sencillos pasos. Vamos a ver todas las consideraciones a tener en cuenta en la instalación de

Más detalles

Manual de uso: Editor Web del CMS

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

Más detalles

Proyecto: Buscador de Películas usando XQuery y exist

Proyecto: Buscador de Películas usando XQuery y exist Buscador de Películas usando XQuery y exist Arquitecturas de Altas Prestaciones Rafael Martos Llavero I. Objetivo del Proyecto. El objetivo del proyecto es la creación de una base de datos basada en XML

Más detalles

Introducción: páginas web y navegadores

Introducción: páginas web y navegadores IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede

Más detalles

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación Contenido curso practico; LENGUAJE

Más detalles

7.1 Estructura Básica de jas Tablas

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

Más detalles

Una guía rápida para. Crear Boletines de Noticias

Una guía rápida para. Crear Boletines de Noticias Una guía rápida para Crear Boletines de Noticias En esta guía Aprende a crear mensajes atractivos, con lenguaje HTML y con texto sin formato para involucrar a tus contactos. Conoce sus preferencias para

Más detalles

WikiGas. WikiGas. Manual de usuario. septiembre de 2010 V.1.5

WikiGas. WikiGas. Manual de usuario. septiembre de 2010 V.1.5 WikiGas Manual de usuario septiembre de 2010 V.1.5 1 Contenido 1 ACCESO WIKIGAS... 3 2 CONSULTA WIKIGAS... 4 3 EDICIÓN WIKIGAS... 5 3.1 CREACIÓN DE UN ARTÍCULO... 5 3.2 EDICIÓN DE TEXTO... 5 3.3 EDICIÓN

Más detalles

Indexhibit 2 Tareas comunes

Indexhibit 2 Tareas comunes Indexhibit 2 Tareas comunes Oscar Ciutat oscarciutat.com/code Cómo entrar en el área de administración de Indexhibit? 1. Ir a www.direccion.com/ndxzstudio/, sustituyendo www.direccion.com por la dirección

Más detalles

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Página Web del curso Pagina del curso www.bbsoftpy.net/cursohtml2013 Repaso Clase Anterior Curso XHTML/HTML/HTML5-2013 Listas Curso XHTML/HTML/HTML5-2013 Listas

Más detalles

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente. PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación

Más detalles

Polldaddy no necesita instalación, ya que es una herramienta Web. Para crear las encuestas es necesario identificarse previamente

Polldaddy no necesita instalación, ya que es una herramienta Web. Para crear las encuestas es necesario identificarse previamente 1 QUÉ ES POLLDADDY? PollDaddy (http://www.polldaddy.com) es una herramienta en línea que permite crear de forma libre y gratuita encuestas y situarlas en tu página web. Para crear tus encuestas es necesario

Más detalles

Nociones basicas de HTML

Nociones basicas de HTML Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador

Más detalles

Introducción al desarrollo web (idesweb) - 3 a ed.

Introducción al desarrollo web (idesweb) - 3 a ed. Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 4: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en

Más detalles

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

IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM RESPONSIVE DESIGN. Bernardo Chenlo IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 RESPONSIVE DESIGN Bernardo Chenlo 2 INTRODUCCIÓN Qué es Responsive Design? Responsive Design El contenido se adapta a la pantalla

Más detalles

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...

Más detalles

Programación de aplicaciones WEB

Programación de aplicaciones WEB Programación de aplicaciones WEB Tecnologías del lado del del cliente 1 Tecnologías del lado del cliente Estructura HTML/XHTML Presentación Hojas de estilo (CSS) Comportamiento JavaScript 2 Introducción

Más detalles

hosting, housing, VPS, dominios, Backup online Gravitynet E-Solutions, S.L.U. C/ Circunde 16, Pol. Ind. La Portalada 26006 Logroño (La Rioja) España

hosting, housing, VPS, dominios, Backup online Gravitynet E-Solutions, S.L.U. C/ Circunde 16, Pol. Ind. La Portalada 26006 Logroño (La Rioja) España hosting, housing, VPS, dominios, Backup online Gravitynet E-Solutions, S.L.U. C/ Circunde 16, Pol. Ind. La Portalada 26006 Logroño (La Rioja) España Tl: 902 012 653 Fax: 941 28 80 99 PASO 1. Bienvenida

Más detalles

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

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

Más detalles

Taller B-Learning. Herramientas y servicios disponibles en la Universidad de Alicante para apoyar procesos de E/A semipresenciales.

Taller B-Learning. Herramientas y servicios disponibles en la Universidad de Alicante para apoyar procesos de E/A semipresenciales. Taller B-Learning Herramientas y servicios disponibles en la Universidad de Alicante para apoyar procesos de E/A semipresenciales. Servicios Innovación Tecnológico-Educativa Servicio de Informática www.ua.es/ite

Más detalles

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web

Tutorial de Wordpress para Editores de Sitios. Autora: Aylín Alvarez Martínez Dpto. Web Tutorial de Wordpress para Editores de Sitios Autora: Aylín Alvarez Martínez Dpto. Web 2011 ÍNDICE Blog -----------------------------------------------------------------------------------------------------------

Más detalles

Una guía rápida para. Crear Autorespuestas

Una guía rápida para. Crear Autorespuestas Una guía rápida para Crear Autorespuestas En esta guía Aprende a establecer tus mensajes de seguimiento en modo automático con las Autorespuetas de GetResponse en las campañas de goteo, mensajes de bienvenida

Más detalles

RESPONSIVE WEB DESIGN en. Drupal PRESENTE Y FUTURO

RESPONSIVE WEB DESIGN en. Drupal PRESENTE Y FUTURO RESPONSIVE WEB DESIGN en Drupal PRESENTE Y FUTURO QUIENES SOMOS Cristina Chumillas @chumillas Pako Garcia @pakmanlh cristina.chumillas@ymbra.com pako.garcia@ymbra.com WE ARE DRUPAL DREAMERS! QUÉ TRATAREMOS?

Más detalles

PROGRAMA: Diseño y desarrollo Web con HTML 5,

PROGRAMA: Diseño y desarrollo Web con HTML 5, PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un

Más detalles

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1 Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación

Más detalles

CURSO DE DREAMWEAVER CS3

CURSO DE DREAMWEAVER CS3 CURSO DE DREAMWEAVER CS3 Aprender a manejar el programa Dreamweaver para diseñar páginas Web. A la finalización del curso, el alumno será capaz de crear sitios Web con páginas que incorporen imágenes,

Más detalles

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por

Más detalles