Víctor Álvarez Fernández: C5 WEB

Mostrando entradas con la etiqueta C5 WEB. Mostrar todas las entradas

miércoles, 15 de mayo de 2013

Iframe

Iframe (por inline frame o marco incorporado en inglés) es un elemento HTML que permite insertar o incrustar un documento HTML dentro de un documento HTML principal. Fue introducido en el navegador Microsoft Internet Explorer en 1997 y durante mucho tiempo solo fue soportado en este navegador, la etiqueta Iframe actualmente es ya aceptada por la W3 como un elemento estándar y es ampliamente soportado por gran variedad de navegadores.

<html>
  <head>
    <title>IFrames</title>
  </head>
 
  <body>
    <iframe src="http://www.example.com/" name="SubHtml"
      width="400" height="500" scrolling="auto" frameborder="1">
      <p>Texto alternativo para navegadores que no aceptan iframes.</p>
    </iframe>
  </body>
</html>

Creación de etiquetas DIV

Inserción de etiquetas div

Puede utilizar etiquetas div para crear bloques de diseño CSS y colocarlos en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes.

En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la etiqueta div.
Siga uno de estos procedimientos:
- Seleccione Insertar > Objetos de diseño > Etiqueta Div.
- En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div .
Defina cualquiera de las opciones siguientes:

Insertar

Permite seleccionar la ubicación de la etiqueta div y el nombre de la etiqueta si no es una etiqueta nueva.

Clase

Muestra el estilo de la clase aplicado actualmente a la etiqueta. Si ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecerán en la lista. Utilice este menú emergente para seleccionar el estilo que desea aplicar a la etiqueta.

ID

Permite modificar el nombre utilizado para identificar la etiqueta div. Si ha adjuntado una hoja de estilos, aparecerán en la lista los ID definidos en la hoja de estilos. No aparecen en la lista los ID de bloques que ya están en el documento.

Unidades tipograficas

Una em es una unidad de medida en el campo de la tipografía, lo que equivale al tamaño en puntos especificado actualmente.

El nombre de EM está relacionada con la M . Originalmente, la unidad se deriva de la anchura de la letra mayúscula "M" en el tipo de letra dado.

Esta unidad es la misma para todas las fuentes en un tamaño de punto dado.

1 EM en un punto tipográfico de 16 puntos. Las mediciones tipográficas que utilizan se expresan con frecuencia en notación decimal; por ejemplo, em .7 (que significa 0,7), o como fracciones de 100 o 1000, por ejemplo, 70/100 em o 700/1000 em.

Hoja de estilos externas

Las hojas de estilo externas (o conectadas) son las que mejor responden a las exigencias de los elaboradores y, sobre todo, las que interpretan mejor la filosofía de las hojas de estilo. Para comprender plenamente las peculiaridades de las CSS externas, pensemos en un sitio de grandes dimensiones con 1000 páginas HTML y un cierto tipo de formatación del texto. De repente, exigencias estéticas imponen el cambio del color de fondo, el tipo de carácter y la alineación del texto. Por lo que hemos visto ahora, tenemos tres casos:

el sitio está construido en HTML clásico, por lo que deberemos intervenir en cada uno de los marcados de cada una de las 1000 páginas;

el sitio está construido adoptando hojas de estilo en línea, por lo que también en este caso deberemos intervenir en cada marcado de cada una de las 1000 páginas;

el sitio está construido con las hojas de estilo incorporadas, por lo que se deberá siempre modificar el encabezamiento de estilo de 1000 documentos, si bien no se deberá intervenir individualmente en los atributos de la página que permanecerán, así, inalterados.

Creación de botones

Adobe Dreamweaver CS5, una página web líder en el diseño, soporta varias maneras de crear botones. Sin embargo, Dreamweaver no tiene herramientas gráficas para la creación de los botones físicos. La mayoría de los diseñadores crear botones en un editor de gráficos, como Photoshop, o descargar premade botón de gráficos a través de Internet. Para crear un botón de rollover, un botón que cambia de aspecto cuando el usuario pasa su ratón sobre él, se necesitan dos gráficos de los botones - uno para la marcha del estado del botón y un poco diferente una gráfica para la renovación del estado.

