Archivo de la categoría: Programación

Iorad, utilidad web para crear manuales interactivos del uso de aplicaciones

Ene 22

Publicado por

Iorad, utilidad web para crear manuales interactivos del uso de aplicaciones

adminPor Juan Luis Bermúdez El 22 de January de 2012

Iorad es una interesante herramienta web para los desarrolladores, o para cualquier persona que necesite crear un tutorial sobre una aplicación. El único requisito necesario para utilizar esta herramienta es disponer de Java en nuestro equipo.

Su uso es fácil e intuitivo, nos permite grabar nuestra actividad en pantalla y agregar diferentes elementos, como vídeos, imágenes, textos, botones, flechas, etc. Todo esto trabajando de forma visual y “paso a paso”, por lo que cualquiera puede crear un tutorial en pocos minutos.

Finalmente, podemos insertar nuestro tutorial interactivo en nuestro blog o sitio web ydescargarlo como una presentación (PPT). También es posible exportarlo a documento deWord o PDF, para facilitar su impresión.

Enlace | Iorad
Vía | Ideas en Web

FUENTE http://www.softandapps.info/2012/01/22/iorad-utilidad-web-para-crear-manuales-interactivos-del-uso-de-aplicaciones/

Publicado en INTERNET, Programación

Deja un comentario

Etiquetas: , , , , , ,

Curso HTML5 online y gratuito de Microsoft

Ene 13

Publicado por

Interesante curso web con el que aprender las características que forman parte de la especificación HTML5 y las tecnologías que lo componen.

cerrar ampliación

06/01/2012 – Si tu propósito del año es mejorar tus conocimientos sobre la nueva versión del lenguaje básico de la web, Curso HTML5 pone a tu disposición todo lo necesario para conseguirlo.

Curso HTML5 es una nueva iniciativa de Microsoft con la que cualquier usuario interesado va a poder recibir un conjunto de lecciones online donde aprender las ventajas y novedades de este nuevo estándar.

Los seis temas que componen este repertorio de lecciones gratuitas e íntegramente en español son:

  • Definición de HTML5
  • Conceptos básicos de HTML, XHTML y CSS
  • Introducción a la presentación en pantalla con CSS
  • Uso de las etiquetas HTML5
  • Uso del elemento Canvas
  • Funciones Drag y Drop de HTML5

Por el momento es posible acceder a las dos primeras lecciones del curso donde se tratan aspectos como los beneficios de HTML5, diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0, nuevos elementos video, audio y canvas, introducción a las APIs de HTML5 y tecnologías de apoyo, la función de DOCTYPE o incluso el papel de las hojas de estilos CSS, entre otros conceptos.

Interesados pueden acceder de forma inmediata a este Curso HTML5.

FUENTE http://www.desarrolloweb.com/agenda/curso-html5-online-gratuito-microsoft-6365.html

Publicado en Programación

Deja un comentario

Etiquetas: ,

15 tutoriales para CSS3

Nov 17

Publicado por

15 Fresh and Powerful CSS3 Tutorials

written by Nikola Lazarevic

Facebook Page Wizard

CSS3 is here, it’s fun, and allows us to evolve the look of the web as we go. Features like gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of more fun. In this post we’ve collected some new and brilliant tutorials that will help you in mastering your CSS3 skills.

 

 

How to Create a Beautiful Icon with CSS3

We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. 

 

CSS3 Image Styles

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. This tutorial will show you how to use box-shadow, border-radius and transition to create various image styles. 

 

Blur Menu with CSS3 Transitions

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. In this tutorial you will learn how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. 

 

Practical CSS3 tables with rounded corners

Designing a table is a challenge. It’s (mostly) about how easy is your table to read. If your table isn’t easy to scan, usually users get annoyed as they lose focus when trying to find the right column and row. Having said that, today we’re going to create beautiful and practical tables styled using CSS3. 

 

Quick Tip: Create Pure CSS3 Ticket-Like Tags

During this tutorial we’re going to use CSS3 to create ticket-like tags, without relying on any images. 

 

Original Hover Effects with CSS3

We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. 

 

Create Spinning Rays with CSS3: Revisited

See how easy is to create a spinning rays animation with a bit of CSS. 

 

Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, we want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. 

 

