Wysiwyg
16
DISEÑO El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video. La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos. El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra. CONCEPTO DE WYSIWYG Wysiwyg es un acrónimo proveniente de la expresión en inglés What You See Is What You Get, que en español traduce ‘lo que ves es lo que obtienes’, usada en el ámbito de la informática para designar la correspondencia entre aquello que ves en pantalla y su resultado final. Wysiwyg es una herramienta que permite a los usuarios que operan procesadores de texto, como Microsoft Word o Writer, de Open Office, reconocer en sus pantallas el formato de un documento y la que sería su versión impresa, al tiempo que lo crean. Anteriormente, los procesadores de texto no contaban con esta característica, y dificultaba al usuario tener una
description
Concepto, para que sirve, como funciona, caracteristicas del Wysiwyg
Transcript of Wysiwyg
DISEÑO
El diseño web es una actividad que consiste en la planificación, diseño e
implementación de sitios web. No es simplemente una aplicación de diseño
convencional, ya que requiere tener en cuenta la navegabilidad, interactividad,
usabilidad, arquitectura de la información y la interacción de medios como
el audio, texto, imagen, enlaces y video.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos,
aumenta la eficiencia de la web como canal de comunicación e intercambio de
datos, que brinda posibilidades como el contacto directo entre el productor y
el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales de
Internet especialmente en la World Wide Web. A menudo la web se utiliza
como medio de expresión plástica en sí. Artistas y creadores hacen de las
páginas en Internet un medio más para ofrecer sus producciones y utilizarlas
como un canal más de difusión de su obra.
CONCEPTO DE WYSIWYG
Wysiwyg es un acrónimo proveniente de la expresión en inglés What You See
Is What You Get, que en español traduce ‘lo que ves es lo que obtienes’, usada
en el ámbito de la informática para designar la correspondencia entre aquello
que ves en pantalla y su resultado final.
Wysiwyg es una herramienta que permite a los usuarios que operan
procesadores de texto, como Microsoft Word o Writer, de Open Office,
reconocer en sus pantallas el formato de un documento y la que sería su
versión impresa, al tiempo que lo crean.
Anteriormente, los procesadores de texto no contaban con esta característica, y
dificultaba al usuario tener una idea de cuál sería el resultado físico, es decir,
impreso, de su documento.
Wysiwyg, por lo tanto, surge de la necesidad de ofrecer al usuario un entorno
más intuitivo para interactuar con estos programas, minimizando en lo posible
las distancias entre la realidad virtual y la realidad real. Escala, colores,
texturas y forma son elementos que se imitan en pantalla con la finalidad de
que coincidan con las expectativas del usuario.
Actualmente, su campo de aplicación se ha extendido a editores HTML o
HTML5, en el desarrollo web, a programas de diseño gráfico y de
diseño arquitectónico 3D. De hecho, incluso la industria del espectáculo se ha
valido de la herramienta wysiwyg para planificar la iluminación de conciertos
musicales.
CONCEPTO DE HOJAS DE ESTILO
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada -
que es un lenguaje que describe la presentación de los documentos
estructurados en hojas de estilo para diferentes métodos de interpretación, es
decir, describe como se va a mostrar un documento en pantalla, por impresora,
por voz (cuando la información es pronunciada a través de un dispositivo de
lectura) o en dispositivos táctiles basados en Braille.
¿Para que sirve?
CSS es una especificación desarrollada por el W3C (World Wide Web
Consortium) para permitir la separación de los contenidos de los documentos
escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del
documento con las hojas de estilo, incluyendo elementos tales como los
colores, fondos, márgenes, bordes, tipos de letra..., modificando as la
apariencia de una página web de una forma más sencilla, permitiendo a los
desarrolladores controlar el estilo y formato de sus documentos.
¿Cómo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los
elementos en los documentos estructurados, y que forman la sintaxis de las
hojas de estilo. Cada regla consiste en un selector y una declaración, esta
última va entre corchetes y consiste en una propiedad o atributo, y un valor
separados por dos puntos.
Selector
Ejemplo:
h2 {color: green;}
h2 ---> es el selector
{color: green;} ---> es la declaración
color ---> es la propiedad o atributo
green ---> es el valor
Selector
El Selector especifica que elementos HTML van a estar afectados por esa
declaración, de manera que hace de enlace entre la estructura del documento y
la regla estilística en la hoja de estilo.
Declaración
La Declaración que va entre corchetes es la información de estilo que indica
cómo se va a ver el selector. En caso de que haya más de una declaración se
usa punto y coma para separarlas.
Propiedad o Atributo y Valor
Dentro de la declaración, la Propiedad o Atributo define la interpretación del
elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo
de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a
cambiar.
Tres tipos de estilos
La información CSS se puede proporcionar por varias fuentes, ya sea adjunto
como un documento por separado o incorporado en el documento HTML, y
dentro de estas posibilidades destacan tres formas de dar estilo a un
documento web:
Hoja de Estilo Externa
La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo
con el código HTML al cal estar vinculado a través del elemento link, que debe
ir situado en la sección head. Es la manera de programar ms eficiente, ya que
separa completamente las reglas de formato para la página HTML de la
estructura básica de la página.
Hoja de Estilo Interna
La Hoja de Estilo Interna est incorporada a un documento HTML, a través del
elementos tyle dentro de la sección head, consiguiendo de esta manera
separar la información del estilo del código HTML.
Estilo en Línea
El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro
de la sección body con el elemento style. Sin embargo, este tipo de estilo no se
recomienda pues se debe intentar siempre separar el contenido de la
presentación.
Ventajas de CSS
La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el
estilo se puede guardar completamente por separado del contenido
siendo posible, por ejemplo, almacenar todos los estilos de presentación
para una web de 10.000 páginas en un sólo archivo de CSS.
CSS permite un mejor control en la presentación de un sitio web que los
elementos de HTML, agilizando su actualización.
Aumento de la accesibilidad de los usuarios gracias a que pueden
especificar su propia hoja de estilo, permitiéndoles modificar el formato
de un sitio web según sus necesidades, de manera que por ejemplo,
personas con deficiencias visuales puedan configurar su propia hoja de
estilo para aumentar el tamaño del texto.
El ahorro global en el ancho de banda es notable, ya que la hoja de
estilo se almacena en cache después de la primera solicitud y se puede
volver a usar para cada página del sitio, no se tiene que descargar con
cada página web. Por otro lado, quitando todo lenguaje de marcado en
la presentación en favor del uso de CSS reduce su tamaño y ancho de
banda hasta más del 50%, esto beneficia al dueño del sitio web con
menos ancho de banda y costes de almacenamiento, as como a los
visitantes para los cuales las páginas se van a cargar más rápido.
Una página puede tener diferentes hojas de estilo para mostrarse en
diferentes dispositivos, como pueden ser impresoras, lectores de voz, o
móviles.
DEFINICION DE 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. Permiten
agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de
programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Cuando utilizamos Dreamweaver para crear una página Web no tenemos que
preocuparnos de todo esto. Dreamweaver inserta automáticamente las
etiquetas necesarias para construir la página con la apariencia y contenido
definidos en el editor gráfico.
Ventajas:
La gran ventaja de este editor sobre otros es su gran poder de
ampliación y personalización del mismo, puesto que en este programa,
sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un
comportamiento) están hechas en Javascript-C, lo que le ofrece una
gran flexibilidad en estas materias.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el
código HTML de cara al usuario, haciendo posible que alguien no
entendido pueda crear páginas y sitios web fácilmente sin necesidad de
escribir código.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad
con extensiones. Es decir, permite el uso de "Extensiones". Las
extensiones, tal y como se conocen, son pequeños programas, que
cualquier desarrollador web puede escribir (normalmente en HTML y
Javascript) y que cualquiera puede descargar e instalar, ofreciendo así
funcionalidades añadidas a la aplicación.
Características:
Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es
de gran ayuda. Además de poder insertar elementos web, encontramos una
gran precisión en la importación de información de Word y Excel, con las
funciones de copiar y pegar.
Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo
de sitios web, y si bien se trata del producto de mayores características del
mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así,
uno se encuentra con la dificultad de no saber por dónde comenzar.
PHOTOSHOP
Photoshop es el nombre popular de un programa informático de edición de
imágenes. Su nombre completo es Adobe Photoshop y está desarrollado por la
empresa Adobe Systems Incorporated. Funciona en los sistemas operativos
Apple Macintosh y Windows.
El nombre comercial de este producto se puede traducir del inglés como 'taller
de fotos'. Aunque existen otros programas similares como GIMP o PhotoPaint,
en la cultura popular se utiliza esta palabra para referirse también al 'retoque
digital de una imagen". Por ejemplo: "En esta foto se han pasado con
el Photoshop".
Características del Photoshop
Existen varias versiones de este programa. A través de la página web
de Adobe Creative Cloud se puede tener acceso a una versión de prueba de un
mes y a la adquisición de este producto de forma mensual o anual.
De un modo general, Photoshop permite modificar imágenes digitalizadas,
especialmente fotografías. También se utiliza para crear y editar imágenes (por
ejemplo, logotipos) y gráficos. La forma, la luz, el color y el fondo son algunos
de los aspectos que esta herramienta permite editar.
Photoshop CS6 y Photoshop CC 14.0
Photoshop CS6 es la versión de este programa comercializado a partir de
2012.Photoshop CC 14.0 está incluido dentro de Adobe Creative Cloud que es
un paquete de programas y aplicaciones que permite tener acceso a nuevas
funciones y actualizaciones de estos programas.
Polémica con el Photoshop
La utilización de este tipo de programas resulta polémico en ocasiones cuando
la manipulación de las imágenes se utiliza con fines políticos, propagandísticos
o comerciales transformando la realidad. Por ejemplo, en el año 2008 una
fotografía retocada de unas pruebas de lanzamiento de unos misiles en Irán fue
noticia a nivel internacional. Del mismo modo, el uso de este tipo de programas
en el mundo de la moda y la publicidad suscita polémica cuando fotos de
modelos son retocadas hasta tal punto que distorsionan la realidad.
COREL
Corel Corporation es una empresa canadiense desarrolladora de software,
fundada en 1985 por Michael Cowpland, su presidente hasta el año 2000.
SOFTWARE DE DISEÑO GRAFICO.
La firma es conocida por sus programas de dibujo vectorial CorelDRAW, y
de edición de imágenes y fotografías Corel PHOTO-PAINT, comercializados
conjuntamente como CorelDRAW
QUE ES CORELDRAW.
CorelDRAW es un programa avanzado de edición gráfica con funciones
básicas de composición de página, utilizado en el ámbito de las artes gráficas .
PARA QUE SIRVE CORELDRAW.
CorelDRAW sirve para editar gráficos basados en vectores. Este tipo de
gráficos, a diferencia de los gráficos en forma de píxeles, utiliza líneas o curvas
para plasmar las figuras gráficas que representan.
Mediante este programa podemos diseñar y crear revistas , folletos , tarjetas de
cumpleaños, o también como uso personal para diseñar nuestra portada de
facebook, utilizado por todos nosotros.
¿Qué es Flash?
Flash es una herramienta de edición con la que los diseñadores y
desarrolladores pueden crear presentaciones, aplicaciones y otro tipo de
contenido que permite la interacción del usuario. Los proyectos de Flash
pueden abarcar desde simples animaciones hasta contenido de vídeo,
presentaciones complejas, aplicaciones y cualquier otra utilidad relacionada. En
general, los fragmentos independientes de contenido creados con Flash se
denominan aplicaciones, aunque se trate solamente de una animación básica.
Se pueden crear aplicaciones de Flash con una amplia variedad de contenido
multimedia que incluye imágenes, sonido, vídeo y efectos especiales.
Cuando se edita contenido en Flash, se trabaja en un archivo de documento de
Flash. Estos documentos tienen la extensión de archivo .fla (FLA) y y se
componen de cuatro partes principales:
El escenario:
Es donde se muestran los gráficos, vídeos, botones y demás objetos durante la
reproducción. Esta parte se describe con mayor profundidad en Conceptos
básicos de Flash.
La línea de tiempo:
Es donde el usuario indica a Flash cuándo desea que se muestren los gráficos
y otros elementos del proyecto. También se utiliza para especificar el orden de
capas de los gráficos en el escenario. Los gráficos de las capas superiores
aparecen por encima de los gráficos de las capas inferiores.
El panel Biblioteca:
Es donde Flash muestra una lista de los elementos multimedia del documento
de Flash.
Aplicaciones que se pueden crear con Flash
Gracias al amplio número de funciones de Flash, se pueden crear multitud de
tipos de aplicaciones. A continuación se citan algunos ejemplos de los tipos de
aplicaciones que se pueden generar con Flash:
Animaciones:
Incluyen anuncios publicitarios, tarjetas de felicitación en línea, dibujos
animados, etc. Muchos otros tipos de aplicaciones de Flash también incluyen
elementos de animación.
Juegos:
Numerosos juegos se crean con Flash. Los juegos normalmente combinan las
capacidades de animación de Flash con las capacidades lógicas de
ActionScript.
¿Qué es GIMP?
Es un programa libre apropiado para tareas como retoque fotográfico, y
composición y edición de imagen. Es especialmente útil para la creación de
logotipos y otros gráficos para páginas web. Tiene muchas de las herramientas
y filtros que se esperaría encontrar en programas comerciales similares, así
como algunos interesantes extras.
GIMP tiene herramientas que se utilizan para el retoque y edición de imágenes,
dibujo de formas libres, cambiar el tamaño, recortar, hacer fotomontajes,
convertir a diferentes formatos de imagen, y las tareas más especializadas
2. Ventanas principales del GIMP
La captura de pantalla anterior muestra el arreglo de ventanas más básico y
efectivo del GIMP. Se muestran tres ventanas:
La caja de herramientas: Ésta es el corazón del GIMP. Contiene los menús
más generales, además de un conjunto de iconos que se emplean para
seleccionar herramientas, y otras opciones.
Opciones de herramientas: Empotrado debajo de la caja de herramientas
se encuentra el diálogo Opciones de herramientas, el cual muestra
opciones para la herramienta actualmente seleccionada. En este caso se
trata de la herramienta de selección rectangular.
Una ventana de imagen: Cada imagen abierta por el GIMP se muestra en
una ventana. Puede haber varias imágenes abiertas al mismo tiempo: el
límite lo pone la cantidad de recursos de su sistema. Es posible correr el
GIMP sin que haya imágenes abiertas, pero esto no es nada útil.
El diálogo de capas: Esta ventana de diálogo muestra la estructura de
capas de la imagen activa, y permite manipularla en una variedad de
formas. Es posible hacer algunas cosas sin el empleo del diálogo de
capas, pero incluso los usuarios ocasionales encuentran indispensable
tener el diálogo de capas disponible todo el tiempo.
Brochas, patrones y degradados: El empotrable que se encuentra debajo
del diálogo de capas muestra los diálogos para administrar brochas,
patrones y degradados.
La caja de herramientas
La ventana de la imagen
2.3. Diálogos empotrables
Un “empotrable” es una ventana que puede contener una colección de diálogos
persistentes, como por ejemplo el diálogo Opciones de herramienta, el diálogo
Brochas, el diálogo Paleta, entre otros.
