HTML5. Ejercicio con etiquetas <p>, <br /> y <hr /> Ejecutar el programa BlueGriffon.

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "HTML5. Ejercicio con etiquetas <p>, <br /> y <hr /> Ejecutar el programa BlueGriffon."

Transcripción

1 HTML5 Ejercicio con etiquetas <p>, <br /> y <hr /> Ejecutar el programa BlueGriffon. Antes que nada atenderemos a un problema que se nos podría plantear a futuro, con los caracteres especiales del castellano y valenciano (tilde, diéresis, ç, ñ,, etc): Por cuestiones relacionadas con el tipo de codificación de los documentos y las diferencias que puedan existir con el servidor, se nos puede dar el caso de que observemos que las tildes no se muestran correctamente, como tampoco las eñes y otros caracteres especiales. Los motivos por los que esto sucede son complejos, pero no así la solución, que pasa por indicar en BlueGriffon que reemplace los caracteres especiales por códigos estandarizados en HTML. Esto se consigue seleccionando la opción Herramientas > Preferencias y posteriormente accedemos a la pestaña Documentos. En la parte denominada Mostrar los siguientes caracteres como entidades seleccionaremos la opción Todos los caracteres especiales de HTML 4. En una página nueva copiar y pegar los cuatro párrafos siguientes. Incluir dos veces al menos cada una de las etiquetas <p>, <br /> y <hr /> para acompañar y/o separar los cuatro párrafos siguientes: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim neque sit amet magna tempus mollis. Duis risus arcu, egestas a bibendum eu, rutrum nec orci. Nunc condimentum imperdiet ultricies. Phasellus tincidunt congue arcu, consequat bibendum lacus accumsan quis. Quisque a orci mi, eget placerat magna. Phasellus rutrum porttitor blandit. Quisque vel neque in est hendrerit venenatis. Fusce nisl nisi, ullamcorper ut blandit id, venenatis ac nunc. Sed sed purus elit. Fusce sed enim at mi aliquam tristique vitae sed arcu. Aliquam non justo tortor. Aliquam ac lorem ipsum, sit amet pellentesque sapien. Aenean ut ligula vel metus varius gravida tempor id nunc. Vestibulum tempus, urna vel consectetur consequat, ante lectus commodo odio, luctus varius eros nisl at nunc. Phasellus urna sapien, lobortis ut dictum ac, feugiat non massa. Curabitur nec justo ligula. Donec viverra neque id eros fringilla lobortis. Nulla non quam libero. Sed pulvinar laoreet erat sit amet lobortis. Nulla dolor augue, cursus ac tempor vitae, vestibulum nec nisl. Morbi pulvinar magna cursus dolor pharetra porta. Etiam pharetra neque nec lacus gravida consectetur. Morbi eu neque mauris. Donec magna neque, elementum eget fermentum ut, commodo a leo. Nam urna nunc, cursus eu cursus vel, iaculis at urna. Praesent consectetur augue quis mi venenatis auctor. Curabitur ut purus id diam dapibus congue quis elementum arcu. Sed dui diam, lacinia ac volutpat venenatis, ultrices condimentum dolor. Fusce dictum, tortor et mattis ultricies, erat odio consectetur justo, vel vulputate lectus velit sed dolor. Vestibulum blandit interdum orci sit amet tincidunt. Praesent sed eros augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas fermentum velit ut tellus adipiscing molestie. Proin neque tellus, sodales consequat posuere a, ultrices at sapien. Nunc scelerisque, lectus eget iaculis pharetra, dolor libero egestas massa, non sodales lectus magna a ligula. Pellentesque eu lectus ac mi dictum imperdiet. Proin non est ante. Vestibulum sit amet orci enim, malesuada volutpat orci. Sed gravida rutrum orci ac vehicula. Proin ornare felis in nibh commodo mollis. Quisque vehicula tellus scelerisque quam viverra sollicitudin. Etiam feugiat sapien quis libero aliquet in tempus magna tristique. Suspendisse a lectus metus. Donec vel urna neque. Vivamus lacinia tristique nibh, vitae convallis lorem dignissim nec. Donec nibh arcu, lobortis ac aliquet in, tempus vel metus. Morbi placerat, nibh at malesuada molestie, lorem justo fermentum diam, eu feugiat leo lectus id nisi. Nam fringilla nunc sed leo laoreet at luctus ligula egestas. Aliquam nec faucibus mauris. Nulla consequat consectetur commodo.

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ullamcorper odio, in bibendum lacus ultricies a. Quisque quis mi justo, non dignissim ipsum. Praesent eget lacus nec ligula fermentum eleifend sit amet in massa. Vivamus dictum quam non nisl cursus a bibendum ipsum ornare. In hac habitasse platea dictumst. Etiam sem leo, pulvinar at dignissim a, tempus eget nisl. Suspendisse eget bibendum quam. Ut eu turpis sem, vitae venenatis massa. Nam egestas laoreet felis et feugiat. Curabitur vel sem vel nibh vehicula varius at vel dolor.

3 Ejercicio con etiquetas de estructura Ejecutar el programa BlueGriffon y codificar en una página nueva el siguiente código en HTML. Hacer una modificación para incluir en el título de la página tu nombre y apellido.

4 Ejercicio incluyendo etiquetas en la sección <head> </head> Una vez hayas incluido ese código en la sección de la cabecera, abre la página con tu navegador web para observar el resultado.

5 Ejercicio para incluir etiquetas <meta> En este ejercicio, cuando se refiere al modo wysiwyg del BlueGriffon, se está refirendo al modo de Diseño. Deberás abrir la última página web con la que has estado trabajando, incorporar las siguientes Propiedades de página que se proponen, y observar y analizar el código fuente generado.

6 Etiquetas empleadas comunmente para aplicar formato al texto <strong> y </strong>: para destacar una parte del texto. <em> y </em>: se emplea para enfatizar un texto; habitualmente se representa en cursiva. <i> e </i>: hacen que un texto se muestre en cursiva. <dfn> para definiciones, <code> para bloques de código informático, <samp> para ejemplos, <kbd> para texto de teclado, <var>para definir una variable y <cite> para una cita. Eso es todo lo que tenemos a nuestro alcance para destacar un parte de un texto mediante etiquetas. En versiones antiguas de HTML existían también otras etiquetas muy utilizadas como <b>, <i>,<font>, etc., pero todas ellas han sido abandonadas en las últimas revisiones del lenguaje HTML y ahora para aplicar formato a una web emplearemos exclusivamente estilos, es decir, siempre irá acompañado el formato del texto de la palabra style. Los estilos se pueden aplicar en nuestro sitio web desde tres sitios diferentes: 1. Estilos en un archivo externo: definimos una serie de reglas CSS en un archivo, que enlazaremos desde nuestra página web, en la cabecera de la misma. Este es el método más aconsejado de trabajo y el que emplearemos en el futuro. 2. Estilos en la cabecera de la página web: de nuevo en la cabecera podemos indicar las reglas CSS que necesitemos, afectando de este modo sólo a la página web en cuestión. 3. Estilos en la página web: podemos aplicar estilos dentro de un elemento concreto de la página web, mediante el parámetro style que se puede establecer para cualquier etiqueta, como por ejemplo: <h1 style="color: rgb(200, 20, 20); font-family: Helvetica,Arial,sans-serif;">Qué entendemos por un párrafo</h1> <p style="font-style: italic; color: rgb(20, 20, 200);">Un párrafo de texto se compone de un bloque de texto independiente con una apariencia concreta, delimitado por un espacio superior y otro inferior.</p> Pero, cómo podríamos modificar sólo una frase dentro de un párrafo o una simple palabra? La respuesta la encontramos en el elemento HTML denominado <span>. A continuación, un ejemplo: <h1>qué entendemos por un <span style="color: rgb(0, 153, 0);"> párrafo </span> </h1> En el menú Formato del BlueGriffon encontramos algunas opciones más relacionadas con la aplicación de estilos específicos al texto, tanto los más visuales, situados en la parte superior, como los que le aportan un sentido al contenido, en la mitad del menú. El menú se completa con dos opciones importantísimas orientadas a eliminar estilos en la página y a convertir enlaces en texto normal ambas opción muy útiles si estamos copiando texto desde otro lugar y queremos limpiar ese estilo heredado para aplicar los nuestros propios.

7 La aplicación de estilos con BlueGriffon se convierte en un proceso muy simple gracias al editor de estilos (style). Este panel se despliega haciendo clic en el botón Establecer estilos CSS o en el menú Paneles>Propiedades de estilo.

8 Enlaces externos y enlaces de correo electrónico Incluye en tu página web el siguiente enlace externo: Puedes crear enlaces desde el programa BlueGriffon directamente, tal y como comentamos a continuación: 1. Introduciremos en la página web el texto, o la imagen, que queremos que se convierta en un enlace. 2. Seleccionaremos ese texto, o esa imagen, con el ratón. 3. Haremos clic en el icono Enlace (en forma de cadena). 4. En el cuadro de diálogo que aparece, escribiremos la dirección de la página web o la pegaremos, si la habíamos copiado previamente desde el navegador. 5. Al hacer clic en Aceptar, nuestro enlace estará ya listo. Añade a tu pagina web un enlace a la mía, haciendo uso de esta técnica. Observa el código fuente que BlueGriffon ha generado por ti. Si se ha producido algún error o queremos modificar el enlace, sólo tenemos que hacer doble clic sobre el texto enlazado dentro del editor o seleccionarlo de nuevo y hacer clic en el icono Enlace. Igualmente, para eliminar un enlace y que el texto vuelva a la normalidad, debemos editar el enlace y borrar la URL indicada. No siempre enlazaremos con archivos que se van a mostrar en el ordenador. Podemos utilizar estas técnicas para facilitar recursos a nuestros usuarios, para que se descarguen en su ordenador. Así, si enlazamos con un documento de Word o Writer, un archivo zip comprimido, una presentación en PowerPoint o Impress, etc. el navegador intentará interpretarlo; pero si no lo consigue, hará que el archivo se descargue para que el usuario pueda trabajar con él. Respecto a los enlaces de correo electrónico sólo tiene sentido incluirlos si suponemos que el visitante tiene instalado un programa gestor de correo electrónico de manera que cuando haga clic en el enlace se le abrirá su Outlook, su Thunderbird, etc. Puedes probar con este ejemplo:

9 y hacer clic en el enlace para saber cuál es tu programa gestor de correo electrónico predeterminado, aunque si no tienes configurada en él ninguna cuenta de correo electrónico, no te servirá de nada. Fijate que además de para indicar una dirección de Internet o file://para indicar un archivo local, hay otros indicadores que se emplean para identificar un tipo concreto de URL. El que ahora acabas de utilizar es mailto:// Desde BlueGriffon podrás indicar que el enlace es a una dirección de correo electrónico marcando la casilla adecuada: Modifica el código anterior, con este otro, y observa el resultado cuando lo lances desde tu navegador web:

10 Referencias absolutas y relativas Para entender el siguiente ejercicio que vamos a hacer, primero debes crear en tu carpeta en la que estás trabajando para aprender diseño web, la siguiente estructura de archivos y carpetas: Las carpetas tienen en su interior, imágenes o archivos de páginas web. Los archivosde páginas web que crees apenas te molestes en llenarlos de contenido. Llegados a este punto, necesitaremos realizar varios enlaces desde la página principal (la llamada index.html) hacia otras páginas de nuestro propio sitio web. Y aquí es donde viene la principal diferencia entre crear enlaces a otros sitios web (absolutos) o dentro de un mismo sitio web (relativos). Cuando creamos enlaces entre las páginas web de un mismo sitio web nos interesa generar referencias relativas, es decir, que los enlaces tomarán sentido dependiendo de la página web que se esté visualizando en ese momento. Por ejemplo, si desde la página index.html del ejemplo anterior quiero enlazar con la página presentación.html que se encuentra en la misma carpeta, podría hacerlo de dos maneras: 1. con el método absoluto: <a href = > Accede a la presentación</a> 2. o mediante un sencillo enlace relativo: <a href= presentacion.html >Accede a la presentación</a> Dado que las dos páginas están en la misma carpeta (tanto index.html como presentación.html), sólo necesito indicar su nombre. Prueba que lo anterior es cierto. Hay dos motivos clave por los que debemos crear siempre los enlaces de manera relativa entre las páginas de un mismo sitio web: a) Si utilizamos la URL absoluta, nos obligamos a indicar de antemano la dirección completa del sitio web; algo que quizás no tengamos mientras estamos preparando las páginas y que además nos obligaría a colocar las páginas en Internet para poder probarlas.

11 b) Si en un momento determinado el sitio web cambia de dominio o lo trasladamos a otra parte, todos los enlaces dejarían de funcionar, al hacer referencia al sitio antiguo. Por el contrario, si mantenemos los enlaces como relativos, todo el sitio funcionará sin problema se coloque donde se coloque. Ahora bien, según la página web que se esté visualizando, y hacia la que se refiere el enlace en el que haremos clic, deberemos utilizar una de las tres técnicas siguientes para direccionar el enlace: Si las páginas están en la misma carpeta: indicamos el nombre de los archivos nada más. Si está en una subcarpeta: indicamos la subcarpeta con una / como separador (por ejemplo, documentos/2014/proyecto.html). Si está en una carpeta de nivel superior a la que nos encontramos: utilizamos el.. para retroceder en la estructura (por ejemplo../../propuestas.html nos llevaría a un archivo situado en dos carpetas antes). Hemos de tener en cuenta que también podemos mezclar.. y / para obtener toda la versatilidad necesaria. Por ejemplo (../2013/proyectos). Si al comenzar a probar el sitio web, observamos que algún enlace no funciona o alguna imagen no se muestra, probablemente nos encontremos ante el conocido problema de las referencias relativas o absolutas. Lo que puedes hacer para probar si todos tus enlaces son relativos es copiar la carpeta que contiene el sitio web que estás creando, a otra carpeta de tu disco duro. De no ser todos tus enlaces relativos, los archivos no quedarán referenciados exactamente igual que en la carpeta original y es que cuando observarás que hay imágenes que no se cargan o páginas web a las que no se accede al hacer clic en uno de los enlaces.

12 Enlaces relativos en un editor web El concepto de enlaces relativos y absolutos se observa claramente en un editor web como BlueGriffon. En la figura estamos creando un enlace desde la página principal a otra contenida en la carpeta oferta. La dirección que se aprecia en un primer momento es la absoluta: Como se puede observar, la URL que se genera no comienza por para indicar que es una página web ubicada en Internet, sino por file:// lo que nos indica que es un archivo situado en un equipo local, que es el ordenador en el que estamos haciendo las pruebas. Esa dirección funcionará correctamente en nuestro ordenador; pero si yo pruebo en otro sitio o lo muevo del disco en el que está a otro diferente, dejará de funcionar. Y por supuesto, cuando lleve todo el sitio a Internet, fallarán todos los enlaces. Por ese motivo, activaremos siempre en estos casos la casilla La URL es relativa a la ubicación de la página. Como se puede apreciar en la figura, la dirección cambia totalmente, dejando sólo la información necesaria para que el enlace funcione en cualquier lugar.

13 Destino del enlace Junto a _blank (abrir en pestaña nueva o ventana nueva) y _self (que no se suele emplear porque es el valor predeterminado que indica que se abra en la misma ventana) contamos con _parent y _top, que indican que la página se debe abrir en el marco anterior o en el espacio principal de la página. Se suelen emplear al trabajar con los marcos que se crean con el elemento iframe, que permite mostrar páginas dentro de páginas. Lo trataremos más adelante. Añade a tu página web el siguiente código HTML: de manera que podrás observar que al hacer clic sobre la palabra buscador se abre la pagina de Google en una nueva pestaña. Sustituye el valor del parámetro target por el valor _self y comprueba de nuevo el comportamiento del enlace.

14 Imágenes, sonidos, videos y licencias de uso Antes de empezar a incorporar materiales gráficos y sonoros a nuestras páginas web debemos tener en cuenta la licencia de uso de esos materiales. Esto, que para un uso personal no tiene transcendencia, la tiene desde el momento en que pensamos publicar nuestro trabajo en la Red. Podemos encontrar varias posibilidades, al intentar incorporar un recurso de otras personas: La página o el recurso tiene establecido un copyright (c). Esto indica que la obra no se debería emplear, si no es con el consentimiento expreso del autor. El material cuenta con una licencia abierta del tipo Creative Commons, GPL u otras tantas. En estos casos, de forma general, el material se puede emplear, incorporar, modificar y difundir; pero siempre debemos ceñirnos a lo que se indique en la licencia: si se nos indica aspectos como que debemos citar la autoría o si no podemos hacer modificaciones. En estos casos no tendremos que pedir consentimiento, sólo seguir las pautas indicadas. Este es el tipo de material que debemos emplear. En el material no hay nada indicado o no es posible localizar su fuente. Sería mejor NO emplearlo, ya que podríamos encontrarnos con que su autor nos reclame su reconocimiento de autoría en un futuro. Por tanto, la mejor recomendación para reutilizar contenidos es la de incorporar exclusivamente materiales con licencias abiertas, como Creative Commons. En Internet encontraremos montones de espacios donde localizar recursos que podemos emplear. Si quieres obtener más información de esta licencia (Creative Commons) puedes buscar un video en Internet con el nombre de Sé creativo. Puedes utilizar materiales multimedia obtenidos desde y Entre los diferentes tipos de imágenes de mapa de bits intentaremos emplear el formato.png para imágenes sencillas, rótulos, fondos y otros elementos de diseño, mientras que el formato.jpg se emplea para fotografía e imágenes complejas. El formato.gif también es apropiado para imágenes sencillas, como alternativa a.png. Una imagen que se deba ver a buen tamaño en una página web puede tener una dimensión situada entre los 500 y los 800 píxeles de anchura, y algo similar de alto. Para incluir imágenes en nuestras páginas web lo podemos hacer de una de las siguientes maneras: Hacer referencia a una imagen almacenada en nuestro sitio web para lo cual escribiremos por ejemplo <img src="imagenes/calle.jpg" />. En este caso se muestra una imagen que está contenida en una carpeta llamada imagenes. Es una dirección relativa. Hacer referencia a una imagen que se encuentra almacenada en un sitio web independiente del nuestro, para lo cual escribiremos por ejemplo <img src=" />: Se muestra una imagen ubicada en una dirección de Internet, en este caso del portal Flickr. Es una dirección absoluta, que muestra una imagen que no está en nuestro ordenador ni en nuestro espacio web, sino directamente en Internet. Esta última técnica (denominada hotlinking) entraña el riesgo de que, si el portal de donde tomamos el recurso opta por realizar algún cambio, puede que la imagen deje de mostrarse, pero puede ser un recurso interesante, si disponemos de poco espacio o limitaciones de ancho de banda.

