Artículos con la etiqueta 'Tutoriales'


jQuery: cómo construir una extensión de Plugins

Al igual que todas las bibliotecas de este tipo también jQuery le permite extender su funcionalidad básica el uso de plugins real. Respetando las reglas de su funcionamiento, es decir, el retorno es siempre un puntero al elemento seleccionado o jQuery sí mismo, usted puede escribir un plugin con unas pocas líneas de código. Tomemos por ejemplo el proyecto de código en jQuery contra todos: un punto de referencia con 5 explorador , que era (después de la corrección reportados por Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; si (.. $ (this) siguiente () es (:) "ocultos") slideDown $ (this) al lado de () (); más $ (this) siguiente () slideUp ();....
}
);

Continuación ...

ActionScript 3.0 para principiantes: lección # 2

Según lo prometido aquí está la segunda lección en ActionScript 3.0! Hoy comenzamos el análisis de un proyecto simple que reproduce el juego o el Tic Tac Toe Tic Tac Toe. Traté de incluir algunas características especiales en este ejemplo, ActionScript 3.0, tratando de dar espacio a la comprensión y no en el estilo. De ello se desprende que si tuviera que escribir el "juego" en realidad, probablemente habría estructurado de manera muy diferente, pero en este caso he intentado mediar entre un programa clásico, con un hermético compacto, más comprensible para los principiantes.

Continuación ...

Acordeón simple con la clase USimpleTabStrip

La clase USimpleTabStrip , presentó TabStrip simple discreto , también se puede utilizar para crear un sencillo menú de acordeón .
offerti da Scriptaculous : Uso de los efectos de BlindUp() y BlindDown() ofrecidos por Scriptaculous :

1
2
3
4
5
6
7
8
9
10
la función init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Efecto BlindDown nuevo (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Efecto BlindUp nuevo (s);
}
}

