Implement your Flash Showcase
Once your script is cleaned out and reduced to what you actually need as described yesterday and as done at last night’s Ycademy call, we can implement our project.
Prepare your upload
Before uploading you may already edit the index.html file and add the title of your site as well as the font as the case may be.
Also you can edit style.css to define link colors and other details if needed.
You may also want to edit your site logo:
Ideally the logo file is a transparent PNG image which in this case can be rather wide since we have just a few menu items. The bottom border of the logo is in line with the bottom of the menu items; therefore it is indicated to use capitals for the site header and align them with the bottom of the PNG file.
Example:
Semiomantics Header
For better visibility I have added a background layer on the above. The dimensions are 592 x 60 pixels.
Upload and start populating Semiomantics Evolution
Before uploading the evolution folder you may want to rename it to the folder name it should take on the server; if you upload the site to the domain root (public_html) then you just load the content of the evolution folder without the folder itself.
Once uploaded you may want to start adding a background image (photo of graphic); I have loaded just a background pattern:
Background
For this project I keep a uniform background throughout the whole site; however i would be nice as well to create a nice graphic grunge or photographic background.
Edit menu.xml from your xml folder: define the menu item titles and backgrounds as well as the copyright notice in the footer.
Populate your image gallery (about)
I start now by adding images to my showroom. In fact I am using for this project a showroom gallery instead of the about page: I will oad there graphic images representing my bullet list and then add text to the image legends.
About Semiomantics
The images are created in photoshop in 2 versions: jpg and transparent png. I load both versions to select later the images to keep — may be a mix of jpg and png images. To create the images I just created two layer sizes: 400 x 600 px and 800 x 600 px. Important: the images must be 600 px high. I drop my messages into the pictures using some grungy Times font and using background colors based on my usual color scheme.
The idea here is to use a gallery to replace the About page by graphically representing the main message I want to deliver and allowing for more information attached to each image. (This way of proceeding is not in line with the terms of the contest!)
Populate your Showcase or Portfolio
For the show case I selected screen-shots of websites I have designed and built for Semiomantics. I have selected 30 screen-shots to see the effect and to measure loading time. I will trim this down later and make a representative selection out of the lot. There are also others I may want to add …:-).
Semiomantics Showcase
The screen-shots are mega sizes from 100 kb to over 400 kb, whereas they will be adjusted for faster loading. I am testing flash compression and loading them as swf files which is one of the advantages of this gallery script.
A legend will be associated with each screen-shot; each image is based on a Semiomantics script type or module and can therefore be linked to a category or product in the semiomantics shop.
My recommendation: try to keep the image size as compact as possible for fast loading: ideally below 100 kb per image.
More later.
Related posts:
[…] Post: Ycademy Easter Contest 3 http://yorgonestoridis.com/online-publishing/ycademy-easter-contest-3/ […]
[…] Post: Ycademy Easter Contest 3 http://yorgonestoridis.com/online-publishing/ycademy-easter-contest-3/ […]