15 Las dimensiones de las imágenes podemos especificarlas (si no queremos que la imagen ocupe tal cual su tamaño real) de una de las dos siguientes maneras: Descarga alguna foto con el motivo de una calle, guárdala en tu carpeta imagenes, y en tu página web incluye el código HTML necesario para que se muestre la imagen de cada una de las tres maneras que se han explicado. Añade el parámetro alt dentro de la etiqueta imagen (por ejemplo, del siguiente modo alt="calle con coches y tiendas") e intenta averiguar cuál es su función. Importantísimo: Debes tener en cuenta que con width y height podemos ajustar en un espacio de 80 píxeles, por ejemplo, una fotografía de 3000 píxeles de ancho. El inconveniente es que esa imagen ocupa el mismo tamaño si la mostramos con 3000 píxeles que con 80 píxeles, por lo que, al enviarse al navegador de nuestros visitantes, tardará bastante más tiempo en transferirse del que debería. Dicho de otra manera, antes de ubicar las imágenes en nuestro sitio web, deberemos escalarlas todas para que tengan unas dimensiones acordes a las que necesitamos. Esto lo podemos hacer con el GIMP. Tambien podemos aprovecharnos del GIMP para rotar una imagen, recortar una porción de una imagen, o crear rótulos artísticos. La inserción de una imagen con un editor como BlueGriffon resulta extremadamente sencilla. En el menú Insertar seleccionamos la opción Imagen. Si queremos cambiar la imagen o modificar el texto alternativo, podemos hacer doble clic sobre la imagen para editarla. También podemos, obviamente, hacer clic en el botón Código fuente (source) de la parte inferior y modificar el código fuente HTML que incorpora la imagen directamente. Para modificar el tamaño de la imagen, haremos clic sobre ella desde BlueGriffon y veremos que aparecen unos pequeños cuadros alrededor de la imagen (los llamados tiradores). Arrastrando estos cuadros, podemos modificar sus dimensiones. Al modificar el tamaño de una imagen, es interesante ver cómo se reflejan esos cambios dentro de la etiqueta img en el código fuente. Accediendo a la zona de código fuente podemos ver que los cambios han provocado que se incorpore el parámetro style para recoger, mediante estilos css, los cambios en los valores de anchura (width) y altura (height). Ahondando algo más en los estilos, si quisiéramos modificar la ubicación de la imagen, podríamos seleccionarla y modificar los valores del grupo Posición y distribución del panel Propiedades de estilo, que se despliega haciendo clic en Paneles > Propiedades de estilo. Con esas opciones podemos modificar la flotación de la imagen, añadir algún desplazamiento, etc. Puedes probar a modificar algunos valores y ver cómo va modificándose la posición de la imagen y cómo se va modificando el código fuente HTML.

16 Video y audio Un apartado especial merece la inserción de video y de audio. Cuando queramos insertar video o audio hemos de tener en cuenta que el vídeo y el audio están codificados con un formato concreto y, a su vez, todo ello está insertado en un formato de archivo contenedor: MPEG- 4 (archivos.mp4), Flash (.flv o.f4v), Ogg Vorbis (archivos.ogg), WebM (archivos.webm) o AVI (extensión.avi). Dentro de un mismo formato contenedor no siempre nos encontraremos la misma codificación ya que todos los contenedores almacenan el contenido con algún tipo de compresión, pero no siempre se habrá utilizado el mismo codec. Por diferentes cuestiones, los codec van mejorando y los más antiguos dejan de utilizarse en beneficio de los más recientes. Todo esto genera una combinatoria enorme de formatos a los que hay que incorporar la variable del navegador. Cada navegador en la actualidad es capaz de reproducir un número concreto de formatos. A día de hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vídeo en formato WebM. El formato Ogg Vorbis, por ejemplo, una muy buena alternativa por ser libre, aunque en la actualidad no funciona en Internet Explorer ni en Safari. Si el video que queremos utilizar se encuentra codificado con un codec poco común, podemos hacer una transcodificación con programas como por ejemplo Handbrake y de este modo asegurarnos que el video va a poder ser visto por la mayor cantidad de navegantes posibles. También podemos hacer uso del complemento Fireogg para Firefox que podremos emplear para generar archivos Ogg Vorbis o WebM a partir de otros formatos. Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre. <video src="video/fireworks_reducido.webm"></video> La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, el archivo de video está colocado dentro de una carpeta llamada video). Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y height. De hecho es recomendable hacerlo, para que el navegador sepa de antemano el espacio que debe destinar al vídeo. Por tanto, este ejemplo es más adecuado que el anterior: <video src="video/fireworks_reducido.webm" width="300" height="208"></video> En cualquier caso, los valores que emplearemos serán los que utilizamos al crear el vídeo. No tiene sentido tener un video almacenado en un sitio web (y que es el que va a ser transferido) de unas dimensiones mayores (ancho y alto) que con las que posteriormente va a ser visualizado. Hay otros parámetros que resultan útiles para la reproducción del vídeo: controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con insertar ese término, sin más valores. autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo. preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda.

17 loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá. muted: el vídeo no tendrá sonido al comenzar. Con esta información, descarga un video en formato webm, guárdalo en una carpeta a la que pondrás por nombre videos, e incorpóralo a tu página web haciendo uso de una sentencia HTML similar a ésta: Para insertar un vídeo con BlueGriffon, seleccionaremos la opción Insertar > Elemento HTML 5 > Video. Aparecerá un cuadro de diálogo donde podremos especificar el archivo que vamos a insertar y algunos valores adicionales. Ahora que ya sabemos incorporar videos de los que disponemos en nuestro sitio web, vamos a aprender a incorporarlos procedentes de otros sitios web. Sigue estos pasos para incrustar un vídeo de Youtube en una página web. 1. Acceda a Youtube y seleccione un vídeo. 2. Haga clic en el botón Compartir. La dirección que aparece se puede emplear en diferentes sitios, como blogs, herramientas sociales, etc. 3. En nuestro ejemplo haga clic en el botón Insertar que aparece más abajo. Copia en el código fuente de una página de tu sitio web el pequeño fragmento de código HTML que se despliega; será similar a esto: <iframe width="420" height="315" src=" frameborder="0" allowfullscreen></iframe> En cuanto a la gestión de audio para utilizarlo en Internet es similar a la que hacemos con el vídeo. Podemos: insertar un archivo de audio en nuestra página mediante el elemento HTML <audio>, podemos incrustar archivos de audio externos en aquellas páginas que lo permitan y, por supuesto, podemos realizar enlaces a archivos mp3, ogg, wav, etc, para que se descarguen en el ordenador del usuario y que los interprete con sus propias aplicaciones. El mismo procedimiento que empleamos para el vídeo se repetiría aquí. Por ejemplo, para insertar un archivo podcast en una página web, escribiríamos lo siguiente: <audio src="podcast.mp3" controls autoplay> Si optamos por el modelo externo, buscaremos un servidor que contenga esos archivos de audio y permita su inserción. A veces encontraremos el término incrustar o embeber y embed, en inglés. Ambos modelos se muestran en la figura:

18 Analiza el código HTML que ha conducido a cada una de las técnicas a la hora de incluir audio en nuestra página web:

19 En resumen: HTML define un nuevo elemento: <video> Soportado por los siguientes navegadores: Internet Explorer 9+, Firefox, Opera, Chrome, and Safari soportan el elemento <video>. Ejemplo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> El atributo control añade los controles de video, como reproducción, pausa y volumen. Es buena idea siempre incluir los atributos con la altura y la anchura. El elemento <video> te permite indicar múltiples elementos <source>. Cada elemento <source> puede enlazar con diferentes archivos de video. El navegador usará el primer formato reconocido. En la actualidad hay 3 formatos de video soportados por el elemento <video>: MP4, WebM, and Ogg: Navegador MP4 WebM Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES NO NO Opera NO YES YES MP4 = MPEG 4 files con H264 video codec y AAC audio codec WebM = WebM files con VP8 video codec y Vorbis audio codec Ogg = Ogg files con Theora video codec y Vorbis audio codec Tipos MIME para los formatos de video: Formato MP4 WebM Ogg Tipo MIME video/mp4 video/webm video/ogg

20 HTML define un nuevo elemento: <audio> Soportado por los siguientes navegadores: Internet Explorer 9+, Firefox, Opera, Chrome, and Safari soportan el elemento <video>. Ejemplo: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> El atributo control añade los controles de audio, como reproducción, pausa y volumen. El elemento <audio> te permite indicar múltiples elementos <source>. Cada elemento <source> puede enlazar con diferentes archivos de video. El navegador usará el primer formato reconocido. En la actualidad hay 3 formatos de audio soportados por el elemento <audio>: MP3, Wav, and Ogg: Navegador MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES YES NO Opera 10+ NO YES YES Tipos MIME para los formatos de video: Formato MP3 Wav Ogg Tipo MIME audio/mpeg audio/wav audio/ogg

21 Rótulos artísticos con GIMP Gimp permite también crear pequeños rótulos, que podemos utilizar a modo de títulos para las diferentes partes del sitio web. Veamos cómo se consigue: 1. Abrimos Gimp y en el menú Archivo seleccionamos la opción Nuevo. 2. En el cuadro de diálogo de la figura seleccionamos las dimensiones que tendrá el rótulo. Debemos recordar lo que hemos visto sobre dimensiones de la pantalla. 3. Haremos clic en la herramienta Texto (en forma de letra A) y a continuación en la imagen. Escribiremos el título o el texto. 4. Utilizando los controles que rodean el cuadro de texto, podemos modificar su tamaño o desplazarlo, si pulsas en su interior. En la barra de herramientas, en la parte inferior, encontramos los controles necesarios para modificar tipo de letra, color y otros aspectos. Todo ello se recoge en la figura: 5. Una vez que el texto tiene el formato apropiado y hemos colocado en la imagen, haremos clic en Cerrar el cuadro de diálogo de edición de texto.

