Category 'Tutorials'


Unobtrusive Simple TabStrip

USimpleTabStrip Unobtrusive JavaScript is to improve the classic anchor links (yet) within an HTML page. This source is an improvement of the function presented in Unobtrusive Tabstrip . In this version as well as align the Code with Release 1.6 of prototype.js has created a real class to manage the TabStrip. The release presented here is very simple and straightforward. His main work lies in adding a click event to the normal link anchor. CSS styles are also not presented, just to leave the maximum freedom of action, but you can get an effective TabStrip with a few extra lines of CSS code, see Adding CSS styles below.

HTML

The class USimpleTabStrip working on a simple HTML, the anchor sftuttando ( <a name></a> ):

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 list of links on the page ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < will > < a href = "# tbs1"> Link 1 </ a > </ them >
= "#tbs2" > Link 2 < / a >< / li > < will > < a href = "# tbs2"> Link 2 </ a > </ them >
= "#tbs3" > Link 3 < / a >< / li > < will > < a href = "# tbs3"> Link 3 </ a > </ them >
</ ul >

<! - Blocks / tabs ->

"tbs1" >< / a > < a name = "tbs1"> </ a >
< div >
h1 > < h1 > Listing # 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < a name = "tbs2"> </ a >
< div >
h1 > < h1 > Listing # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < a name = "tbs3"> </ a >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. The tag div just below the anchor a work as a container.

Continued ...

Actionscript 3.0 for beginners: lesson # 1

Premise

Actionscript 3.0 can be a good starting point to become familiar, those unfamiliar with C programming and / or C + +, orioentata programming (OOP). In addition, this series of lessons will be useful to those coming from other rooms or from earlier versions of Flash.

Set a project

In this first lesson we will see how to set up a project Flash CS3 generic. It is good to use when the projects are expected to have to deal with at least more than one file. The use of the project was introduced - by Macromedia - already in versions prior to CS3, so it should be a subject known to developers Actionscript 2.0.
However with Actionscript 3.0 - as we shall see - it is possible to create a Actionscript (. Pbuh) to the document-root movie ours. Fla so to speak. This feature is very useful and also makes a project minimum of at least two files: the. Fla. As associated. For this reason, you will "always" from a project, so right now organizing the various files (. Fla,. As, ...) that will be part of our "package" of development.
Also, once you learn the dimesticazza with the philosophy to objects, instrinseca in this type of language, end up with many files will be normal, even for simple projects substantially.

Continued ...

Using Templates to create a WordPress Sitemap

There is a feature in WordPress, sometimes overlooked, which makes it very versatile, especially for those who create themes: the use of templates! A Template is not just a file included in the theme folder. To identify it as a template just insert a special comment at the beginning of the file in PHP:

1
2
3
/ *
Template Name: Sitemap
* /

Using this feature, you can create a blank page, with the standard procedure of WordPress, and connect it to our template. If you create a file, for example sitemap.php (adding the comment shown above) and loaded in the folder of your theme, you will notice that the editor during the creation of a WordPress page (not a post) menu Template (below) will contain the name of the template file is loaded. As indicated in the template section:

Some themes have custom templates you can use for certain pages that may contain additional features or custom graphics. [...]

I, for example, I used this feature to create a dynamic page (which then executes PHP code) can show a real sitemap for your blog.

Creating a page Sitemap

First create a file sitemap.php and upload the folder of your theme. WordPress by creating a new page, give it a name and select the template from the menu that is located below the editor! Finished!

The template, as part of the theme, it also contains all the structure of the theme itself is therefore important to know and write properly. But here is a skeleton of a Sitemap that you can modify to reflect the theme you have installed:

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
/ *
Template Name: Sitemap
* /
?>
<? Php get_header ();?>
"content" > < div id = "content">
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 > < small class = "date-time"> <? php the_time ('lj F, Y')?> </ small >
"entry" > < div class = "entry">
href = "<?php bloginfo('url'); ?> " alt=" <?php bloginfo ( 'name' ) ; ?> ">Home < / a >< / strong >< / p > < p > < strong > < a href = "<? php bloginfo ('url');?>" alt = "<? php bloginfo ('name');?>"> Home </ a > </ p > </ p >
h3 > < h3 > Page </ h3 >
< ul >
; ?> <? Php wp_list_pages ('title_li =');?>
</ ul >
h3 > < h3 > Post </ 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 > < will > < a href = "<? php the_permalink ()?>" rel = "bookmark" title = "Permanent Link to <? php the_title ();?>"> <? php the_title ();?> </ a > </ them >
<? Php endwhile;?>
</ ul >
h3 > < h3 > Monthly Archives </ h3 >
< ul >
; ?> <? Php wp_get_archives ('type = monthly');?>
</ ul >
h3 > < h3 > Category </ h3 >
< ul >
; ?> <? Php wp_list_categories ('title_li = 0');?>
</ ul >
h3 > < h3 > RSS Feeds / 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 > < will > < a href = "<? 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 feeds </ a > </ them >
= "<?php bloginfo('rss_url'); ?> " alt="RSS 0.92 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 0.92 feed < / a >< / li > < will > < a href = "<? php bloginfo ('rss_url');?>" alt = "RSS 0.92 feed"> < acronym title = "Really Simple Syndication"> RSS </ acronym > 0.92 feed </ a > </ them >
= "<?php bloginfo('rss2_url'); ?> " alt="RSS 2.0 feed"> < acronym title = "Really Simple Syndication" > RSS < / acronym > 2.0 feed < / a >< / li > < will > < a href = "<? php bloginfo ('rss2_url');?>" alt = "RSS 2.0 feed"> < acronym title = "Really Simple Syndication"> RSS </ acronym > 2.0 feeds </ a > </ them >
= "<?php bloginfo('atom_url'); ?> " alt="Atom feed">Atom feed < / a >< / li > < will > < a href = "<? php bloginfo ('atom_url');?>" alt = "Atom feed"> Atom feed </ a > </ them >
</ ul >
</ div >
</ div >
<? Php endwhile, endif;?>
</ div >
<? Php get_sidebar (); get_footer ();?>

