XML is extensible markup language. XML is used to link, store, exchange and carry data . In a very simple way, it is a language to build other languages. The other languages are, for example,  MathML, SVG (Scalable Vector Graphics), SMIL and XHTML. It is a language that make easy to tag the information.

Why is important?

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available. And now are known because they are a important part of the HTML5.
All major modern web browsers except Microsoft Internet Explorer (IE), support and render SVG markup directly. The Internet Explorer 9 beta supports SVG.
XHTML (eXtensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.
SMIL, the Synchronized Multimedia Integration Language, is a W3C recommended XML markup language for describing multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows the presentation of media items such as text, images, video, and audio, as well as links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.

So, you are beginning to guess the applications. Those are:

1. It is the language behind the Content Management Systems. And the slideshows of all kind.
2. Use as a language for any kind of documentation.
3. Database development.
4. Flash applications. See this interesting article http://www.graphicmania.net/approach-to-understand-xml-and-flash-workflow/

XML has found a place in the world of e-publishing via EPUB. Electronic Publication (EPUB) is an open ebook standard from the International Digital Publishing Forum (IDPF). This is the format used by Kindle, for example.

Universal AIR XML Generator (UAXG)

The Universal AIR XML Generator can create and update the XML of galleries and slideshows of any site, making the tagging and resize process very simple. It is a drop dead simple to use and it comes in a handy AIR application.

Let’s see how we can create a beautiful gallery.

Step 1 Create a new project.

You have to give a name to the project, select the path (relative and absolute). The UAXG is explaining every step. For example, you can read there that the Relative Paths are recommended for simple urls.

Step 2 Select the template

You have to select a template. It can be a template from the scratch or a slide or gallery given as an option.

The options are CU3ER, XML Flash Slideshow, Flashgallery.org slideshow, SlideShow Box, SlideShowPro and PhotoSlide, PhotoWallFX, Polaroid Gallery and Scrolling Gallery from FlashXML.net. And a new clean template to customize, of course.

In this example I have selected a Custom Template.

Step 3 Select the images and tag them.

As you can see, I have been uploading images and tagging them.  I can add a custom url if I want.

Step 4 Setting the sizes of the images
We have here the parameters for the images. For example, if I need thumbnails and full page previews, I just have to settle the sizes.

Step 5 Adjusting the XML file

And now I can see the skeleton of the XML file. I can add values as link, thumbnail tag, etc, customizing the template if I want.

Step 6 Previewing the XML file

Step 7 Publishing

In this step you can publish for your local host or straight to the web with the FTP option.

Step 8  You have a brand new XML file.

Conclusion:

Universal AIR XML Generator (UAXGis a very easy of use tool for generating or fixing XML files used in web galleries or slideshows. And it has a very affordable price.

Sources

http://en.wikipedia.org/wiki/SVG

http://en.wikipedia.org/wiki/XML

http://en.wikipedia.org/wiki/XHTML

http://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language

http://webdesign.about.com/od/xml/a/aa060401a.htm

http://webdesign.about.com/od/epub/a/look-at-epub.htm

http://webdesign.about.com/od/beginningxml/f/blfaqxmlwhy.htm

http://webdesign.about.com/od/xml/a/aa091500a.htm

http://www.extendstudio.com/blog/2010/11/universal-air-xml-generator-for-slideshows-and-galleries-launched/

—

Pablo Lara H is an illustrator, photographer and web designer currently based in Chile. Visit him at this page http://pablolarah.cl

Flash Gallery files

To run the Flash Gallery slideshow you need to (accordingly to this documentation): place the images in the gallery folder, resize the images to create thumbnails at 70×70px and write the XML to include your images, something like this:

<pic>
<image>gallery/1.jpg</image>
<thumbnail>gallery/s1.jpg</thumbnail>
<caption>Some lamp on the ground</caption>
</pic>

(If you look at the XML, then you should be aware of the following: images and thumbnails are saved in the same folder and there is an additional field for the image caption)

The old way of doing things

Typically if you want to add your own images and descriptions to the gallery you need to:

• resize the images for the thumbnails
• write the XML file manually with the new images and the caption text
• upload everything on the server in the slideshow folder

The easier way to do things

Universal AIR XML Generator is intended to eliminate the manual work with resizing images and writing the XML for slideshows. To explain in a few works, it resizes images and writes XML files following a template. The resized images and the generated XML are then automatically uploaded on your site via FTP. Here is how this works.

www.youtube.com/watch?v=-DjA2_0veJ4

We will animate some text using Creative TextFX and, following, we will animate a movie clip using Creative MovieFX. The result will be a nice animation in the Halloween spirit.

Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need both the Creative MovieFX and Creative TextFX extensions installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.

Read the tutorial here.

Note: this tutorial assumes that you already know the basics of using the Flexi CSS Layouts Dreamweaver extension.

Creating the index page

Create a new empty html file in Dreamweaver. Save the file as “index.html” then find the Flexi CSS Layouts tab and open the Template Gallery. Select the full templates category and select one of the home page templates (for example “Software Product – Home page”). Press “Insert” to add the layout in the page or “Customize layout” if you want to make changes.

Read the tutorial here.

Requirements for this tutorial:

• Adobe Dreamweaver CS3, CS4 or CS5
• Flexi CSS Layouts Dreamweaver extension

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout. Or choose from a wide range of embedded templates for your layout, then customize the layout with your own CSS rules.

Read the tutorial here.

It’s easier than you think if you don’t use URL rewrite permalinks.

• copy the slideshow “/includes” files from the Dreamweaver location to the Wordpress folder (Image Show Pro creates a folder called “includes” in the Dreamweaver site);
• you will need to manually edit the header.php file (location /wp-content/themes/[your template name]/header.php) and add the 3 JavaScript include files to the head section (please copy the ones from Dreamweaver, below are just samples).

<script type=”text/javascript” src=”/includes/ImageShowPro/flash_detect_min.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBanner1.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBannerLayout.js”></script>

• edit the file where you want the slideshow to appear and add the rendering script (for example if you want to replace the typical Wordpress theme with the slideshow, edit the header.php file and add the rendering script there (again, below it’s just a sample):

<!– Banner xtdProBanner1 begin –>
<div id=”xtdProBanner1″ style=”width:760px; height:200px; overflow:hidden;”> <img src=”/slides/picture1.jpg”/> <img src=”/slides/picture2.jpg”/> <img src=”/slides/picture3.jpg”/> </div>
<!– Banner xtdProBanner1 end –>
<!– Banner xtdProBanner1 rendering scripts start –>
<script type=”text/javascript”> xtdProBannerLayout(“xtdProBanner1″,”") </script>
<!– Banner xtdProBanner1 rendering scripts end –>
</div>
<!– BannerPro render begin –>
<script type=”text/javascript” > render_xtd_ispro(); </script>
<!– BannerPro render end –>

If you use URL rewrite permalinks (Day and name, Month and name, numeric or custom) you need to use absolute URLs

You need to change the relative paths to absolute paths (that’s the quickest way to make sure the slideshow will work on all page types: category, post detail, page). Short version: copy the files from Dreamweaver in the Wordpress folder and change the paths to the included JavaScript files and the rendering script with absolute paths; then in one of the JavaScript files, you need to change the paths to the images you use for the slideshow with absolute paths as well.

That’s not very complicated either, but I did write a full tutorial that will go through the Wordpress installation part (just like any good Wordpress fan would do).

You can read the full tutorial here.