Having Fun With CSS3: Spinning Newspapers

Imagine a cop drama taking place in the 1930s. What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities. 

 

Postcard from Paris – CSS3 Keyframes Animations in Use

Create beautiful of virtual postcard using CSS3 keyframes animations. 

 

Creative CSS3 Animation Menus

The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements. 

 

Create a Swish CSS3 Folded Ribbon in Five Minutes

Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let’s see how. 

 

Create A Unique Contact Form With CSS3 Transitions

Inspired by the contact form on Clear Span Media website PeHaa will show us how to recreate an effect of a letter sliding out from an envelope on mouse hover. 

 

Type study: Sizing the legible letter

Sizing text isn’t the most glamorous topic. Let’s dive into a few popular methods, discuss them with a bit of equanimity, and wrap up this little essay with a better understanding of our options for font-size. 

 

CSS3 Bling in the Real World

Putting our fun experiments aside, what CSS3 stuff can we really start using in a wide variety of production sites, right now, without having to wait 10 years until IE6 finally dies of old age and we have to start learning CSS4?

Authored by Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder ofwebexpedition18.com. You can find me on Twitter.

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

Publicado en INTERNET, Programación

1 comentario

Etiquetas: ,

ESPECIAL HTML5 y CSS3

Oct 19

Publicado por

Toni Ubeda – October 17, 11:28 AM

 

 

 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 13, 7:32 PM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 13, 9:08 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 11, 9:13 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 10, 7:03 PM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda rescooped this on Noticias de html5 + CSS3.      
September 30, 7:51 AM
Toni Ubeda shared this post on Twitter.      
September 16, 8:15 AM
 
 

Google Blogs search for HTML5 CSS3 – September 16, 8:14 AM

 

Recursos HTML5 y ejemplos CSS3. Configurar servidor, tutoriales, how to, tecnología. Técnicas SEO y tecnología web. Programas, sistemas operativos. Categorías. CSS3 (5); CUDA (1); Empresas (8); Flash (1); Herramientas (5); Historia (6) …

 
  Rescoop Thanks

Share

 
1
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
September 16, 8:14 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
September 14, 2:45 PM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Facebook.      
August 5, 8:29 AM
Toni Ubeda shared this post on Twitter.      
August 5, 8:29 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
August 2, 8:19 AM
 
 

Toni Ubeda – August 1, 9:45 AM

 

HTML5 and CSS3 Expanded the possibilities of Web Design.There are lots of designers and developers who started practicing HTML5 and also started implementing them in their web designs.

 
   
Source: daneden.me
  Rescoop Thanks

Share

 
1
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 17, 11:28 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 17, 8:45 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 17, 8:03 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
October 13, 1:33 PM
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
September 30, 7:51 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
September 16, 8:15 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
September 15, 9:19 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
Toni Ubeda shared this post on Twitter.      
August 1, 9:47 AM
 
 
Comment
 
 

Your comment is successfully posted and is waiting for moderation before being actually published

OK
 
 
 

Publicado en Programación

Deja un comentario

1000 sitios, recursos, herramientas y aplicaciones online para la web 2.0

Oct 18

Publicado por

1000 sitios, recursos, herramientas y aplicaciones online para la web 2.0

October 15, 2011

By 

Recopilación de 1000 aplicaciones, sitios o recursos online para la web 2.0. Ideal para pasar horas y horas navegando uno por uno, a pesar del poco tiempo que tenemos :)

AUDIO 2.0

BLOG2POD 2.0

BLOGGING 2.0

Marcadores 2.0

Browser 2.0

CALENDARIO 2.0

Chat 2.0

COLABORACIóN 2.0

COBRAR 2.0

COMIX 2.0

COMUNICACIóN 2.0

COMUNIDAD 2.0

CRM 2.0

BASE DE DATOS 2.0

DISEñO 2,0

DICCIONARIO 2.0

COMERCIO ELECTRóNICO 2.0

ECONOMíA 2.0

E-LEARNING 2.0

EMAIL 2.0

Intercambio de archivos 2.0

FINANZAS 2.0

FUN 2.0

JUEGOS 2.0

HOSTING 2.0

IDENTIDAD 2.0

IMáGENES 2.0

IMAGEN 2.0

