martes, 21 de enero de 2014

Diseño Web de Antes y Despues


 Es en general un término que ha sido creado para describir la Web antes del impacto de la fiebre punto como  en el 2001, que es visto por muchos como el momento en que el Internet dio un giro.

Es la forma más fácil en el sentido del término Web 1.0 cuando es usada en relación a término Web 2.0, para comparar los dos y mostrar ejemplos de cada uno

Un sitio Web 2.0 permite a los usuarios interactuar y colaborar entre sí como creadores de contenido generado por usuarios en una comunidad virtual, a diferencia de sitios web estáticos donde los usuarios se limitan a la observación pasiva de los contenidos que se han creado para ellos.


Opciones de crear páginas Web ahora




Una de  las opciones para crear páginas Web ahora es mucho más abierta y no es necesario tener conocimientos técnicos para publicar algo en Internet. Y dos, que muchas de las necesidades que empresas y particulares tienen al crear una página Web no requieren de una personalización ni en el diseño ni en las funcionalidades, con lo cual se adaptan a estándares que se han creado como WordPress, esto es que como en muchos otros negocios, alguien ha desbancado a los especialistas, a los ebanistas de las páginas web, por productos altamente configurables y que solucionan las necesidades de los clientes, con lo que los especialistas se dedican en muchos casos a adaptar estas soluciones para los clientes, o ver como los propios clientes se crean su propia web.

Nuevas tendencias  de diseño Web (flotante)

Para comenzar tenemos que decir que una de las tendencias en diseño para el 2014 más claras es la de que los diseñadores apostamos totalmente por el diseño adaptable o responsive. Cada vez son más los usuarios que acceden desde smartphones y tablets y hay que hacer que su experiencia de navegación no sea un engorro si queremos tener éxito con nuestra web. Nosotros hemos aplicado esta tendencia al 90% de nuestros proyectos web durante el 2013.
Otro punto que seguramente sea tendencia en el 2014 será el uso de los colores neón. Si bien es cierto que PANTONE ya ha seleccionado los 10 colores que serán los que más se usen e a mediados del 2014, los colores neón cada vez son más usados por los diseñadores y serán absolutos protagonistas durante el próximo año.

El scroll infinitivo

 Es otra de las tendencias en diseño web más claras. Páginas con galerías multimedia que van apareciendo según vamos cargando la web, blogs con entradas que van apareciendo según vamos avanzando etc. Si bien no es una técnica que se pueda aplicar a todo tipo de webs, si que tiene su segmento de aplicación. Fijaos en Pinterest.

Tipografías variadas, atractivas y originales y además mezcladas entre sí. 


Sin duda esta es de las tendencias más claras no sola en diseño web sino en diseño en general. Nos olvidamos de sombras, texturas y volúmenes para intentar jugar con el protagonismo de las tipografías, elemento básico para dotar de originalidad un diseño minimalista.
Los fondos de webs también vivirán una de las tendencias más claras como es el uso de fotografías a gran resolución como lienzos de web . Cada vez está más extendido y seguirá evolucionando en el 2014.

Webs de una sóla página. 

Y con ello no queremos decir que estas webs no tengan secciones. Nos referimos a que una de las tendencias que más fuerza coge para el 2014 es el diseño web con estructura de una única página, donde mediante un menú fijo en la parte superior o lateral nos vamos desplazando a lo largo de las secciones de la web, que están en la misma página de inicio. Se está propagando con fuerza a pesar de que ya había páginas webs que aplicaban esta técnica a principios del 2012.

Y para terminar, a pesar de que hay indicios de que habrá muchas más tendencias, tenemos que volver a hablar en este diseño del flat design, porque será la reina de las tendencias en diseño web durante el 2014. El diseño plano seguirá siendo tendencia durante el 2014.

Vídeo     
Bibliografía  

                                                        

lunes, 20 de enero de 2014

Flash en las Páginas Web

Como insertar objetos y películas flash en las páginas web


Mostrar animaciones hechas en formato flash en las páginas, usar códigos que validen correctamente, como extraer los archivos SWF de las páginas para usarlos sin conexión y crear ejecutables.