martes, 14 de mayo de 2013

Imagen de substitución

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON oEncendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.

Frames

El diseño de sitios web de frames o marcos supone un gran ahorro a la hora de vincular las distintas páginas de un sitio web y añade un gran facilidad y comodidad de navegación en el conjunto del sitio web. Para comprender que es un sitio Web de frames pondremos el siguiente ejemplo:

Figura 2: página de cuatro frames.

lunes, 13 de mayo de 2013

Configurar Sitio Web

Para crear un sitio, ir a la pestaña sitios-crear sitio, en carpeta local, crear una carpeta donde vayan todos los archivos html, y luego creas la carpeta img, donde irán todas las imágenes.
En sitios remotos es donde subes la información a la web, o al Wuala en nuestro caso.
Cuidado con no marcar subir automáticamente la información pues puede darte problemas si subes algún error.

Tablas Web

Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página. Utilice las tablas para presentar datos tabulares, diseñar columnas o disponer texto o gráficos en una página Web. Podrá agregar contenido; añadir, eliminar, dividir y combinar filas y columnas; modificar las propiedades de tablas, de filas o de celdas para añadir color y alineaciones, así como copiar y pegar celdas.

Las tablas constan de tres componentes básicos:

Filas: Espacio horizontal.
Columnas: Espacio vertical.
Celdas: Los contenedores que se originan en las intersecciones de las filas y las columnas.

Enlaces internos

Un enlace interno nos permite ir de una a otra parte de la página de forma rápida y sin tener que usar la barra de scroll del navegador. Puede ser muy útil si tenemos la página organizada en apartados y queremos tener un índice de esos apartados.

Para usar estos enlaces lo primero que debemos hacer es crear los puntos de destino o anclas, en los puntos de la página a los que queramos saltar.

Mapa d'imatge

El servei Web Map Service (WMS) definit pel OGC (Open Geospatial Consortium) produeix rutas de dades referenciats espacialment, de manera dinàmica a partir de informació geogràfica. Aquest estàndard internacional defineix un "mapa" com una representació de la informació geogràfica en forma d'un arxiu d'imatge digital convenient per a l'exhibició en una pantalla d'ordinador. Un mapa no consisteix en les pròpies dades.

Patrons

Los patrones son uno de los recursos más valorados por un diseñador pues permiten llenar espacios otorgando volumen, texturas y conceptos.

RSS (Really Simple Syndication)

RSS son las siglas de Really Simple Syndication, un formato XML para indicar o compartir contenido en la web. Se utiliza para difundir información actualizada frecuentemente a usuarios que se han suscrito a la fuente de contenidos. El formato permite distribuir contenidos sin necesidad de un navegador, utilizando un software diseñado para leer estos contenidos RSS (agregador). A pesar de eso, es posible utilizar el mismo navegador para ver los contenidos RSS. Las últimas versiones de los principales navegadores permiten leer los RSS sin necesidad de software adicional. RSS es parte de la familia de los formatos XML, desarrollado específicamente para todo tipo de sitios que se actualicen con frecuencia y por medio del cual se puede compartir la información y usarla en otros sitios web o programas. A esto se le conoce como redifusión web o sindicación web (una traducción incorrecta, pero de uso muy común).

lunes, 29 de abril de 2013

Posicionamiento HTML - CSS

Esquema absoluto: position

La propiedad position establece el esquema de posicionamiento absoluto de un elemento. Existen cuatro tipos en el esquema de posicionamiento absoluto:

static: posicionamiento absoluto estático
relative: posicionamiento absoluto relativo
fixed: posicionamiento absoluto fijo
absolute: posicionamiento absoluto absoluto