Y la reubicación de los elementos HTML ( código HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "acordeón">
"#acc1" > Accordion 1 < / a > < un href = "# ACC1"> Accordion 1 </ un >
"acc1" >< / a > < un name = "ACC1"> </ un >
< div >
h1 > < h1 > # 1 de contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < un href = "# ACC2"> Acordeón 2 </ un >
"acc2" >< / a > < un name = "ACC2"> </ un >
< div >
h1 > < h1 > # 2 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < un href = "# ACC3"> Acordeón 3 </ un >
"acc3" >< / a > < un name = "ACC3"> </ un >
< div >
h1 > < h1 > # 3 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

</ div >

Usted recibe un acordeón menú simple que se puede utilizar muy rápidamente.

Continuación ...

TabStrip simple discreto

USimpleTabStrip discreto JavaScript es mejorar los vínculos de anclaje clásico (todavía) en una página HTML. Esta fuente es una mejora de la función presentada en el de Tabstrip discreto . En esta versión, así como alinear el código de la Versión 1.6 de prototype.js ha creado una clase real para gestionar el TabStrip. La liberación se presenta aquí es muy simple y directo. Su trabajo principal consiste en la adición de un evento de clic al enlace normal de anclaje. Estilos CSS tampoco se presentó, sólo para dejar la máxima libertad de acción, pero usted puede conseguir un TabStrip eficaz con unas pocas líneas adicionales de código CSS, consulte Adición de estilos CSS a continuación.

HTML

La clase USimpleTabStrip trabajando en un HTML simple, la sftuttando de anclaje ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<-! Simple lista de enlaces de la página ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# tbs1"> Link 1 </ un > </ a >
= "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Link 2 </ un > </ a >
= "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Link 3 </ un > </ a >
</ ul >

<-! Bloques / pestañas ->

"tbs1" >< / a > < un name = "tbs1"> </ un >
< div >
h1 > < h1 > Listado # 1 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs2" >< / a > < un name = "tbs2"> </ un >
< div >
h1 > < h1 > Lista # 2 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs3" >< / a > < un name = "tbs3"> </ un >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

funziona da contenitore. La etiqueta div justo por debajo del ancla a el trabajo como un contenedor.

Continuación ...

ActionScript 3.0 para principiantes: lección # 1

Premisa

ActionScript 3.0 puede ser un buen punto de partida para conocer, quienes no están familiarizados con la programación en C y / o C + +, orioentata de programación (OOP). Además, esta serie de lecciones será útil para los que vienen de otras habitaciones o de versiones anteriores de Flash.

Establecer un proyecto

En esta primera lección veremos cómo configurar un proyecto de Flash CS3 genéricos. Es bueno utilizar cuando los proyectos se espera que para hacer frente a por lo menos más de un archivo. El uso de este proyecto fue presentado - por Macromedia - ya en versiones anteriores a CS3, por lo que debe ser un tema conocido para los desarrolladores de ActionScript 2.0.
Sin embargo, con Actionscript 3.0 - como veremos - es posible crear una Actionscript (saws.) Para la película-documento raíz nuestra Fla por así decirlo.. Esta característica es muy útil y también hace un mínimo de proyectos de al menos dos archivos:. La Florida como asociados. Por esta razón, que "siempre" de un proyecto, por lo que ahora la organización de los diferentes archivos (. Fla,. As, ...) que formarán parte de nuestro "paquete" de desarrollo.
Además, una vez que aprenda el dimesticazza con la filosofía de los objetos, instrinseca en este tipo de lenguaje, acaban con muchos archivos será normal, incluso para proyectos sencillos sustancialmente.

Continuación ...

Uso de plantillas para crear un mapa del sitio WordPress

No es una característica de WordPress, a veces pasado por alto, lo cual lo hace muy versátil, especialmente para aquellos que crean temas: el uso de plantillas! Una plantilla no es sólo un archivo incluido en la carpeta del tema. Para identificar como una plantilla sólo tiene que insertar un comentario especial al principio del archivo en PHP:

1
2
3
/ *
Nombre de la plantilla: Mapa del sitio
* /

Al utilizar esta función, puede crear una página en blanco, con el procedimiento estándar de WordPress, y conectarlo a nuestra plantilla. Si crea un archivo, por ejemplo sitemap.php (agregando el comentario se muestra arriba) y se cargan en la carpeta de tu tema, te darás cuenta de que el editor durante la creación de una página de WordPress (no es un post) del menú Plantilla (abajo) contiene el nombre del archivo de plantilla se ha cargado. Como se indica en la sección de plantillas:

Algunos temas tienen plantillas que puede utilizar para ciertas páginas que pueden contener características adicionales o gráficos personalizados. [...]

Yo, por ejemplo, he usado esta característica para crear una página dinámica (que luego se ejecuta el código PHP) pueden mostrar un verdadero mapa de tu blog.

Creación de un Sitemap página

Primero cree un archivo sitemap.php y cargar la carpeta de tu tema. WordPress mediante la creación de una nueva página, darle un nombre y seleccione la plantilla en el menú que se encuentra por debajo del editor! ¡Ya está!

La plantilla, como parte del tema, sino que también contiene toda la estructura del tema en sí es importante conocer y escribir correctamente. Pero aquí hay un esqueleto de un sitio que se pueden modificar para reflejar el tema se ha instalado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<Php
/ *
Nombre de la plantilla: Mapa del sitio
* /
>
<? Php get_header ();?>
"content" > < div id = "contenido">
have_posts ( ) ) : the_post ( ) ; ?> ? <Php if (have_posts ()): while (have_posts ()): the_post ();?>
"post" id = "post-<?php the_ID(); ?> "> < div class = "post" id = "post-<? php the_ID ();?>">
h2 > < h2 > <? php the_title ();?> </ h2 >
"date-time" ><?php the_time ( 'lj F, Y' ) ?>< / small > < pequeña class = "fecha y hora"> <? php the_time ('lj F, Y')?> </ pequeño >
"entry" > < div class = "entrada">
href = "<?php bloginfo('url'); ?> " alt=" <?php bloginfo ( 'name' ) ; ?> ">Home < / a >< / strong >< / p > < p > < fuerte > < un href = "<? php bloginfo ('url');?>" alt =" <? bloginfo php (' nombre');?>"> Inicio </ un > </ p > </ p >
h3 > < h3 > Página </ h3 >
< ul >
; ?> <? Php wp_list_pages ('title_li =');?>
</ ul >
h3 > < h3 > entrada </ h3 >
< ul >
) ; <Php $ archive_query = new WP_Query ('showposts = 1000');
while ($ archive_query-> have_posts ()): $ archive_query-> the_post ();?>
= "<?php the_permalink() ?> " rel="bookmark" title="Permanent Link to <?php the_title ( ) ; ?> "> <?php the_title ( ) ; ?>< / a >< / li > < a > < un href = "<? php the_permalink ()?>" rel =" bookmark "title =" Enlace Permanente <? php the_title ();?>"> <? php the_title ();?> </ uno > </ a >
<? Php endwhile;?>
</ ul >
h3 > < h3 > Archivos mensuales </ h3 >
< ul >
; ?> <? Php wp_get_archives ('type =');?> mensuales
</ ul >
h3 > < h3 > Categoría </ h3 >
< ul >
; ?> <? Php wp_list_categories ('title_li = 0');?>
</ ul >
h3 > < h3 > RSS / FeedBurner </ h3 >
< ul >
= "<?php bloginfo('rdf_url'); ?> " alt="RDF/RSS 1.0 feed"> < acronym title = "Resource Description Framework" > RDF < / acronym > / < acronym title = "Really Simple Syndication" > RSS < / acronym > 1.0 feed < / a >< / li > < a > < un href = "<? bloginfo php ('rdf_url');?>" alt =" RDF / RSS 1.0 feed "> < siglas título = "Resource Description Framework"> RDF </ siglas > / < siglas título = "Really Simple Syndication"> RSS </ siglas > 1.0 canales </ un > </ a >
= "<?php bloginfo('rss_url'); ?> " alt="RSS 0.92 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 0.92 feed < / a >< / li > < a > < un href = "<? php bloginfo ('rss_url');?>" alt =" RSS feed 0,92 "> < siglas título = "Really Simple Syndication"> RSS </ siglas > 0,92 feed </ un > </ a >
= "<?php bloginfo('rss2_url'); ?> " alt="RSS 2.0 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 2.0 feed < / a >< / li > < a > < un href = "<? bloginfo php ('rss2_url');?>" alt =" RSS 2.0 feed "> < siglas título = "Really Simple Syndication"> RSS </ siglas > 2,0 alimenta </ un > </ a >
= "<?php bloginfo('atom_url'); ?> " alt="Atom feed">Atom feed < / a >< / li > < a > < un href = "<? bloginfo php ('atom_url');?>" alt =" Atom feed "> Atom </ un > </ a >
</ ul >
</ div >
</ div >
<? Php endwhile, endif;?>
</ div >
? <Php get_sidebar (); get_footer ();?>