PUESTOS DE TRABAJO 2.0

CONOCIMIENTO 2.0

LISTAS DE 2,0

MAPA 2.0

MARKETING 2.0

MEMO 2.0

MULTIMEDIA 2.0

NOTICIAS 2,0

Office 2.0

OS 2.0

PERSPECTIVAS 2.0

PERSONAL DE FABRICACIóN 2.0

ENCUESTAS 2.0

PORTAL 2.0

PowerPoint 2.0

PROYECTOS 2.0

EDITORIAL 2.0

LEA 2.0

RSS 2.0

PROGRAMACIóN 2.0

Search 2.0

Software 2.0

ESTADíSTICAS 2.0

ETIQUETADO 2.0

Task Manager 2.0

TEXTO 2.0

Text2speech 2.0

GESTIóN DEL TIEMPO 2.0

PISTA Y TRAZA 2.0

VIDEO 2.0

VOICE2MAIL 2.0

VOZ 2.0

WEB2FEED 2.0

WI-FI 2.0

  • Fon – Acciones, comprar, vender conexiones wi-fi. www.fon.com

WIKIS 2.0

LISTA DE DESEOS 2.0

Word 2.0

ESCRITURA 2.0

Fuente original: Web20
Aclaración importante: la traducción al español (se imaginaran que necesitaría otra vida para hacerla manualmente) la realicé mediante el traductor de Google, por este motivo las descripciones de los recursos pueden contener errores.

Claudio Ariel Clarenc

Publicado en INTERNET, Programación

Deja un comentario

Etiquetas: , , , ,

SWFObject: Javascript Flash Player detección y el guión incrustar

Sep 14

Publicado por

 

SWFObject: Javascript Flash Player detección y el guión incrustar

 

Por favor lea: SWFObject 2.0 ha sido liberado y está ahora alojado en lacode.google.com sitio web. Por favor, considere la información que se encuentra aquí obsoletos.

SWFObject es un pequeño archivo javascript usado para incrustar contenido de Adobe Flash Player. La escritura se puede detectar el plug-in Flash en todos los navegadores web más importantes (en Mac y PC) y está diseñado para hacer la incrustación películas Flash es tan fácil como sea posible. Es también muy amigables para los buscadores, degrada con gracia, se pueden utilizar en HTML válido y documentos XHTML 1.0 *, y es compatible con versiones, así que debería funcionar en los próximos años.
* Las páginas enviadas como text / html, no application / xhtml + xml.

Tabla de contenidos

¿Qué hay de nuevo en esta versión?

Para obtener una lista completa de cambios, por favor, ver a mi SWFObject 1.5 blog post.

Cómo funciona

[Para los nerds über, puede ver el Javascript prima aquí .]

Usando SWFObject es fácil. Basta con incluir la swfobject.js archivo Javascript, a continuación, utilizar una pequeña cantidad de Javascript en su página de incrustar la película Flash. Aquí está un ejemplo que muestra la cantidad mínima de código necesario para incrustar una película Flash:

<script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> This text is replaced by the Flash movie. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.write("flashcontent"); </script>
<script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> This text is replaced by the Flash movie. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699"); so.write("flashcontent"); </script>

He aquí un desglose de lo que hace el código:

<div id="flashcontent">[...]</div>

Prepare un elemento HTML que contendrá nuestra película Flash. El contenido colocado en el «poseedor» elemento será reemplazado por el contenido de Flash, por lo que los usuarios con el plug-in Flash instalado nunca verán el contenido dentro de este elemento.Esta característica tiene la ventaja añadida de permitir que los motores de búsqueda índice de su contenido alternativo.

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Crear un nuevo SWFObject y pase los argumentos necesarios:

  • swf – La ruta del archivo y su nombre para el archivo SWF.
  • Identificación – La identificación de su objeto o etiqueta embed. La etiqueta embed tendrá también este valor establecido como atributo de nombre es para los archivos que se aprovechan de swliveconnect .
  • width – La anchura de la película Flash.
  • Altura – La altura de la película Flash.
  • versión – La versión de jugador que es requerido por el contenido de Flash. Esto puede ser una cadena con el formato de ‘majorVersion.minorVersion.revision. Un ejemplo podría ser: "6.0.65" . O simplemente puede requerir la versión principal, tales como "6" .
  • background-color – Este es el valor hexadecimal del color de fondo de la película Flash.