22 6. En este momento aún podemos añadir algunos efectos al rótulo, mediante las opciones del menú Filtro. En nuestro ejemplo hemos aplicado un sencillo efecto de sombra arrojada. Podemos probar un filtro y, si el resultado no nos convence, podemos deshacer los cambios pulsando Ctrl-Z. 7. Cuando la imagen esté terminada, la guardaremos mediante la opción Archivo>Guardar. Debemos especificar el formato de la imagen; generalmente con PNG o JPG será suficiente. PNG será especialmente útil, si queremos mantener una transparencia del fondo. Además de en el formato elegido para la web, suele ser una buena idea la de guardar la imagen en el formato nativo de GIMP, conocido como XCF. De ese modo, podremos retomar la imagen y aplicarle modificaciones, si lo necesitamos. Debemos pensar que las imágenes PNG o JPG no mantienen información sobre cómo se creó la imagen, si llevaba filtros, etc. En cambio, el formato XCF sí lo hace. La figura muestra el resultado final obtenido al insertar la imagen en nuestra página web. Lo siguiente que debemos hacer para crear rótulos atractivos es realizar muchas pruebas e investigar las enormes posibilidades de los programas de retoque fotográfico y de dibujo. En la figura mostramos otro ejemplo de rótulo; en este caso, empleando una imagen como fondo a través de una capa.

23 Maquetación El contenido de una página web puede ser diferenciado en zonas o bloques, que pueden estar ubicados en la página de muchas formas diferentes. La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. El uso de la etiqueta div es sencillo. Codifica en tu página web este ejemplo: Prueba ahora a aplicar una modificación a la apariencia de ese bloque, añadiendo un estilo de borde a la etiqueta <div>; quedaría así: Eso es todo lo que necesitamos saber respecto de la etiqueta <div>: configura espacios dentro de la página. Después de un </div> se comienza con una nueva línea. Esa es una de las diferencias principales con la otra etiqueta que empleamos para diferenciar contenidos, la etiqueta <span>. Con ella conseguimos un efecto similar, pero en el interior de un párrafo. Recordemos que span se emplea con frecuencia para aplicar estilos en el interior de un bloque de texto. Adicionalmente, las etiquetas div y span se suelen acompañar de uno o dos parámetros destinados a identificar ese bloque: id: permite establecer un identificador único para el bloque. Así podremos referirnos al bloque de forma inequívoca. class: es similar a id, pero con la ventaja de que se puede repetir; así que podemos tener varios <div>diferentes con la misma clase. Este proceso se vuelve muy sencillo si nos apoyamos en las opciones del panel Propiedades de estilo del editor BlueGriffon. En concreto nos interesan las opciones de Posición y distribución, recogidas en la siguiente figura:

24 El panel en cuestión se despliega mediante la opción Paneles>Propiedades de estilo o mediante el icono correspondiente en la barra de iconos. Utilizando los valores de Flotación podemos ubicar el bloque a la izquierda, a la derecha e incluso centrarlo en determinados momentos. Traducido a estilos, este cambio es tan sencillo como indicar lo siguiente: Mediante BlueGriffon, podemos ir seleccionando cada uno de los bloques div creados. Hay que recordar que para seleccionar un <div> concreto podemos utilizar el selector de etiquetas situado en la zona inferior del editor. A continuación podemos aplicarles el estilo que queramos, o la posición en la página (posición absoluta), mediante las opciones del panel Propiedades de estilo del editor BlueGriffon, accesibles desde el menú Paneles. Al hacer esto, aparecerán unos controles alrededor del <div> que podremos modificar para ajustar su ancho y alto, además de su posición, como se muestra en la figura. Algunos de los valores que se irán incorporando como estilo (style) son los siguientes: position: absolute: indica que vamos a establecer una posición fija para ese <div> en la página. El resto de los valores situarán el elemento de diferente forma.

25 left (izquierdo), right (derecho), bottom (inferior) y top (superior): estos valores, seguidos de un número de píxeles, porcentaje u otros valores, establecen la distancia que habrá entre el div y el borde respectivo. width (ancho) y height (alto): indican la altura o anchura que tendrá el cuadro. En el panel de estilos encontramos una opción denominada Columnas que está muy vinculada con el concepto de maquetación de un bloque de texto. Utilizando esta opción, crea un diseño de columnas lo más parecido posible al de la imagen:

26 Organización de la información: tablas y listas En ocasiones necesitaremos generar secuencias de contenidos, ya sean en una dimensión (listas) o en dos dimensiones (tablas). Revisaremos en este espacio las posibilidades en este sentido. Listas no ordenadas: Listas ordenadas: Las listas con el editor web BlueGriffon se generan mediante dos botones muy habituales, plasmados en la figura: Aunque no todos los editores cuentan con esta otra opción, en BlueGriffon encontramos los botones de la figura destinados a crear listas de definición. Para incrementar o disminuir la sangría de una parte de la lista (permitiéndonos generar sublistas dentro de una lista):

27 Estos dos botones también son útiles para incrementar la sangría de un párrafo concreto respecto al texto, remarcando así que ese texto se diferencia del resto. Este tipo de operaciones también se pueden realizar mediante los estilos. Para modificar los estilos de una lista recurriremos nuevamente al panel Propiedades de estilo. Todo lo que desde aquí modifiquemos se verá reflejado haciendo uso de estilos. Sin entrar en los aspectos estéticos que ya hemos visto o los que analizaremos más adelante, contamos con una categoría denominada Listas, con algunas opciones específicas de las listas: Tipo: es la opción de estilos denominada list-style-type y, dependiendo del valor asignado, se modificará la apariencia de la viñeta de la lista o el tipo de numeración, si es una lista ordenada. Podemos aplicarlo a la lista completa o a algunos elementos concretos Posición: la opción list-style-position tiene dos valores, inside y outside, que harán que los elementos de la lista salgan hacia dentro o hacia fuera. Imagen: el valor list-style-image se emplea para definir una imagen como viñeta. A la hora de crear Tablas, y tal como sucedía con las listas, HTML sólo cuenta con etiquetas capaces de definir la estructura completa de la tabla, pero no su apariencia; los colores, anchuras de línea, fondos y otros aspectos se dejan para los estilos CSS. Una tabla mínima se diseña con tres etiquetas y sus respectivos cierres: <table> para definir el comienzo de la tabla. A la tabla le podemos añadir el parámetro border="1" para indicar si la tabla tendrá un borde. <tr> para indicar el comienzo de una fila. <td> para el comienzo de una celda. Codifica el siguiente ejemplo de tabla:

28 Mediante código HTML diseña una tabla como la de la siguiente imagen: Una tabla semánticamente correcta suele emplear algunas etiquetas más que, si bien no son necesarias, son recomendables. <caption>: empleada al comienzo de la tabla, le asigna un nombre general a la tabla. En la tabla anterior utiliza esta etiqueta para ubicar el texto Tardes ocupadas <colgroup>: a continuación de caption podemos destacar un número de columnas con una línea similar a ésta: <colgroup style="background-color: rgb(220, 220, 200);" span="5"> </colgroup>. Se emplea el parámetro span para indicar el número de columnas que se verán afectadas. <thead>: permite definir una o varias filas como cabeceras de la tabla. Al utilizarla, en lugar de definir las celdas con <td>emplearemos <th>, mientras que las filas seguirán creándose con <tr>. <tbody>: si utilizamos thead para definir la cabecera, emplearemos también <tbody> para indicar en qué punto comienzan las filas normales de la tabla. <tfoot>: por último, la pareja anterior se complementa con tfoot para establecer las filas que formarán parte del final de la tabla. Al trabajar con estilos, podremos definir apariencias muy concretas para cada parte de una tabla; ahí es donde cobra sentido el uso de las secciones, además de facilitar el trabajo de los lectores para personas con discapacidad y para los buscadores de Internet.

29 Además, cada celda de una tabla puede contar con dos parámetros, para que la celda se extienda más allá de lo normal. colspan: hace que la celda se extienda hacia la derecha, tantas celdas como se indique en su valor. rowspan: la celda se extenderá hacia abajo, tantas filas como se indique. Crea una tabla que diseñarás con este código HTML: <tr style="background-color: rgb(102, 255, 153);"> </tr> <tr> </tr> <tr> </tr> <tr> </tr> Ahora sustituye la primera fila por este código y comprueba el resultado: Ahora sustituye la segunda fila por este código y comprueba el resultado:

