Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Currently Browsing: Tutorials

Create a 2 columns elastic CSS layout with Flexi CSS Layouts Dreamweaver extension

A liquid layout is percentage based. In other words, a 100% width layout will span to the entire screen, regardless of the user’s resolution. When using a liquid layout the content will take advantage of all the available space which is good if you have a lot of text. As a best practice for keeping the layout readable, you should set a max width and min width: for example the min width 960px means the layout will not shrink below the 1024×768 resolutions and the max width 1260px will not let the layout get bigger than the 1400px screen resolution. If you started the layout as a liquid layout and want the rows inside also liquid (adjust themselves to the screen resolution and keep proportions) then all the divs inside are calculated as a percentage of their parents. You can as well mix fixed columns with liquid columns.

Universal AIR XML Generator – a review By Pablo Lara H

This is a guest post by By Pablo Lara H
http://pablolarah.cl/

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

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

Updating the Flashgallery.org images without manually write the XML

For the purpose of the tutorial, let’s assume you have installed the www.flashgallery.org slideshow on your site. The gallery comes with a folder where the images are stored, the HTML image that includes the slideshow the SWF file and the XML file. The Universal AIR XML Generator helps you to add images in the gallery folder and fills in the XML file that is used by the flash gallery in the demo page:

Flash Gallery files
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.

Page 1 of 121234510...Last »