Los argumentos opcionales son los siguientes:

  • la calidad – La calidad que usted desea que su película de Flash para jugar. Si no se especifica la calidad, el valor por defecto es "high" .
  • xiRedirectUrl – Si desea redirigir a los usuarios que completen la actualización ExpressInstall, puede especificar una dirección URL alternativa aquí
  • redirectUrl – Si desea redirigir a los usuarios que no tienen el plug-in versión correcta, utilice este parámetro y serán redirigidos.
  • detectKey – Este es el nombre de la variable url del script SWFObject buscará al pasar por la detección. Por defecto es ‘detectflash. Ejemplo: Para omitir la detección de Flash y simplemente escribir la película Flash en la página, puede agregar ?detectflash=false a la url del documento que contiene la película Flash.
so.write("flashcontent");

Decirle al script SWFObject para escribir el contenido Flash en la página (si la versión correcta del plug-in está instalado en el sistema del usuario) reemplazando el contenido del elemento HTML especificado.

LOS DETALLES

SWFObject trabaja silenciosamente en el fondo del documento HTML. En el desarrollo de las páginas que usan SWFObject, debería comenzar con la alternativa (no flash) el contenido en primer lugar. Conseguir sus páginas de trabajo sin las películas de Flash, y luego añadir más tarde con poco fragmentos de código JavaScript que reemplazan el contenido alternativo con las películas Flash.

Esto asegura que el contenido alternativo será indexado por los motores de búsqueda, y los usuarios que sin el plug-in Flash todavía verán una página HTML de trabajo.

Ya sea que usted proporciona instrucciones para la actualización o no depende de usted. Si su contenido alternativo puede ser suficiente, puede que no haya razón para decirle a la gente que se están perdiendo en el contenido Flash.

SWFObject trabaja en todos los navegadores web, incluida, en el PC: IE5/5.5/6, Netscape 8.7, Firefox, Mozilla y Opera. En Mac: IE5.2, Safari, Firefox, Netscape 7.6, Mozilla y Opera 7.5 +, y debe seguir trabajando en el futuro.

SWFObject detecta versiones de Flash Player en los navegadores de la versión 3 en adelante, y permitirá a los usuarios interactuar con el contenido Flash sin necesidad de «activar» en primer lugar. Para más información sobre este tema, consulte esta entrada del blog sobre la disputa Internet Explorer patente de Eolas .

SWFObject puede detectar versiones menores y las versiones de la revisión del reproductor de Flash así, simplemente pasando el valor de la cadena de la versión que desee. Un ejemplo de que requiere Flash player v.6.0 r65 (o 6,0,65,0) sería la siguiente:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

SWFObject construido en plug-in de detección pueden ser anuladas.

Si un nuevo navegador está siempre en marcha o por alguna razón el plug-in de detección de falla en el sistema del usuario, que puede incluir un enlace de desvío que va a desactivar la detección integrada en SWFObject, y siempre va a escribir el contenido de Flash en la página.

Para utilizar el enlace de desvío, simplemente enlace a la página con el contenido de Flash en ella, e incluyen una variable url single llamado ‘detectflash «y ponerlo en’ false ‘. Aquí está un ejemplo de lo que enlazan sería así:

<a href="mypage.html?detectflash=false">Bypass link</a>

Ejemplos SWFObject

El ejemplo anterior es lo que necesita para los huesos al descubierto el uso de SWFObject, pero lo que si desea utilizar algunos de los otros parámetros del plug-in Flash tiene para ofrecer? SWFObject hace muy fácil añadir cualquier parámetro extra que pueda necesitar.

Los ejemplos siguientes son una serie de métodos diferentes que deseen utilizar para incrustar el contenido de Flash.

UN EJEMPLO SIMPLE ADICIÓN DE UNA SERIE DE PARÁMETROS EXTRA

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"100%", "8", "#336699"); so.addParam("quality", "low"); so.addParam("wmode", 
"transparent"); so.addParam("salign", "t"); so.write("flashcontent"); </script>

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"100%", "8", "#336699"); so.addParam("quality", "low"); so.addParam("wmode", 
"transparent"); so.addParam("salign", "t"); so.write("flashcontent"); </script>