30 Desde el editor web, la gestión de la tabla se hace desde el menú Tabla: Hay varios métodos para modificar las dimensiones de las celdas. La forma más inmediata es colocar el puntero del ratón en la división de dos filas que aparece en el lateral izquierdo o en la división de dos columnas sobre la página web. En ese punto arrastraremos el puntero mientras mantenemos pulsado el botón del ratón. La fila entera o la columna se redimensionará. Aún queda un último conjunto de opciones destinadas a modificar la apariencia de nuestra tabla: la opción Tabla > Propiedades de tabla: Desde la pestaña Tabla podemos aplicar cambios a la estructura de la tabla, a sus dimensiones e incluso definir el borde de la misma. En la pestaña Celda actuaremos sobre las celdas que estuviesen seleccionadas o sobre la fila o columna completa. De nuevo podemos especificar la dimensión, la alineación del contenido e incluso el color de fondo. Una vez más el panel Propiedades de estilo nos permite modificar el aspecto de cualquier elemento que tengamos seleccionado, tanto si es la tabla completa, como un elemento interior. En el apartado Tablas, encontraremos algunas opciones exclusivas de las tablas, entre ellas: Colocar el nombre de la tabla arriba o abajo (Posición de la leyenda o la propiedad caption-side) Tipo de borde: si será contraido (le aporta un aspecto más actual o separado (cambiando el valor Bordes de la tabla o la propiedad border-collapse). Como siempre, para aplicar estilos con BlueGriffon resulta fundamental el uso del selector de etiquetas de la barra inferior. Con él podremos seleccionar un elemento concreto y así aplicarle estilo. Podemos seleccionar la celda, pero también cualquiera de los elementos que le anteceden, como la fila, la tabla, etc.

31 Recurso TIC: Publicación de una página web El paso siguiente, una vez que nuestra web está terminada, es el de transferir los archivos a un servidor web para que pasen a estar disponibles para cualquier persona que quiera utilizarlos. El modelo que se sigue es sencillo; para que una página pueda ser visualizada por cualquier persona solemos recurrir a los servidores web, por varios motivos: Un servidor web es un ordenador (simplificando un poco) que tiene presencia en Internet, es decir, que tiene una dirección IP asociada, además de un nombre fácilmente identificable asociado a esa dirección IP (del tipo Con esto nos aseguramos de que lo que coloquemos en ese servidor será fácilmente localizable mediante una URL concreta, que se compondrá del nombre del servidor más los nombres de las carpetas que se nos asignen, generalmente. Un servidor web está permanentemente encendido, todas las horas del día durante todo el año. Imaginemos que vamos a consultar nuestro periódico favorito y nos encontramos con que no podemos hacerlo, porque alguien ha apagado el servidor que lo aloja. No es un modelo de funcionamiento que tenga sentido, ya que no se sabe a qué hora vendrán nuestros usuarios. Así que los servidores de Internet funcionan a todas horas. Un servidor web suele contar con un buen ancho de banda, capaz de dar respuesta a muchas peticiones simultáneas. Así, si nuestro sitio web se vuelve un éxito y tenemos centenares de visitas por minuto, el servidor será capaz de transmitir nuestras páginas a los usuarios correctamente. Si esto lo tuviésemos que hacer con nuestro ordenador, sería inviable y los usuarios no podrían acceder al sitio. Ya vamos vislumbrando el modelo de funcionamiento de los servidores de páginas web. Básicamente esos ordenadores tienen instalado una aplicación denominada servidor de páginas web, un programa que está permanentemente escuchando para ver si le llegan peticiones. Cuando un usuario desde su ordenador abre el navegador e intenta acceder a una página alojada en ese servidor, la aplicación recibirá la petición, localizará la página y los recursos asociados y se los transferirá al usuario (esto se hace mediante una serie de normas denominadas protocolo http, por eso se suele anteceder las direcciones web de ), que a su vez verá la página en su navegador. Hay diferentes aplicaciones (programas servidores de páginas web ) para servir páginas web. Una de las más extendidas es Apache, que además es software libre, por lo que podríamos llegar a montar nuestro pequeño servidor de pruebas, si fuese necesario, aunque no es el caso. Transferencia FTP Hasta aquí está claro, pero, cómo envío mis archivos html, mis imágenes y mis cosas al servidor de páginas web? El método más extendido es transferir los archivos mediante un conjunto de normas identificadas como Protocolo de Transferencia de Ficheros (que son las siglas de FTP). Así pues, para enviar las páginas web al ordenador servidor, normalmente emplearemos una aplicación de transferencia FTP. En nuestro caso emplearemos Filezilla, que es software libre y multiplataforma, por lo que lo podremos utilizar sin coste alguno desde cualquier sistema operativo.

32 Se puede descargar desde Una vez descargada, procederemos a instalarla con los métodos habituales. Filezilla nos mostrará su pantalla inicial, recogida en la figura: El espacio se distribuye de la siguiente manera: En la parte izquierda encontramos un explorador de archivos que nos muestra el contenido de nuestro ordenador. Con él podremos desplazarnos hasta la carpeta que contiene el sitio web que hemos estado creando. La parte derecha nos mostrará las carpetas de nuestro servidor web. Allí aparecerán los archivos que hayamos transferido y podremos editarlos, modificarlos, borrarlos o realizar cualquier operación que necesitemos. El panel superior presenta los mensajes que emite el servidor. Es información administrativa, que sólo nos interesará si se produce alguna incidencia. En el panel inferior veremos información sobre las transferencias de archivos, los que queden pendientes, los que han tenido dado lugar a errores en la transmisión, etc

33 Para conectar con un servidor remoto previamente tenemos que tener una cuenta (un acceso permitido que será validado con un usuario y una contraseña) en ese servidor. Una cuenta es un nombre de usuario y contraseña, que nos darán acceso a una carpeta concreta del servidor. En muchos casos nuestro proveedor de Internet nos facilita espacio web en sus servidores; en otros, lo hacen nuestras propias empresas de trabajo. Si no sucede así, siempre podremos recurrir a los servidores web gratuitos. Hay multitud de servidores web que facilitan espacios gratuitos con ciertas limitaciones o publicidad para las personas o empresas que quieren crear sus primeras páginas web. No pondremos ningún ejemplo, porque resulta tan sencillo como buscar páginas web que contengan las palabras: servidor web gratuito en Internet. Si buscamos servidores gratuitos en Internet, también encontraremos muchos resultados empleando el término inglés, hosting o host, que son los términos que se emplean para describir el alojamiento o el servidor web. Independientemente del tipo de servidor por el que optemos, al final debemos contar con tres datos imprescindibles: Dirección del servidor FTP: la URL con la que accederemos al servidor de FTP. Nombre de usuario: el nombre de nuestra cuenta. Contraseña: la clave para acceder a la cuenta. Con esos tres datos seremos capaces de conectarnos a nuestro servidor de ftp en el 99% de los casos. En ocasiones puede que nos indiquen un par de datos más: Carpeta del servidor: ruta en la que debemos subir los archivos. Casi nunca se indica porque el propio servidor ya nos lleva a la carpeta apropiada. Puerto FTP: en algunos servidores hay que indicar este número, que es punto en el que el servidor escucha las peticiones que le llegan para realizar transferencias FTP. Normalmente no se indica porque es casi siempre el número 21. Cuando transmitas tu sitio web (o parte del mismo) al servidor web, o cuando lo copies a otra carpeta (o incluso a un pendrive) la estructura de los archivos debe mantenerse exactamente igual que la de origen, es decir, si habíamos distribuido los archivos en una determinada jerarquía de carpetas, deberemos respetar dicha jerarquía. No debemos olvidar que nuestra página principal debe llamarse index.htm o index.html, ya que ésa será la que se cargue automáticamente por parte del servidor, cuando alguien acceda a nuestro espacio. En este punto ya podemos acceder al navegador e introducir la dirección correspondiente para ver nuestro espacio web. La dirección nos la facilita también el servicio de almacenamiento que estemos empleando.

Manual de normas gráficas / Identidad visual institucional

Manual de normas gráficas / Identidad visual institucional Manual de normas gráficas / Identidad visual institucional ARCHIVOS EDITABLES Los archivos editables de los principales elementos que integran este manual, se encuentran disponibles para ser descargados,

Más detalles

LOREM IPSUM. Universidad A B C Máster X Y Z. Comunicación Efectiva. realizado por: Jaime Ramonet. Para la asignatura / materia:

LOREM IPSUM. Universidad A B C Máster X Y Z. Comunicación Efectiva. realizado por: Jaime Ramonet. Para la asignatura / materia: Universidad A B C Máster Trabajo Académico sobre: realizado por: Jaime Ramonet Ingeniro Industrial Superior (UPC-1983); PMP por el PMI. (jramonet@gmail.com) Para la asignatura / materia: Profesor: Fulanito

Más detalles

Sistemas Computacionales. Requisitos de Ingreso

Sistemas Computacionales. Requisitos de Ingreso # Doctorado en Ciencias en Sistemas Computacionales y Electrónicos Sistemas Computacionales Sistemas Electrónicos PLAN DE ESTUDIOS Requisitos de Ingreso Con una duración de 3 años y medio. Plan Basado

Más detalles

Manual de Identidad Corporativa MARCA SANDÍA MEDIA

Manual de Identidad Corporativa MARCA SANDÍA MEDIA Manual de Identidad Corporativa MARCA SANDÍA MEDIA Desarrollo gráfico: sageljimenez.es (José Ángel Jiménez García) ÍNDICE 0 índice 1. Introducción 2. Logotipo 2.3. Versiones auxiliar EXT 2.1.1. Versión

Más detalles

Derecho a la privacidad en internet. Ricard Martínez Martínez Profesor de Derecho Constitucional

Derecho a la privacidad en internet. Ricard Martínez Martínez Profesor de Derecho Constitucional Derecho a la privacidad en internet Ricard Martínez Martínez Profesor de Derecho Constitucional Aviso: No hay niños aquí Servicios Redes en el mundo En España Algunas reglas jurídicas < 14 años> Imposibilidad

Más detalles

Manual de Normas Gráficas

Manual de Normas Gráficas ÍNDICE CAPÍTULO 1: Introducción La marca 04 05 06 CAPÍTULO 2: Arquitectura de marca Construcción Tipografía Diagramación Variantes permitidas de la marca Relación con otras marcas Usos no permitidos Aplicación

Más detalles

Bienvenidos a Marketing Consultants,

Bienvenidos a Marketing Consultants, Slider principal Bienvenidos a Marketing Consultants, Consultoría en Mercadoctenía que lorem ipsum dolor sit elit, sed do eiusmod tempor incididunt ut labore et Investigación de Mercados Turísticos Estudio

Más detalles

PREPARANDO Y LO QUE. no sabias... mi propio cupcake PLACERES DE 1000 COLORES Y SABORES. Edición1 - Noviembre.

PREPARANDO Y LO QUE. no sabias... mi propio cupcake PLACERES DE 1000 COLORES Y SABORES. Edición1 - Noviembre. Edición1 - Noviembre especial de: CUPCAKES PLACERES DE 1000 COLORES Y SABORES PREPARANDO mi propio cupcake Y LO QUE no sabias... www.programaexperiencias.com 1 ÍNDICE Nuevas Experiencias 4 CUPCAKES PLACERES

Más detalles

IMAGEN INSTITUCIONAL. escudo. LOGOTIPO Para uso en señalización y materiales secundarios y de uso interno. F.M.V.Z. U.A.E.M

IMAGEN INSTITUCIONAL. escudo. LOGOTIPO Para uso en señalización y materiales secundarios y de uso interno. F.M.V.Z. U.A.E.M f. m.v.z IMAGEN INSTITUCIONAL f. m.v.z escudo Para uso en documentos oficiales y de uso externo. LOGOTIPO Para uso en señalización y materiales secundarios y de uso interno. X f.m.v.z 12x RETÍCULA X 12x

Más detalles

Índice. Logotipo Normalización. Área de Protección. Color. Aplicación del Color. Tipografía. Tipografía Complementaria.

Índice. Logotipo Normalización. Área de Protección. Color. Aplicación del Color. Tipografía. Tipografía Complementaria. Manual de Marca UTILIZACIÓN LOGOTIPO 215 Índice 3 Logotipo Normalización 6 Aplicación del 4 Área de Protección 5 11 Tipografía 12 Tipografía Complementaria 14 Logotipo Áreas 2 Logotipo Normalización x

Más detalles

IDENTIDAD VISUAL INSTITUCIONAL

IDENTIDAD VISUAL INSTITUCIONAL 1 2 MANUAL DE IDENTIDAD VISUAL INSTITUCIONAL 3 ÍNDICE INTRODUCCIÓN 3 USO DEL MANUAL 4 TERMINOLOGÍA 5 1. ELEMENTOS DE BASE 6 1.1 ISOTIPO Construcción Gráfica 7 Área de Seguridad 7 Versiones NO Autorizadas

Más detalles

Índice. Introducción. Índice. Glosario. Elementos básicos. Proporciones de la marca. Desarrollos Corporativos. Tarjetas genéricas.

Índice. Introducción. Índice. Glosario. Elementos básicos. Proporciones de la marca. Desarrollos Corporativos. Tarjetas genéricas. 1 Introducción 2 Este manual pretende garantizar una unidad gráfica lógica y coordinada en todos los ámbitos de la imagen corporativa de Lio Projects Para alcanzar dicho objetivo se reúnen en estas páginas

Más detalles

Soluciones FINTECH centradas en el usuario

Soluciones FINTECH centradas en el usuario Collection Services Soluciones FINTECH centradas en el usuario TECHNOactivity es una empresa de innovación especializada en soluciones de pago. A través de nuestra plataforma tecnológica MYMOID, ofrecemos

Más detalles

VICERRECTORÍA DE EXTENSIÓN Y RRII DIRECCIÓN DE COMUNICACIÓN Y MARKETING VERSIÓN 2.0 MARZO 2013

VICERRECTORÍA DE EXTENSIÓN Y RRII DIRECCIÓN DE COMUNICACIÓN Y MARKETING VERSIÓN 2.0 MARZO 2013 VICERRECTORÍA DE EXTENSIÓN Y RRII DIRECCIÓN DE COMUNICACIÓN Y MARKETING VERSIÓN 2.0 MARZO 2013 El contenido de esta normativa es de uso obligatorio al momento de aplicar la marca UC Temuco en los soportes

Más detalles

MANUAL DE IMAGEN CORPORATIVA. Procedimientos Integrados S.L.

MANUAL DE IMAGEN CORPORATIVA. Procedimientos Integrados S.L. MANUAL DE IMAGEN CORPORATIVA Procedimientos Integrados S.L. Introducción 0 El presente Manual tiene como finalidad recoger los elementos de identidad gráfica de PROIN S.L. y la gama de aplicaciones de

Más detalles

Sistema de venta de Mi Mercado Cuajimalpa

Sistema de venta de Mi Mercado Cuajimalpa Sistema de venta de Mi Mercado Cuajimalpa La idea principal, que es la base para el desarrollo de la identidad corporativa, es que los usuarios sientan que el mercado es un buen lugar para realizar sus

Más detalles

Guía básica de uso y aplicación de la marca

Guía básica de uso y aplicación de la marca Guía básica de uso y aplicación de la marca 13 Tipografía 01 Presentación y terminología básica Se presenta en esta página de forma conjunta, los elementos base que constituyen el eje vertebrador del sistema

Más detalles

4 Julio 2015, Madrid PREMIOS SEOPRO 2015 BASES Y FICHA DE PARTICIPACIÓN

4 Julio 2015, Madrid PREMIOS SEOPRO 2015 BASES Y FICHA DE PARTICIPACIÓN 4 Julio 2015, Madrid PREMIOS SEOPRO 2015 BASES Y FICHA DE PARTICIPACIÓN Por qué unos premios SEOPRO Desde 2009 el Congreso SEO Profesional es el evento de referencia con los mejores especialistas SEO,

Más detalles

Guía de las mejores herramientas para diseñar publicaciones digitales

Guía de las mejores herramientas para diseñar publicaciones digitales Guía de las mejores herramientas para diseñar publicaciones digitales Índice Introducción Cómo escoger la mejor herramienta Las tres mejores herramientas Chapter 06 Chapter 07 Chapter 08 Chapter 09 Chapter

Más detalles

Manual de Identidad Corporativa

Manual de Identidad Corporativa 1 Manual de Identidad Corporativa Cultura Club 2 ÍNDICE Introducción 3 Marca/Logomarca 4 Acotaciones/Versión preferente 5 Lomarca principal extendida en línea 6 Imagotipo 7 Logotipo 8 Versión secundaria

Más detalles

Manual de marca. JUNJI - Junta Nacional de Jardines Infantiles

Manual de marca. JUNJI - Junta Nacional de Jardines Infantiles Manual de marca JUNJI - Junta Nacional de Jardines Infantiles 2014 Bienvenido al manual de marca de la JUNJI Este manual fue creado para dar a conocer cómo se aplica la imagen institucional de la JUNJI.

Más detalles

Manual de uso de escritorio web Franquiciadores.com

Manual de uso de escritorio web Franquiciadores.com Manual de uso de escritorio web Franquiciadores.com Desarrollado por 1 Iniciar sesión En primer lugar recibirás un correo proveniente de Franquiciadores, indicando que se ha creado un nuevo usuario vinculado

Más detalles

MANUAL BÁSICO Identidad Corporativa

MANUAL BÁSICO Identidad Corporativa MANUAL BÁSICO Identidad Corporativa 100% Pantone 7690 C 70% Pantone 7690 C Marca / Versión color corporativo. 10 mm 10 mm 10 mm 10 mm Area de respeto de Marca / en el grafico se define una zona de proteccion

Más detalles

editorial Lima, 1971 Del libro Peregrinos de la lengua (Alfaguara,

editorial Lima, 1971 Del libro Peregrinos de la lengua (Alfaguara, editorial Lima, 1971 Del libro Peregrinos de la lengua (Alfaguara, 1998) Ese es el año de la revi. 1. Donde está todo 2. En el punto exacto 3. Desde el principio 2014 12 16 17 26 31 04 16 26 28 Cl BRANDAS

Más detalles

UNIVERSIDAD CATÓLICA DEL MAULE [FACULTAD] [ESCUELA]

UNIVERSIDAD CATÓLICA DEL MAULE [FACULTAD] [ESCUELA] Márgenes: - Izquierdo 3,5 cm - Derecho 2 cm - Superior 2 cm - Inferior 2 cm Logotipo de la universidad 3,5 cm x 4,5 cm UNIVERSIDAD CATÓLICA DEL MAULE La letra de todo el documento debe ser Arial o Times

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 8: Publicación.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 8: Publicación. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 8: Publicación. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Publicación de un proyecto web

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 3: Formato básico.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 3: Formato básico. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 3: Formato básico. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Formato del texto La apariencia

Más detalles

Titulo de la Nota Nombre autor de la nota. Deconstrucción de la revista 90+10 Argentina. Estructura de la página: Maquetación.

Titulo de la Nota Nombre autor de la nota. Deconstrucción de la revista 90+10 Argentina. Estructura de la página: Maquetación. Estructura de la página: Maquetación 00 Nombre Revista Titulo de la Nota Nombre autor de la nota Bajada de Titulo. Mauris imperdiet facilisis enim eu tristique. natoque penatibus et magnis dis parturient

Más detalles

Manual de normas gráficas. Centro para el Desarrollo de la Nanociencia y la Nanotecnología

Manual de normas gráficas. Centro para el Desarrollo de la Nanociencia y la Nanotecnología Este Manual de Normas Gráficas es una herramienta de trabajo diseñada para entregar a cada usuario la información, especificaciones y normas necesarias para la correcta implementación de la Identidad Corporativa

Más detalles

DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML

DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).

Más detalles

MANUAL BÁSICO Identidad Corporativa

MANUAL BÁSICO Identidad Corporativa MANUAL BÁSICO Identidad Corporativa 100% Pantone 288 C 100% Pantone 279 C Simbolo / Unicamente separable de su logotipo para fines decorativos (indianas, Textiles, marcas al agua, golpes en seco, etc).

Más detalles

MANUAL BÁSICO Identidad Corporativa

MANUAL BÁSICO Identidad Corporativa MANUAL BÁSICO Identidad Corporativa Marca / Versión color corporativo. 100% Pantone 486 C 10 mm 10 mm 10 mm 10 mm Area de respeto de Marca / en el grafico se define una zona de proteccion que delimita

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

INSPIRACIÓN ESTRATÉGICA

INSPIRACIÓN ESTRATÉGICA MOTTAINAI Mottainai es una antigua palabra budista que tiene vínculos con la idea sintoísta en la que los objetos tienen alma. Se puede considerar como un término japonés que transmite un sentimiento de

Más detalles

Visual Merchandising. Diseño gráfico Interiorismo. Escaparatismo

Visual Merchandising. Diseño gráfico Interiorismo. Escaparatismo Visual Merchandising Diseño gráfico Interiorismo Escaparatismo Quiénes somos Vm Grup es un equipo multidisciplinar de profesionales con una larga trayectoria y experiencia, que cubre diferentes áreas de

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 4: Enlaces.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 4: Enlaces. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 4: Enlaces. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Formato del texto Acceso a otros contenidos

Más detalles

Manual de Uso Básico de Identidad

Manual de Uso Básico de Identidad Manual de Uso Básico de Identidad Introducción Junto con el nombre, la marca gráfica o identificador corporativo, como signo básico y primario de identificación visual de una empresa o producto, es de

Más detalles

TÍTULO DEL PROYECTO DE

TÍTULO DEL PROYECTO DE Instituto San Mateo Bachillerato de Excelencia PROYECTO DE INVESTIGACIÓN TÍTULO DEL PROYECTO DE INVESTIGACIÓN Trabajo dirigido por D. Evaristo Hilbert Feynman curso 2016-2017 holacaracola Resumen En no

Más detalles

Centro Internacional de la Papa. Lineamientos de la Marca

Centro Internacional de la Papa. Lineamientos de la Marca Centro Internacional de la Papa Lineamientos de la Marca Contenido 4 5 6 7 8 9 10 10 11 12 14 15 17 17 18 20 22 23 24 26 Introducción Visión y misión del CIP Logotipo Variación del logotipo Lineamientos

Más detalles

MANUAL DE IDENTIDAD CORPORATIVA

MANUAL DE IDENTIDAD CORPORATIVA MANUAL DE IDENTIDAD CORPORATIVA ELEMENTOS BASICOS LOGOTIPO CAOR empresa líder en el ramo automotriz fusiona su fuerza de trabajo al grupo CIRCUITO GP, fusionando dos logos para crear un concepto de fuerza

Más detalles

Publicando información en Internet.

Publicando información en Internet. Publicando información en Internet. Que es un sitio Web? Es un conjunto de archivos computacionales (imágenes, animaciones, etc) y páginas Web referentes a un tema en particular, incluye una página inicial

Más detalles

Herramientas de Google

Herramientas de Google 1 Índice de contenido Licencia y condiciones de uso...3 Introducción...4 Picasa...5 Acceso a Álbumes web Picasa...5 Subir fotos en línea...6 Organizar nuestras fotos...8 Etiquetas en las fotos...10 Editar

Más detalles

Sistema de Identidad Institucional Sistema de Identidad Institucional

Sistema de Identidad Institucional Sistema de Identidad Institucional Sistema de Identidad Institucional CARTA DEL SECRETARIO GENERAL El año 2008 marcó el sexagésimo aniversario de la Carta constitutiva de nuestra Organización. Al hacer una pausa para celebrar la suscripción

Más detalles

Comunicación, Marketing y Social Media

Comunicación, Marketing y Social Media Comunicación, Marketing y Social Media Comunicación y Marketing Planificación Gestión Estrategia Medios de Comunicación Social Media Community Manager Redes Sociales Gestión de contenidos Formación Redes

Más detalles

UNIVERSIDAD DE GUADALAJARA. Red Universitaria de Jalisco. Manual de Identidad INSTITUCIONAL

UNIVERSIDAD DE GUADALAJARA. Red Universitaria de Jalisco. Manual de Identidad INSTITUCIONAL UNIVERSIDAD DE GUADALAJARA Red Universitaria de Jalisco Índice Introducción Sistema Gráfico Proporciones Simbolo y Signatura 5 Escudo a color 7 Colores Oficiales 8 Red Universitaria de Jalisco 9 Tipografías

Más detalles

63% Antioquia. contrataciontransparente.gov.co. Selecciona el departamento de tu interés

63% Antioquia. contrataciontransparente.gov.co. Selecciona el departamento de tu interés contrataciontransparente.gov.co PROYECTOS CONVOCATORIAS Selecciona el departamento de tu interés Antioquia 63% de las obras se encuentran dentro del tiempo estimado de ejecución. ver más 532 número ene

Más detalles

Manual Webquest Creator 2

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

Más detalles

Manual de Normas Gráficas Logotipo Aniversario

Manual de Normas Gráficas Logotipo Aniversario Manual de Normas Gráficas Logotipo Aniversario 2016 Logotipo Aniversario Se ha creado un Logotipo para celebrar los 60º años de nuestra institución. Éste debe ser usado durante todo el año en todo documento,

Más detalles

GUÍA DE MARCA Y MANUAL DE NORMAS GRÁFICAS

GUÍA DE MARCA Y MANUAL DE NORMAS GRÁFICAS GUÍA DE MARCA Y MANUAL DE NORMAS GRÁFICAS ÍNDICE GUÍA DE MARCA Direccionadores de valor 7 Visión de marca 9 Estrategia de marca 11 Pirámide de atributos 13 Posicionamiento de marca 15 MANUAL DE NORMAS

Más detalles

Ministerio de Educación. Diseño de Presentaciones en la Enseñanza. Módulo 10: Plantillas y estilos

Ministerio de Educación. Diseño de Presentaciones en la Enseñanza. Módulo 10: Plantillas y estilos Ministerio de Educación Diseño de Presentaciones en la Enseñanza Módulo 10: Plantillas y estilos Instituto de Tecnologías Educativas 2011 Diseño de Presentaciones en la Enseñanza (OpenOffice) Plantillas

Más detalles

2. El Constructor por dentro

2. El Constructor por dentro 2. El Constructor por dentro 1. Introducción Si, después de analizar las características de estas dos grandes herramientas de autor, te has decido por el Constructor, bienvenid@, vamos a empezar un viaje

Más detalles

C Ó D I G O D E C O N D U C TA

C Ó D I G O D E C O N D U C TA Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis MENSAJE DEL DIRECTOR EJECUTIVO 3 neque quis porttitor consectetur. Curabitur eu dui elementum, mattis libero sit amet, congue

Más detalles

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1 DREAMWEAVER CS3 Jorge A. Villa Saravia 2011 www.jalbertovsa.net www.jalbertovsa.net 1 1. INTRODUCCIÓN A DREAMWEAVER CS 3... 2 1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB... 2 1.2.

Más detalles

5.2.1 La Página Principal

5.2.1 La Página Principal 5.2 Las Páginas WEB Una página Web es un documento electrónico escrito en un lenguaje de ordenador llamado HTML, o Hypertext Markup Language (lenguaje de marcación de hipertexto). Como ya hemos dicho,

Más detalles

Personalización de la Base de Datos

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

Más detalles

CÓMO CREAR NUESTRO CATÁLOGO

CÓMO CREAR NUESTRO CATÁLOGO CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,

Más detalles

Google Sites. Universidad de Deusto Unidad Técnica de Innovación y Calidad aulatic, Enero 2013

Google Sites. Universidad de Deusto Unidad Técnica de Innovación y Calidad aulatic, Enero 2013 Google Sites 1 1. Qué es Google Sites? 2. Cómo empezar a utilizarlo? 3.Primeros pasos 4.Interfaz de Usuario 5. Cómo añadir contenido al sitio 6. Creación de nuevas páginas 7. Gestión y administración del

Más detalles

Ley 15/2012, de 27 de diciembre, de medidas fiscales para la sostenibilidad energética.

Ley 15/2012, de 27 de diciembre, de medidas fiscales para la sostenibilidad energética. Ley 15/2012, de 27 de diciembre, de medidas fiscales para la sostenibilidad energética. C/ La Rosa 1, 1º. 38002. Santa Cruz de Tenerife tel. 922 288 527 fax 922 888 333 www.assap.es info@assap.es Introducción

Más detalles

Tutorial de Introducción a la Informática Tema 0 Windows. Windows. 1. Objetivos

Tutorial de Introducción a la Informática Tema 0 Windows. Windows. 1. Objetivos 1. Objetivos Este tema de introducción es el primero que debe seguir un alumno para asegurar que conoce los principios básicos de informática, como el manejo elemental del ratón y el teclado para gestionar

Más detalles

MANUAL DE NORMAS GRÁFICAS

MANUAL DE NORMAS GRÁFICAS MANUAL DE NORMAS GRÁFICAS ÍNDICE 3 Logotipo 4 Conceptos 5 Centro de Innovación Educativa (CIE) 6 ESPECIFICACIONES TÉCNICAS Construcción 7 Área autónoma 8 Tamaños mínimos 9 Positivo, negativo, escala de

Más detalles

Técnicas de búsqueda y almacenamiento de páginas Web de interés para Religión

Técnicas de búsqueda y almacenamiento de páginas Web de interés para Religión Técnicas de búsqueda y almacenamiento de páginas Web de interés para Religión 1. TÉCNICAS DE BÚSQUEDA 1.1. Funcionamiento básico de los motores de búsqueda 1.2. Restringir la búsqueda 1.3. Búsquedas con

Más detalles

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

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

Más detalles

Windows XP Transferencia de archivos y configuraciones

Windows XP Transferencia de archivos y configuraciones Servicio de Informática Atención al Usuario Windows XP Transferencia de archivos y configuraciones Sección de Atención al Usuario Ultima modificación: 01 de Julio de 2.003 Transferencia de archivos y configuraciones

Más detalles

Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS

Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS 49 1.7 Hojas de estilo CSS 50 1.7 Hojas de estilo CSS 1.7.1 Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla

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

Unidad Didáctica 11. Insertar contenido multimedia

Unidad Didáctica 11. Insertar contenido multimedia Unidad Didáctica 11 Insertar contenido multimedia Contenido 1. Insertar archivos de audio 2. Insertar archivos Flash 3. Insertar archivos FLV (Flash video) U.D. 11 Insertar contenido multimedia 1. Insertar

Más detalles

EJERCICIOS PASO A PASO ZOTERO SESIÓN AVANZADA

EJERCICIOS PASO A PASO ZOTERO SESIÓN AVANZADA EJERCICIOS PASO A PASO ZOTERO SESIÓN AVANZADA UNIVERSIDAD DE MURCIA BIBLIOTECA UNIVERSITARIA Rosario Guiard Abascal FEBRERO DE 2013 ÍNDICE Ejercicio 1: Búsqueda rápida y avanzada... 3 Ejercicio 2: Organizar

Más detalles

Unidad 4. Guardar y abrir documentos. Guardar. Guardar como

Unidad 4. Guardar y abrir documentos. Guardar. Guardar como Unidad 4. Guardar y abrir documentos Guardar. Guardar como Puedes utilizar los comandos Guardar y Guardar como... del menú Archivo ( o el icono de la barra de estándar ) para guardar documentos. Al utilizar

Más detalles

MANUAL DE USUARIO Joomla 1.5. Parte 2

MANUAL DE USUARIO Joomla 1.5. Parte 2 MANUAL DE USUARIO Joomla 1.5 Parte 2 Página 1 de 26 Tabla de contenido 2. Gestión del contenido... 3 2.1 Gestión de contenido para usuarios del Front-end... 3 2.2 Gestión de contenido para usuarios del

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

CONDDE. Consejo Nacional del Deporte de la Educación A.C. IdentidadVisual

CONDDE. Consejo Nacional del Deporte de la Educación A.C. IdentidadVisual IdentidadVisual M.C. Jesús Enrique Seáñez Sáenz Rector de la Universidad Chihuahua Rector Presidente de la Junta de Rectores y Directores Dr. Julio César Guedea Delgado Secretario General Ejecutivo del

Más detalles

Módulo 8: Ofimática básica. Unidad didáctica 4: Introducción y modificación de datos. Access

Módulo 8: Ofimática básica. Unidad didáctica 4: Introducción y modificación de datos. Access Módulo 8: Ofimática básica Unidad didáctica 4: Introducción y modificación de datos Access UNIDAD DIDÁCTICA 4 Introducción y modificación de datos Créditos Autor/es: Fuentes Innovación y Cualificación

Más detalles

Páginas web ::: Tablas Diseño de materiales multimedia. Web 2.0. 1.6 Tablas

Páginas web ::: Tablas Diseño de materiales multimedia. Web 2.0. 1.6 Tablas 42 1.6 Tablas 43 1.6 Tablas 1.6.1 Introducción Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas. Aunque es una práctica muy

Más detalles

Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET

Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET Tema 2. Entorno de desarrollo integrado (IDE) de VS.NET La página de inicio del entorno de desarrollo integrado (IDE) Desde esta página podremos acceder a: nuestros proyectos recientes, noticias relacionadas

Más detalles

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

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

Más detalles

Panama ABOUT >>> El nuevo 802.11 ac. ...Sin Cablear!!!... sin programar!!!... sin configurar!!!...sin licencias!!! Fijar+Activar=Funcionar

Panama ABOUT >>> El nuevo 802.11 ac. ...Sin Cablear!!!... sin programar!!!... sin configurar!!!...sin licencias!!! Fijar+Activar=Funcionar Panama ac ABOUT >>> MISIÓN: CAMIBOX es un Sistema de Wireless Plug-&-Play profesional y modular para realizar la transmisión de Datos, Audio y sobre todo Vídeo, desde cualquier tipo de instalación de dispositivos

Más detalles

ÍNDICE WORD 2007. 2da. Parte

ÍNDICE WORD 2007. 2da. Parte ÍNDICE WORD 2007 2da. Parte PÁG. 02 05 08 12 13 15 16 17 18 19 20 22 25 TEMAS 27- Tabla de Ilustraciones 28- Índice 29- Tablas 30- Viñetas 31- Numeraciones 32- Esquemas. Esquemas numerados 33- Secciones.

Más detalles

Estructurar la información dentro del ordenador:

Estructurar la información dentro del ordenador: Estructurar la información dentro del ordenador: Aprender a estructurar la información dentro del ordenador, para facilitar su manejo y búsqueda. Las carpetas se utilizan para clasificar los documentos

Más detalles

Manual Corporativo ANDED - Asociación Nacional de Directivos de Entidades Deportivas

Manual Corporativo ANDED - Asociación Nacional de Directivos de Entidades Deportivas Manual Corporativo ANDED - de Entidades Deportivas La de Entidades Deportivas ANDED, presenta el manual corporativo de la marca y este esta desarrollado para un uso interno de la empresa y su circulación

Más detalles

MICROSOFT POWER POINT

MICROSOFT POWER POINT MICROSOFT POWER POINT QUE ES POWER POINT Y PARA QUÉ SIRVE Power Point es el programa más popular para crear presentaciones gráficas, utilizado también para crear de una forma rápida y profesional transparencias,

Más detalles

El mejor CMS para periódicos digitales

El mejor CMS para periódicos digitales El mejor CMS para periódicos digitales POWERED BY Foto: William Iven 1 INTRODUCCIÓN En Openhost siempre nos proponemos mejorar la experiencia de usuario del CMS Opennemas y ayudaros a crear, enriquecer

Más detalles

GUIA RESPONSABILIDAD SOCIAL EMPRESARIAL

GUIA RESPONSABILIDAD SOCIAL EMPRESARIAL GUIA RESPONSABILIDAD SOCIAL EMPRESARIAL CARTA DEL ALCALDE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ipsum lectus, sollicitudin vel, hendrerit vitae, ultricies vitae, tellus. Aenean

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

manual de identidad gráfica punto e Sección Programa Conjunto Juventud, Empleo y Migración Manual de identidad gráfica

manual de identidad gráfica punto e Sección Programa Conjunto Juventud, Empleo y Migración Manual de identidad gráfica manual de identidad gráfica Sección 1 Programa Conjunto Juventud, Empleo y Migración Manual de identidad gráfica 2010 manual de identidad gráfica Contenido 3 Presentación... 4 Misión...5 Visión...5 Valores...6

Más detalles

En el menú Ver, podemos visualizar de distinta forma un mismo documento:

En el menú Ver, podemos visualizar de distinta forma un mismo documento: MICROSOFT WORD Al iniciar Word aparece una pantalla inicial como ésta. En la parte superior se encuentra, en color azul, la barra del título, en la que muestra el nombre del documento sobre el que estamos

Más detalles

TUTORIAL DE WORDPRESS

TUTORIAL DE WORDPRESS TUTORIAL DE WORDPRESS Editado por Cristina Alejos. www.pinturayartistas.com ACCESO AL BLOG EDICIÓN Y CREACIÓN DE ENTRADAS CREAR UN ENLACE A OTRA PÁGINA MÁS OPCIONES DEL EDITOR CREACIÓN Y EDICIÓN DE PÁGINAS

Más detalles

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura

Más detalles

Manual corporativo de aplicaciones básicas. Corporate manual for basic applications

Manual corporativo de aplicaciones básicas. Corporate manual for basic applications EGASA Manual corporativo de aplicaciones básicas Corporate manual for basic applications A. Sistema básico de diseño / A. Basic design system A1. Símbolo LUCKIA. LUCKIA symbol. A2. Logotipo LUCKIA. LUCKIA

Más detalles

Formación del Usuario Manual de Windows XP

Formación del Usuario Manual de Windows XP Formación del Usuario Manual de Windows XP Índice ÍNDICE... 2 1. INTRODUCCIÓN... 3 2. PANTALLA... 3 2.1. TEMAS... 3 2.2. ESCRITORIO... 4 2.3. PROTECTOR DE PANTALLA... 4 2.4. APARIENCIA... 5 2.5. CONFIGURACIÓN...

Más detalles

FLICKR Flickr y sus Herramientas

FLICKR Flickr y sus Herramientas Flickr y sus Herramientas Curso de Flickr por KZgunea se encuentra bajo licencia Creative Commons de Atribución-NoComercial-CompartirIgual_3.0_ (CC-BY-NC-SA_3.0) Índice del curso 1. Que es flickr... 3

Más detalles

Diseño de páginas web

Diseño de páginas web Diseño de páginas web Utilidades en Dreamweaver Ricardo Esteban Alonso Preferencias. Edición En el menú Edición > Preferencias...,podemos modificar a nuestro gusto las opciones que de forma predeterminada

Más detalles

Para iniciar Excel es posible realizarlo de varias maneras, una de ellas es: Desde el menú Inicio.

Para iniciar Excel es posible realizarlo de varias maneras, una de ellas es: Desde el menú Inicio. Alexander Siniscalchi Agosto 2005 Introducción Este documento está adaptado al curso de Excel que se dicta a estudiantes que se inician con poco o ningún conocimiento de las herramientas de hojas de cálculos,

Más detalles

UNA HERRAMIENTA DE OFICINA BÁSICA

UNA HERRAMIENTA DE OFICINA BÁSICA UNA HERRAMIENTA DE OFICINA BÁSICA Empecemos viendo si esto de Google Docs puede ser útil en el aula. Os planteo una situación: Supongamos que mandamos a un grupo de alumnos hacer un trabajo en parejas,

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

Nombre: Este campo contendrá el nombre de la página web.

Nombre: Este campo contendrá el nombre de la página web. 4.3. PAGINA WEB (HTML) 4.3.1. Características La página de texto y, especialmente, la página web son dos recursos muy adecuados para publicar todo tipo de contenidos. En concreto, la creación de página

Más detalles

Vamos a ver los principales conceptos básicos que debemos

Vamos a ver los principales conceptos básicos que debemos 1. LIBROS Y HOJAS EN EXCEL Vamos a ver los principales conceptos básicos que debemos tener en cuenta a la hora de trabajar con los documentos de Excel. Antes que nada, veremos la manera de organizar las

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

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

generar columnas de texto y números disponer texto en columnas paralelas (para traducciones por ejemplo) situar imágenes junto a textos.

generar columnas de texto y números disponer texto en columnas paralelas (para traducciones por ejemplo) situar imágenes junto a textos. Módulo 3 Herramientas de Cómputo Tablas y Gráficos Las tablas de Word tienen una función similar a las tabulaciones pero con muchas más opciones de formato permitiendo mejores acabados. Mediante tablas

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