Los objetos flash, son archivos que poseen la extensión .swf, son hechos para contenido y aplicaciones interactivas de uso principalmente en la web, donde son reproducidos por los navegadores, pero es posible perfectamente utilizarlos en cualquier otro ambiente mediante el reproductor Flash player.


¿Qué son los objetos y películas flash?



Para los diseñadores y desarrolladores constituyen los adornos más vistosos y expresivos a utilizar en páginas web.
Por sus características son muy usados en publicidad, por su sencillez y gráficos ideales para juegos online, imprescindibles como videos (YouTube), para aplicaciones multimedia de enseñanza, etc.
Tienen el inconveniente de que para poder reproducirlos el navegador web, necesita tener instalado el plugin Flash Player.
Los navegadores Internet Explorer y Google Chrome ya lo incluyen después de instalarlos.
Para insertar objetos flash en nuestras páginas, existen varias opciones.
En internet hay actualmente varios sitios web que ofrecen la descarga de objetos flash de forma gratuita (no desinteresada), su código está diseñado de forma tal que al dar clic en el objeto, dondequiera que este insertado, redireccionan al usuario al sitio web del fabricante, permitiendo ganar en tráfico web y asegurarse la visita de potenciales clientes de otros objetos flash, en este caso de pago.
Abundan también páginas que proporciona el método fácil, ofrecen multitud de objetos flash para mostrar en páginas de mucha utilidad práctica, como mapas, contadores de tráfico, etc.
Funcionan insertando script que vinculan objetos de servidores remotos en nuestras páginas, este método tiene la desventaja de que podemos estar siendo utilizados de instrumento por generadores de malware o spyware, sacrificamos ancho de banda de nuestra conexión y ponemos en riego la seguridad de nuestros visitantes


¿Cómo insertar los objetos Flash en las páginas web?



La opción ideal es insertar en nuestras páginas objetos flash existente en nuestro sitio, por ejemplo un reloj, candelario, juego, animación o simples adornos.
En este caso la primera preocupación será insertarlos de forma tal que sean compatibles con los principales navegadores web, de manera que se muestren de forma adecuada y que valide el código correctamente.
Aquí se muestra unos pocos ejemplos de cómo vincular de ese modo los objetos.

Ejemplos de animaciones Flash en esta página


Reloj digital


Calendario

Reloj analógico

Insertar Flash en HTML5


Usado páginas web hechas en la más reciente especificación: HTML5, todo se hace más fácil.
Ya no son válidos los siguientes atributos: align, classid, codebase, codetype, standby, border.
Basta emplear en la etiqueta object los siguientes parámetros:
data que especifica la URL del archivo, type, width y height.
El parámetro <param> es necesario para asegurar compatibilidad con Internet Explorer
Usa el siguiente ejemplo para insertar una película flash.

¿Cómo extraer los objetos flash de las páginas web para utilizarlos offline?



Si no tienes ninguna página, ni blog, ni te interesa la edición ni el diseño web y lo que quieres es solo utilizar localmente las aplicaciones flash, puedes perfectamente utilizar las películas o animaciones flash impregnadas en las páginas web a las que accedes.
Tu navegador sea cual que sea el que uses, para poder reproducir estos objetos los descarga primero a tu disco duro, donde los tienes ocupándote espacio inconscientemente hasta que eliminas los temporales de tu navegador, inclusive hasta guardan sus cookies en tu sistema.
Es completamente lógico que los puedas utilizar en tu beneficio personal, en este caso hablo no de banners ni publicidad si no de juegos flash, animaciones, cortos humorísticos, etc.
Todos los navegadores almacenan los archivos SWF, de la misma forma que imágenes y todos los demás elementos necesarios para la representación de la página web, pero el que hace más fácil la labor de recuperar cualquiera de estos archivos de los temporales es Internet Explorer.

¿Dónde se guardan los archivos flash?