Para los que no son expertos en CSS, muchas veces es un misterio el modo en que funciona la propiedad z-index. Pero lo cierto es que es bastante utilizada y nos permite corregir rápidamente algún detalle o problema de ubicación de los elementos, trabajando en conjunto con la archiconocida float.

Para arrojar un poco de luz sobre el asunto te propongo conocer las funciones básicas de z-index y probar una demo online interactiva donde cada cambio que vas realizando en los valores se muestra automáticamente.

Las reglas básicas de z-index:

Un contenedor está apilado al mismo nivel que su objeto “padre” a menos que esto se modifique mediante la propiedad z-index.
z-index sólo funciona con objetos que tengan la propiedad position seteada como relative, fixed o absolute.
Asignar un valor de opacidad menor que 1 a un elemento posicionado genera implícitamente un contexto de apilamiento, lo que equivale a usar z-index.

viernes, 15 de marzo de 2013

SIGIL editor de ePub

-Se utiliza para corregir los problemas que hayan podido causar la conversión del PDF o del .odt, o bien para crear uno desde el principio. En el primer caso, abra con Sigil el EPUB generado por Calibre y modifique lo que necesite ser modificado

Sigil es un editor de libros-e multiplataforma y WYSIWYG. Está diseñado para editar libros en formato ePub.

Tumult Hype

-Tumult Hype es una de las mejores herramientas para la creación de animaciones en HTML5 y CSS3, su interfaz es muy amigable e intuitiva, incluso para usuarios que no tiene mucha experiencia en cuanto a este pero con muchas mas opciones para usuarios mas avanzados.

-Cuenta diferentes elementos de la animación, keyframes, navegador de escenas y crear una navegación entre ellos con transiciones. Con el inspector de Hype podemos definir todas las propiedades de nuestra animación o de cada elemento, además de definir las acciones y eventos asociados: clicks, rollovers, comienzos o finales de escenas, eventos de teclado, etc.

Permite exportar las animaciones en iBooks Author y está integrado con Dropbox para subir automáticamente tus animaciones.

Historia de la Web

-La idea subyacente de la Web se remonta a la propuesta de Vannevar Bush en los años 40 sobre un sistema similar: a grandes rasgos, un entramado de información distribuida con una interfaz operativa que permitía el acceso tanto a la misma como a otros artículos relevantes determinados por claves. Este proyecto nunca fue materializado, quedando relegado al plano teórico bajo el nombre de Memex. Es en los años 50 cuando Ted Nelson realiza la primera referencia a un sistema de hipertexto, donde la información es enlazada de forma libre. Pero no es hasta 1980, con un soporte operativo tecnológico para la distribución de información en redes informáticas, cuando Tim Berners-Lee propone ENQUIRE al CERN (refiriéndose a Enquire Within Upon Everything, en castellano Preguntando de Todo Sobre Todo), donde se materializa la realización práctica de este concepto de incipientes nociones de la Web.

En marzo de 1989, Tim Berners Lee, ya como personal de la división DD del CERN, redacta la propuesta, que referenciaba a ENQUIRE y describía un sistema de gestión de información más elaborado. No hubo un bautizo oficial o un acuñamiento del término web en esas referencias iniciales, utilizándose para tal efecto el término mesh. Sin embargo, el World Wide Web ya había nacido. Con la ayuda de Robert Cailliau, se publicó una propuesta más formal para la world wide web el 6 de agosto de 1991.

Estilos CSS - Dreamweaver

-CSS tiene grandes posibilidades de cambiar la apariencia de un sitio. Entre los trucos más solicitados están: el de cambiar las características de los links (sacarle el subrayado por ejemplo); hacer que en un documento existan todos los tipos de links que yo quiera; jugar con las imágenes de fondo; cambiar la apariencia de objetos de formularios; cambiar cursores; agregar filtros; cambiar características de los elementos de HTML, entre otros.

jueves, 14 de marzo de 2013

Adobe DreamWeaver

-Adobe Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Etiquetas