Aquí está una lista completa de los parámetros actuales y sus posibles valores en adobe.com.

PASAR VARIABLES A LAS PELÍCULAS GRACIAS A LA «FLASHVARS» PARÁMETROS:

Utilización de FlashVars es la forma más fácil de obtener datos de su código HTML en tu película Flash, pero sólo se puede pasar los datos en cuando se cargue la primera película.

Normalmente, se añade un parámetro llamado «FlashVars» y luego para el valor, se pasa una cadena de pares nombre / valor como:variable1=value1&variable2=value2&variable3=value3 y así sucesivamente.

SWFObject lo hace un poco más fácil ya que le permite añadir tantas variables como te gusta de una manera similar en el que añadir parámetros adicionales. He aquí un ejemplo de envío de valores en su película de Flash Utilización de FlashVars:

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"200", "8", "#336699"); so.addVariable("variable1", "value1"); 
so.addVariable("variable2", "value2"); so.addVariable("variable3", "value3"); 
so.write("flashcontent"); </script>

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"200", "8", "#336699"); so.addVariable("variable1", "value1"); 
so.addVariable("variable2", "value2"); so.addVariable("variable3", "value3"); 
so.write("flashcontent"); </script>

Una vez hecho esto, todas las variables que se pasa en ya se encuentra disponible dentro de la película Flash. Sólo tienes que acceder como lo haría cualquier otra variable en el_root línea de tiempo.

El script SWFObject también viene con una función extra que le permite tirar de valores de las variables de la cadena de url. Un ejemplo es que tienes una url que tiene este aspecto: http://www.example.com/page.html?variable1=value1&variable2=value2 .

Uso de la función getQueryParamValue() puede fácilmente sacar estos valores de la url y luego pasarlos a la película Flash. He aquí un ejemplo, vamos a suponer que la URL es similar al ejemplo anterior:

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"200", "8", "#336699"); so.addVariable("variable1", getQueryParamValue("variable1")); 
so.addVariable("variable2", getQueryParamValue("variable2")); so.write("flashcontent"); 
</script>

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "400", 
"200", "8", "#336699"); so.addVariable("variable1", getQueryParamValue("variable1")); 
so.addVariable("variable2", getQueryParamValue("variable2")); so.write("flashcontent"); 
</script>

El getQueryParamValue() función también es compatible con las variables de la lectura de la location.hash , tal como se utiliza a veces, cuando los enlaces profundos en sus aplicaciones de Flash.

Para un ejemplo de cómo los enlaces profundos a las películas de Flash usando el location.hash variable, echa un vistazo a la demo de Slideshow Pro , que utiliza el integrar SWFObject.

UTILIZANDO EN INSTALACIÓN CON SWFOBJECT

SWFObject tiene soporte completo para Adobe Flash Player Express Install característica. Los usuarios nunca tienen que dejar su sitio a actualizar su reproductor.

Para utilizar ExpressInstall, primero debe cargar el expressinstall.swf a su servidor web. A continuación, utilice el useExpressInstall método para especificar la ruta de su expressinstall.swf. Si no hay camino se especifica, SWFObject buscará en la misma carpeta que la página HTML actual.

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", 
"100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); 
so.write("flashcontent"); </script>

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", 
"100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); 
so.write("flashcontent"); </script>

Si quieres ver ExpressInstall en acción, puede instalar Flash Player 7 (o 6.0.65) y visiteesta página .

Si desea personalizar la función de instalación Express, el código fuente para el expressinstall.swf se incluye con SWFObject.

Si la película Flash en una ventana emergente, o si desea redirigir al usuario a una ubicación diferente después de completar la actualización ExpressInstall, puede utilizar elxiRedirectUrl atributo para redirigir al usuario a la página de destino en lugar de la página real de su destello de la película.

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", 
"100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); 
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); 
// must be the absolute URL to your site so.write("flashcontent"); </script>

<script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", 
"100", "8", "#336699"); so.useExpressInstall('expressinstall.swf'); 
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); 
// must be the absolute URL to your site so.write("flashcontent"); </script>

Descargar