La carpeta que los contiene se llama Temporary Internet Files, (Archivos temporales de internet) tiene los atributos de archivo oculto y de sistema y se encuentra en la siguiente ruta:
"C:\Users\%username%\Appdata\Local\Microsoft\Windows\Temporary Internet Files"
Sustituye %username% por tu nombre de usuario o pega la dirección completa en el cuadro de Inicio o la herramienta Ejecutar y presiona la tecla Enter.
Si accedes a esta página mediante Internet Explorer al abrir la carpeta veras que contiene varios swf, incluidos todos los que se muestran en esta página, podrás copiarlos y salvarlos a otra ubicación pero para poder verlos la única forma será de arrastrarlos a una ventana del navegador

¿Cómo convertir los archivos Flash swf en aplicaciones ejecutables?


Los archivos SWF se pueden convertir fácilmente en archivos ejecutables, que permitan al dar dos clics en ellos se muestre y reproduzca su contenido.
Para eso puedes utilizar el reproductor FlashPlayer de Macromedia que permite abrirlos y convertirlos en proyectores (ejecutables).
Esta disponible gratis en el sitio de Adobe en: http://www.adobe.com/software/flash/
Existen en la web también multitud de software (de pago) llamados Decompiladores Flash, que permiten la edición de los SWF, es decir puedes abrirlos, editarlos, sustituir el texto que muestran o insertar otro diferente, sustituir imágenes, etc. y guardarlos con la extensión exe de ejecutable. 
No recomiendo ninguno ya que en ocasiones los ofrecen freeware (gratis) y después verdaderamente no son funcionales, hasta tanto no se pague por el servicio.
No obstante puedes realizar una búsqueda en Google con los términos: "decompile flash". 

Crear un Gadget con un archivo Flash

Otra opción muy útil y vistosa, es utilizar un archivo o película Flash para crear un Gadget que podemos utilizar en el escritorio de nuestro equipo.
Los Gadgets son aplicaciones que se instalan en las versiones de Windows posteriores a Vista, se muestran en la barra lateral (Sidebar) o en cualquier parte del escritorio.
Son solo pequeñas páginas web con un formato determinado, por lo que es posible mostrar en ellas cualquier película flash, como por ejemplo los relojes que se ven en esta página.
No es difícil crear un Gadget.
En la siguiente página de este sitio, puedes conocer cómo crear tu propio Gadget, solo copiando y pegando el código: 

Animaciones flash de ejemplo



Algunas animaciones flash de ejemplo, en este caso son relojes.

Están disponibles de forma gratuita en la web de su autor en Flash-clocks: http://flash-clocks.com/

Para insertarlos solo mira el código fuente HTML de esta página, para usarlos ya se explicó anteriormente.


Vemos un sencillo código HTML para visualizar Flash en una página web y explicamos sus etiquetas.


Conseguir un código HTML para colocar una película Flash es sencillo. Basta con tener Flash o Dreamweaver para que estos programas generen el código por nosotros. Pero a veces no tenemos Flash en nuestro ordenador y sólo tenemos un archivo .swf que tenemos que incrustar en una página web, entonces podemos crear nosotros mismos el código HTML para ello.

En este artículo mostraremos el código HTML necesario para visualizar una película Flash, procurando explicar algunas de sus etiquetas y atributos, para que quede claro lo que estamos haciendo. Daremos un código de ejemplo que podremos incluir en HTML para mostrar Flash. 


Vídeo de como Insertar Flash en  página web 



Bibliografía
http://www.desarrolloweb.com/articulos/codigo-html-mostrar-pelicula-flash.html

Sitio Web

Definición 
Las páginas web creadas en Dreamweaver pueden adaptarse para uso personal o comercial.Dreamweaver ofrece un combinado de edición de HTML y edición base WYSIWYG que es comprensible, incluso para los editores web no-experimentados. Usando las herramientasincluidas y sitios web eficaces se pueden crear con rapidez.


Instrucciones


Abre Dreamweaver y crear un nuevo archivo .html. Haz clicen cualquier lugar de la página en blanco, a continuación, en la parte inferior de la pantalla, haz clic en "Propiedades de página", a continuación, cambia el color de fondo de la página.