Continued ...

Photoshop tutorial: techniques of reflection

From the Apple Web 2.0 images "reflected" Intrenet flooded. Often abused, however, are always impressive. Know how to make good business is not complicated and, with a Pizzoc of imagination, you can make it less "obvious" and "discount" ... if you can not do without.

The basics of SLR

First of all let's see how to set up a basic reflection. The technical basis for setting a reflection, at least my favorite and I use all the time, is simple and fast implementation. This method allows the maximum freedom to make changes later, and preserves transparency in case you want to save the image to PNG 24 with transparency.

Loading Flash ...

1. Phosotoshop As always, open and load the image we want to reflect on a specific layer
2. Duplicate our layer (drag the layer icon to duplicate image ) And nominiamolo "shadow" or "reflex"
3. From the "Edit" menu select "Transform" / "Flip Vertical"
4. Drag the new layer "reflex" below the original layer and the base of the original layer spostiamolo
5. We select the layer "reflex" and holding down the ALT key, add a mask by clicking on the icon image "Masks" in the tool window layer, the layer "reflex" should disappear
6. We select the mask in the layer "reflex" and click on image Filling
7. We set up a gradient from black or white to transparent: image
8. Draw the gradient from the center of the original layer in the middle layer of the "reflex"

Continued ...

Flash Text Replacement Techniques

The Text Replacement technique that I present today is in some respects, very interesting. Unlike the classical image using CSS to replace operation , this technique uses a Flash movie to overwrite the titles of our site. Despite being a little more complex, requiring the creation of a Flash movie and the use of JavaScript, produces a number of considerable advantages:

  • Keeps the 'accessibility to the site using a True-Unobtrusive Javascript- so that crawlers and spiders continue to see the page as simple and correct HTML
  • It does not require the creation of n by n image titles. Only one movie to replace all the titles of our site, with a considerable saving in terms of the Download
  • Also allows you to create simple titles but not normally used fonts on the Web
  • Text can be rendered in HTML, thanks to the features of Flash
  • The text is selectable
  • As you can insert a Flash movie and interactive animations of any kind

You will note, also, that in this procedure are practically no CSS considered!

Continued ...

Text Replacement Techniques for HTML / CSS

The correct way to insert a title in graphics on a Web page is to replace operation with style sheets (see Progressive Enhancement in Accessibility and Usability: unobtrusive JavaScript ). This technique allows you to make content more accessible site regardless of the display graphics set by style sheets. Also, crawlers and spiders, have a correct reading of HTML, ignoring the replacement graphics offer the end user. Insert a picture directly (TAG img ), in fact, make the title text inaccessible to ordinary readers ASCII (crawlers, spiders, blog plugins, screen readers, etc ...).

Continued ...

OnAir: Choose the video with the new on-demand

On OnAir of Undolog is now possible using on-demand made ​​by the player disposizine Mogulus .

Report video

If you have video signal contact , I will be happy - if possible - include them in the schedule of Undolog / OnAir

Continued ...

PicLens 2.0 in Flash with Papervision3D: Part II

This time (see PicLens in Flash with Papervision3D 2.0 ) public code ( PicLens.as ), I had to revise some parts of code, align it with the latest release of Papervision3D 2.0 Great White and I made ​​some adjustments and additions.

Continued ...

Create a preloader in Actionscript 3.0 Generic

It may seem a predictable and already exhausted, but with Flash CS3 and the new management of document classes (package) permitted in Actionscript 3.0, is not fully functional immediately create a preloader. The latest release of Flash, in fact, manages to load the movie in a different way from previous versions. On the net you can find different proposals and solutions to create a preloader "old school". However, several examples I found did not satisfy me fully as they require to alter the movie so that it works like a classic preloaders. In practice, when you develop must always remember "this thing I have to do so otherwise the preload does not work"! And for movies already filled in, then?

Loader

The solution I have adopted, at least for now, was to make a movie outside (my loader - see example ) able to load any movie outside, including a picture! This solution, although it requires basically two movies (the loader and the FILAME true), it becomes economical only if you can create a loader that can be used over and over again, that is able to upload any movie, any resolution and any frame rate.

Continued ...

Reflex and ReflexMe: from base class to class

In the post Flash CS3: Create a reflex effect on any MovieClip we saw how you can write a class that extends MovieClip, to connect it to DesignTime to any MovieClip in the library. I discovered, however, that may be more useful and economical path to the contrary. I created a class Reflex ( Reflex.as ), with the intention of using it exclusively by code. I created this class thinking of moving the pointer in the constructor to a MovieClip. , ma leggermente modificato in modo da poter funzionare espressamente da codice: The new class Reflex contains essentially the same code inserted in the first ReflexMe , but slightly modified so as to work specifically by code:

1
2
3
4
/ /
sfx .*; undolibrary imports. .* sfx;
/ /
Reflex = new Reflex ( movieClipInstance ) ; var rx: = new Reflex Reflex (movieClipInstance);

Continued ...