SWFObject es liberado bajo la licencia MIT . Esto significa (básicamente) que se puede usar para lo que quiera sin restricciones.

Descargar SWFObject 1.5 – Archivo Zip, incluye swfobject.js y las plantillas HTML siguiente ejemplo.

O, si usted tiene más de una mano en el tipo, puede ver mis páginas de ejemplo:

Páginas * se envían como texto / html, no application / xhtml + xml.

Mientras estás en ello, es posible que desee inscribirse en la lista de correo SWFObject .Esta lista es una lista de discusión para hacer preguntas acerca de los problemas que pueden surgir en el uso SWFObject o para solicitar y examinar nuevas características. ->

¿Necesita ayuda con SWFObject? Trate de pedir ayuda en el foro SWFObject!

 

¿Por qué es mejor que el resto

Con los años ha habido muchos métodos para detectar las versiones de Flash player y películas integrar Flash en documentos HTML. En esta sección se echa un vistazo a cada uno de los métodos más populares y señalar los problemas con cada uno.

1) EL VALOR POR DEFECTO DE ADOBE PROPORCIONAN INCRUSTAR

Todo el mundo sabe el valor por defecto de Flash de Adobe proporcionan embed. Se compone de una etiqueta de objeto con una etiqueta embed colocado dentro de un mecanismo de reserva.

Este es el flash más popular método de insertar y es la opción por defecto al publicar la película Flash desde el IDE de Flash. Esta es la forma más compatible para incrustar una película Flash, y trabajará en la más amplia gama de navegadores. Este es un ejemplo del código predeterminado de Flash incrustar:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
width="550" height="400" id="Untitled-1" align="middle"> <param name="allowScriptAccess" 
value="sameDomain" /> <param name="movie" value="mymovie.swf" /> <param name="quality" 
value="high" /> <param name="bgcolor" value="#ffffff" /> http://mymovie.swf </object>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
width="550" height="400" id="Untitled-1" align="middle"> <param name="allowScriptAccess" 
value="sameDomain" /> <param name="movie" value="mymovie.swf" /> 
<param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> 
http://mymovie.swf </object>

Si bien este es el método más común de incrustar películas Flash, tiene algunos problemas.

  • Hay noplug en la detección -. Sin plug-in de detección, los usuarios pueden ver roto o contenido que no, y si no hay un plug-in instalados en todo, o tendrá el cuadro de diálogo «la instalación de ActiveX» en Internet Explorer, un usuarios casilla muchos ahora temen por el spyware y el malware rampante o el cuadro ‘pieza del rompecabezas extraño en navegadores basados ​​en Mozilla.
  • Ninguno de estos plug-in de los sistemas de instalación es muy fácil de usar, y normalmente no se explican muy bien en cuanto a qué es exactamente lo que un usuario está instalando.
  • Con los cambios debidos a la patente de Eolas, los usuarios tendrán que hacer clic sobre el contenido de Flash para activarla antes de poder interactuar con él. Más información aquí .
  • No es válido HTML o XHTML – No hay tal cosa como una embed etiquetas en cualquier versión de HTML o XHTML. Sin embargo, ya que muchos navegadores manejan object etiquetas de forma diferente (o no, o la puesta en práctica es muy buggy), la etiqueta embed era necesario como un mecanismo de reserva.

2) OBJETO ÚNICA ETIQUETA / FLASH SATAY

Este método ganó popularidad después de la Lista A Aparte artículo salió en 2002. He aquí dos ejemplos de «object» inclusión y satay de Flash:

‘Objeto etiqueta única »

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
width="300" height="120"> <param name="movie" 
value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> 
<!--[if !IE]> <--> 
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf" 
width="300" height="120" type="application/x-shockwave-flash"> 
<param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> 
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer"> 
FAIL (the browser should render some flash content, not this). </object> <!--> 
<![endif]--> </object>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
width="300" height="120"> <param name="movie" 
value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <!--[if !IE]> 
<--> <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf" 
width="300" height="120" type="application/x-shockwave-flash"> 
<param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> 
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer"> 
FAIL (the browser should render some flash content, not this). </object> <!--> 
<![endif]--> </object>

Flash Satay

<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300"> 
<param name="movie" value="c.swf?path=movie.swf" /> <img src="noflash.gif" width="200" height="100" 
alt="" /> </object>