Haz clic en la opción "Capa" en el "Diseño de Objetos" del menú archivo. Esto creará una capa de diseño nuevo. Arrastra la capa para crear el contorno de la barra de navegación.
Selecciona los límites de la nueva capa. A continuación, haz clic en el botón que se parece a un pequeño lápiz en la parte derecha de la pantalla. Esto abrirá el menú de opciones de CSS. Aquí puedes elegir un color de fondo y el borde de la capa. Elige los colores que funcionan bien con tu color de fondo.
Haz doble clic en la capa y escribe todos los botones de navegación de tu sitio web. Una vez hecho esto, selecciona cada uno, a continuación, escribe el .html que se vinculará en la caja de "Link" en la parte inferior de la página.
Crea una nueva capa para el texto, logotipo y la caja de autor, y utiliza el mismo proceso de creación de capa, bordes y relleno para diseñarlos.
Guarda el archivo como "template.html" una vez que has insertado el logotipo e hiciste una barra de derechos de autor. Utiliza este archivo para crear todas las otras páginas del sitio web. Inserta imágenes y texto en el cuadro de contenido que desees para cada página diferente.
Cómo crear un sitio web con Adobe Dreamweaver 

Para que Dreamweaver le ayude eficazmente en la confección de un sitio web, debe seguir una serie de pasos, como comunicarle a Dreamweaver dónde se encuentran en su ordenador los componentes del sitio, por ejemplo, hojas de estilo CSS, imágenes o documentos HTML. Estos archivos deben estar organizados en subcarpetas dentro de una carpeta principal. Con una estructura ordenada, Dreamweaver podrá controlar los cambios que se produzcan en los archivos y mantendrá actualizados los enlaces de su sitio web. Sin esta organización de datos a través de Dreamweaver, el cambio de una sola imagen podría provocar una serie de errores en su sitio web. En este tutorial vamos a aprender a definir en Dreamweaver un sitio web nueva o ya existente.
    Para empezar, vaya a Crear nuevo > Sitio de Dreamweaver y abra la ventana Definición de sitios (figura 2
La ventana Definición de sitios le ofrece una serie de opciones para definir su sitio web.
Puede utilizar indistintamente las pestañas Básicas o Avanzadas, para crear su sitio. La diferencia reside en que Avanzadas está organizada en menús, mientras que Básicas va guiándole paso a paso durante todo el proceso y explica con más detalle las distintas propiedades.
Vaya a Avanzadas y pulse Datos locales, que es la base de este tutorial (figura 3).
Figura 3: En Avanzadas encontrará una serie de propiedades.
En Nombre del sitio, escriba "Sitio Aquo". Este nombre es sólo para uso propio y no aparecerá en el sitio web.
Vaya al icono Carpeta, junto a Carpeta de raíz local. Este punto es el más importante del proceso, porque define la carpeta principal de almacenamiento de datos para el sitio web.
Vaya a la carpeta "Sitio _Aquo" y pulse Seleccionar. Con esto Dreamweaver ya posee la información mínima para crear un sitio web.
Pulse Aceptar. Dreamweaver abre entonces la carpeta principal y muestra en el panel Archivos un menú con todas las carpetas, imágenes y documentos contenidos en ella (figura 4).
Figura 4: Los archivos del sito web aparecen en el panel Archivos.
Observe que en la parte superior del panel Archivos existe un menú desplegable en el que aparece "Sitio Aquo". Aquí están los nombres de todos los sitios que están siendo creados. Si es necesario, se puede navegar por el disco duro para buscar otras carpetas.
Dreamweaver no puede registrar cambios efectuados fuera de Dreamweaver. Utilice por tanto el panel Archivo para llevar a cabo todos los cambios en la estructura de los documentos del sitio web, y no herramientas del sistema operativo.


Vídeo de un sitio Web



BIBLIOGRAFIA

Menu Spry

Dreamweaver, un software creado por Adobe Systems Incorporated, les permite a los usuarios crear páginas web para Internet. El programa provee funcionalidad diseñada para los usuarios que no saben cómo escribir. Adobe presentó por primera vez Spry (ágil) en Dreamweaver CS3. Spry provee un medio para que los desarrolladores de páginas web novatos produzcan menús altamente técnicos para las páginas sin la necesidad de escribir códigos complejos necesarios para que los servidores web entiendan la funcionalidad de la página.


Lenguajes de Spry

Spry puede funcionar con una variedad de lenguajes de programación web, incluyendo HTML, CSS y JavaScript. La funcionalidad de Internet depende mucho de la tecnología del lenguaje JavaScript para producir funciones como efectos de reinversión, funcionalidad de forma y menús complejos y dinámicos
Usar Spry
Los usuarios pueden seleccionar de una variedad de características dentro de la biblioteca Spry JavaScript para crear funcionalidad que ordinariamente requerería escribir el código de cero. Spry inserta automáticamente el código en la página web donde puede ser leído por el software en los servidores web que entregan el contenido de Internet.

Efectos Spry en Dreamweaver CS
Diseñar efectos especiales, como gradientes, animaciones, menús desplegables, etc, a menudo requiere el dominio de varios idiomas web y un montón de tiempo. Una de las muchas razones por las que los diseñadores utilizan Adobe Dreamweaver, un página líder de diseño web y programa de desarrollo de sitios Web, es que tiene varias características que hacen más fácil la creación de estos efectos (y, en algunos casos, automático). Spry incorporado en Dreamweaver o Spry Framework, es una forma útil para crear efectos en las páginas Web sin necesidad de una gran cantidad de conocimientos de programación y la investigación.

Efectos especiales Spry

Además de los efectos de menú incorporados, Spry Framework es compatible con una larga lista de animaciones y efectos de color, como sombras, degradados, transiciones de diapositivas, crecimiento, agite y varios otros. Puedes utilizar estos efectos para aplicar énfasis a objetos específicos en tus páginas, o para aumentar el atractivo general de la página. Adobe proporciona un manual muy bien escrito en línea sobre el uso de cada efecto, con ejemplos de código para la aplicación y la configuración de los efectos de diferentes escenarios de diseño. En la mayoría de los casos, el uso de un efecto es simplemente una cuestión de copiarlo en elmanual y pegarlo en tu página.

Widgets


Además de la función de los objetos Spry, puedes encontrar varios otros objetos Spry de terceros, llamados "Widgets", en Dreamweaver Exchange de Adobe. Esta lista cada vez mayor de widgets de Spry consta de todo tipo de objetos pre-construidos y efectos, como espectadores de productos en 3D, efecto del color y diseñadores de gradiente, presentaciones de diapositivas, menús, herramientas de zoom, cajas de luz, "Google Maps" (lo que quieras). Puedes descargar y configurar los widgets en el navegador "Widget" de Dreamweaver. La mayoría de los "widgets" tienen una amplia gama de opciones de configuración, tales como la aplicación de color y estilo de borde efectos, o la definición de áreas en las imágenes en las que los usuarios pueden utilizar su cursor del ratón para acercar o alejar. Lo mejor de todo, los "widgets" de Spry de Dreamweaver son gratuitos.

MENU Spry


Estos controles harán que tus páginas se muestren de una forma más profesional, vistosa y ordenada.
Podrás en contrarlos bajo el menú Insertar → Spry o en la pestaña Spry de la barra Insertar:


Estos controles son completamente configurables y además también aceptan modificaciones en su estilo utilizando CSS.


Barra de menús
Podemos crear menús de forma muy sencilla haciendo clic en Insertar → Spry → Barra de menús de Spry:

El primer cuadro de diálogo que encontraremos será el siguiente

Aquí podremos seleccionar el diseño para nuestro menú, haz clic en Horizontal o Vertical y pulsa el botón Aceptar.
Se creará automaticamente el menú, que podrás visualizar desde la vista de Diseño de esta forma:



Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los ítems y crea las opciones que se desplegarán al colocar el ratón sobre ellos. De nuevo utiliza los botones   y   para gestionar los elementos en el segundo listado.
Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.

Una vez creado un elemento de segundo nivel también seremos capaces de colgar sobre éste otro elemento de tercer nivel para ello utiliza los botones   y   y rellena el tercer listado de elementos.

Finalmente diremos que si tienes algún problema en visulizar el menú en vista de Diseño, puedes desactivar los estilos haciendo clic en el botón Desactivar estilos para visualizarlos de un modo más sencillo y poder comprender mejor el orden de los niveles creados. 

Vídeo  Spry 


 Bibliografía