Continuación ...

Tutorial de Photoshop: Técnicas de reflexión

A partir de las imágenes de Apple Web 2.0 "refleja" inundado Intrenet. Se abusa a menudo, sin embargo, son siempre impresionantes. Sabe cómo hacer un buen negocio no es complicado y, con un Pizzoc de la imaginación, puede hacer que sea menos "evidentes" y "descuento" ... si usted no puede prescindir.

Los fundamentos de la SLR

En primer lugar vamos a ver cómo configurar una reflexión básica. La base técnica para el establecimiento de un reflejo, al menos mi favorito y yo uso todo el tiempo, es la aplicación simple y rápida. Este método permite la máxima libertad para hacer cambios más adelante, y mantiene la transparencia en el caso de que desee guardar la imagen en PNG 24 con la transparencia.

Cargando flash ...

1. Phosotoshop Como siempre, abrir y cargar la imagen que queremos reflejar en una capa específica
2. Duplicar nuestra capa (arrastrar el icono de la capa de duplicar imagen ) Y nominiamolo "sombra" o "reflejo"
3. Desde el menú "Editar" seleccione "Transformar" / "Voltear vertical"
4. Arrastre la nueva capa "reflejo" de debajo de la capa original y la base de la capa original spostiamolo
5. Seleccionamos la capa "reflejo" y manteniendo presionada la tecla ALT, añadir una máscara haciendo clic en el icono imagen "Las máscaras" en la capa de ventana de la herramienta, la capa "reflejo" debe desaparecer
6. Seleccionamos la máscara en la capa "reflejo" y haga clic en imagen Relleno
7. Hemos creado un degradado de negro o de blanco a transparente: imagen
8. Dibuja el gradiente desde el centro de la capa original en la capa media del "reflejo"

Continuación ...

Flash Técnicas de texto de reemplazo

La técnica de reemplazo de texto que hoy presento es en algunos aspectos, muy interesante. A diferencia de la clásica imagen usando CSS para reemplazar a la operación , esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. A pesar de ser un poco más complejo, que requiere la creación de una película Flash y el uso de JavaScript, produce una serie de ventajas considerables:

  • Mantiene el acceso a la página mediante un Verdadero discreto Javascript para que los rastreadores, arañas seguir viendo la página como HTML simple y correcta
  • No requiere la creación de n por n títulos de imagen. Sólo una película para reemplazar todos los títulos de nuestro sitio, con un ahorro considerable en términos de la descarga
  • También le permite crear títulos simples pero no las fuentes normalmente se utilizan en la Web
  • Texto se puede representar en HTML, gracias a las características de Flash
  • El texto se puede seleccionar
  • Como se puede insertar una película Flash y animaciones interactivas de cualquier tipo

Se le nota, además, que en este procedimiento son prácticamente CSS en cuenta!

Continuación ...

Técnicas de texto de reemplazo de HTML / CSS

La forma correcta de insertar un título en los gráficos en una página Web es para reemplazar a la operación con las hojas de estilo (ver la mejora progresiva en Accesibilidad y Usabilidad: discreto JavaScript ). Esta técnica le permite hacer más accesible el contenido del sitio, independientemente de la visualización de gráficos establecidos por las hojas de estilo. Además, los robots, arañas, tienen una lectura correcta de HTML, haciendo caso omiso de los gráficos de reemplazo ofrecer al usuario final. Insertar una imagen directamente (TAG img ), de hecho, que el texto del título inaccesible para los lectores ordinarios ASCII (rastreadores, arañas, plugins blog, los lectores de pantalla, etc ...).

Continuación ...

Cuenta regresiva en 3D con FIVe3D

Yo escribí una clase CountDown para ActionScript 3.0. Para probar lo que he creado un ejemplo que utiliza las capacidades de renderizado de texto FIVe3D .

Haga clic para abrir la película de Flash

Continuación ...