<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300"> 
<param name="movie" value="c.swf?path=movie.swf" /> <img src="noflash.gif" width="200" height="100" 
alt="" /> </object>
  • Los problemas de accesibilidad -. Utilización de Flash Satay, algunos lectores de pantalla (como JAWS) se ignoran el contenido de Flash .
  • Con los cambios debidos a la patente de Eolas, los usuarios tendrán que hacer clic sobre el contenido de Flash para activarla antes de poder interactuar con él. Más información aquí .
  • Hay noplug en la detección -. Igual que el anterior – Sin plug-in de detección, los usuarios pueden ver roto o no el contenido. Cuando el reproductor de Flash se encuentra con una película de Flash incrustado en una página, se trata de jugar, no importa lo que la versión es. Así que si tienes Flash player 6 instalado, y encontrar una película de Flash 7, el plug-in a tratar de jugar, lo que podría causar un comportamiento extraño.
  • Algunos métodos de Flash satay de no transmitir la película de Flash en el reproductor – Así que este método puede requerir películas swf «poseedor» de que su película se carga en hacerlo. Esto hace que pasar las variables de los parámetros FlashVars una molestia y lo convierten en un dolor para mantener el contenido de Flash como usted ahora tiene los archivos swf doble flotando alrededor de su servidor web.
  • Las versiones más antiguas de Safari ignoran param etiquetas – Hasta la versión 2.0 (en Tiger) o 1.3 (en Panther) y posiblemente 1.2.8 (pre Panther) Safari por completo caso omiso de los param de etiquetas. Esto significaba que si se trató de establecer otras opciones de uso de ellos, como FlashVars o Alinear, salign, etc Safari no ver esos valores.

3) DETECCIÓN: LA PELÍCULA ‘PEQUEÑO FLASH EN LA PÁGINA DE ÍNDICE «MÉTODO

Este método consiste en colocar una película de Flash solo en la página de índice de su sitio web, y esta película Flash a continuación, comprueba la $version variable en el reproductor de Flash y redirige al usuario que el contenido Flash en el sitio, o una página de actualización.

Los problemas con este método incluyen:

  • Hay noplug en la detección de las páginas internas. – Si un usuario envía una dirección URL interna a otro usuario, que no pasa por el nuevo usuario la detección de Flash en la página de índice.
  • Con los cambios debidos a la patente de Eolas, los usuarios tendrán que hacer clic sobre el contenido de Flash para activarla antes de poder interactuar con él. Más información aquí .
  • No es válido HTML o XHTML – Una vez más, la etiqueta embed para colocar las películas de Flash en los documentos HTML no se validará.
  • Perjudica su posición en los buscadores – Ya que ahora están utilizando su página de inicio como una página de la detección de Flash vacío, cuando la gente busca para usted en Google u otros motores de búsqueda, a menudo el texto de descripción termina apareciendo como «La detección de Flash Player» o incluso no descripción en absoluto. Esta es una enorme pérdida de bienes raíces de primera página que se debe utilizar para promocionar su empresa o productos. A menudo los desarrolladores veces no se incluya un enlace a la de otros contenidos en el sitio (ya que la película Flash contiene los enlaces) para que el resto del sitio no se indexarán bien.

4) EL ADOBE FLASH PLAYER KIT DE DETECCIÓN

Adobe ha hecho un excelente trabajo con el nuevo kit de detección de Flash 8 – pero no lo suficiente como excelente. Contiene dos modos diferentes para detectar el plugin de Flash:

  1. El clásico «pequeña película Flash en la página de índice» – (ver más arriba)
  2. Javascript – Sí, es cierto, Flash ahora incluye un Javascript plug-in de detección de la plantilla. Por desgracia, no es muy muy fácil de usar en todo, la mezcla de Javascript, VBscript, y todo el HTML todo en una sola página. Esto tiene muchos de los inconvenientes anteriores de detección de Javascript y las técnicas de integrar, y no hace nada para hacer tu vida más fácil, como un desarrollador de Flash / HTML.Y no se han validado como XHTML o HTML (Si usted se preocupa por ese tipo de cosas).

He reunido una mayor información sobre la búsqueda en el kit de detección de Adobe aquí.

5) UTILIZAR JAVASCRIPT PRIMAS PARA DETECTAR E INTEGRAR SUS PELÍCULAS

Es difícil criticar este método, ya que por lo general varía de un sitio a otro. Sin embargo, la mayoría de los sistemas de detección de Javascript flash que me he encontrado por lo general sufren de los mismos defectos:

  • Plug-in de detección no fiable – A menudo, la detección sólo funciona con las versiones actuales de Flash Player, y se debe actualizar manualmente las nuevas versiones de los plug-in se liberan.
  • Añade más código a la página – haciendo aún más difícil de actualizar o modificar su contenido. Este método también hace más difícil para los diseñadores o de otras personas que pueden estar trabajando con sus páginas para cambiar o añadir películas Flash.
  • Una solución muy complicado – Muchos scripts incrustar Flash pueden crecer a tamaños de archivos de gran tamaño o ser excesivamente complicado. SWFObject está diseñado para ser simple y pequeño.

Preguntas frecuentes

SWFObject tiene ahora un foro para gente que busca ayudar a su aplicación. Por favor, envíe todas las solicitudes de apoyo al foro, hay un montón de gente capaz para ayudarlo.

P. ¿Qué es «esto de Internet Explorer actualización de contenido activo«He estado oyendo acerca, y lo hace SWFObject arreglarlo?
R. La respuesta corta es sí, SWFObject se solucionará el ‘activar el contenido activo «problemas en la nueva actualización de IE. Leer más sobre el tema aquí .
P. ¿Por qué el contenido alternativo parpadear rápidamente en la pantalla antes de que mi carga de contenido de Flash? (Sólo ocurre en IE en Windows)
A. Esto parece estar relacionado con el FOUC error. Se puede corregir mediante la adición de una etiqueta de vínculo en la cabeza de su documento a cualquier estilo.
P. ¿Puedo usar SWFObject para insertar más de un SWF en una página HTML?
R. Sí. Sólo dar a cada SWF y cada elemento div o HTML que contendrá un archivo SWF un identificador único.
P. ¿Cómo puedo hacer funcionar SWFObject en Netscape 4.x?
A. Este comentario tiene un código de ejemplo que puede utilizar para hacer funcionar SWFObject en Netscape 4.x
P. ¿Puedo usar SWFObject con mi blog?
R. Sí, hay un par de plugins para WordPress y Textpattern aquí .
P. ¿Puedo usar SWFObject con Dreamweaver o GoLive?
R. No es una extensión de Dreamweaver disponible en CommunityMX .Actualmente no existe una extensión Golive, pero si usted desea hacer una, con mucho gusto voy a enlazar desde esta página. Usted debe ser capaz de utilizar el script SWFObject sin una extensión, pero la extensión debe hacer mucho más fácil.
P. ¿Es esta página disponible en otros idiomas?
A. Esta es una traducción al francés de las partes de esta página, una traducción al sueco , italiano , alemán , español , noruego , polaco (parcial) , japonés ,portugués (brasileño) , chino , y aquí hay una traducción al finlandés . Si alguien quisiera traducir esta página en otros idiomas, yo estaría encantado de hacer una referencia aquí.
P. ¿Existe una plantilla de publicación que pueda usar con Flash?
R. Sí. Usted puede descargar uno de los blog de ​​Flash líquido .
P. ¿Quién utiliza SWFObject / FlashObject?
Sitios web como A. La Biblioteca del Congreso , Adobe.com (Una versión ligeramente a medida), Amazon.com , Windows.com , YouTube.com , skype.com, Snapple.com , que se incluye con Adobe Photoshop ( en la web de Flash galería de fotos ) y miles de personas. Colin Moock también lo sugiere como una alternativa al kit de detección de Adobe.

Todavía tiene problemas? Trate de leer a través de los posts anteriores SWFObject [ 1 , 2, 3 ] de este blog (en especial los comentarios), como las preguntas más frecuentes han sido cubiertos allí.

GRACIAS

Toby Boudreaux me dio toneladas de consejos, ayudó a hacer el código más limpio SWFObject mucho y el nombre del espacio de todo al mismo tiempo.

Publicado en INTERNET, Programación

1 comentario

Etiquetas: ,