englishwechsel zuDeutsch

Examples

This website, for example:

This website only has one index-file, no pages else. This dynamic created file delivers everything else using the server putting it togethet, even if you see it different in the address bar of your browser.

This makes it easy to change or expand the content including any navigation items, as well as the grafic layout.

If you're no specialist, you can stop reading here, just technical facts follow:

» LAMP ([Operating-system:Linux][Web-server:Apache][Datase:MySQL][Interpreter:PHP])
» Apache mod-rewrite
» CSS (Cascading Style Sheet)

You can verify nice written code at the very bottom.

Here the history of Root Art with printscreens*:

printscreen_v_0001
At first there must be a concept, creating database, local vhost for development. plus ordering the domain within ctreating e-mails, for sure. Finally I write the first code what in fact is the connection to the database with PHP, create folders to give it a logical structure, knowing we want to show some technical high-end features, valid HTML with CSS, URL-rewrite, search engine optimizion, and so on. I get the Logo from art, just because I don't like black websites very much I start with white background.

printscreen_v_0002
We decided to give root and art a navigation each. I keep classic setup: 3 rows and 3 columns, with the main content in the center. The colors of the containers help me positioning. Read out the browsers language works as well now, but will bring me into trouble later: basically default is a file as well.

printscreen_v_0003
Being happy with the containers positions I check if the productive server allows rewrite. But my local rewrite rules don't work with my default page, I remember myself not to forget the canonical tag to avoid a Google duplicate content penalty: you have to keep an eye on that everytime you use URL rewrite, as well as for exploits.

printscreen_v_0004
Last corrections of the containers positions it's time to bring some color into the site. The footer shows actual date English and German format, and the visitors IP, both easy functions in PHP.

printscreen_v_0005
Some background colors, the containers are ready to get some visual elements. At this stage I take the image from art apart into small ... very small objects: 1 pixel width or height making them able to be repeated vertically or horizontally. This reduces traffic and makes the website comfortable to surf because it's fast. But, e.g. the main content box has a dynamic height. At this stage art can't help anymore because it turns into mathematics.

printscreen_v_0006
The small images are included, the database has basic content; why not go online? Done in a second I'm catched from two problems: the default thing and the thing within the rewrite, plus the fact art thinks the logo is to small. After refusing first, I agree the look of the site is a little to ... well: simple. This new idea makes me sweating because I have to redesign the whole CSS and the includes.

printscreen_v_0007
So, I invert everything and put a large logo into the center, stop trying to adjust the existing setup and start new, almost from scratch.


printscreen_v_0008
Like for the basic setup I continue moving colored the containers of the CSS.


printscreen_v_0009
For this prinscreen I wanted to show some nice video from the band Rammstein, but as you can see it failed this time. Art told me to try that with a freezed frame of the video. I'll give it a try ... in future.

printscreen_v_0010
You can get where the journey is going to: the dynamic generated navigation shall be round the logo at the left and at the right. Great idea from art! In fact I really had to use some trigonometric funktions so solve that. Did remind me to some maths lesson in school.

printscreen_v_0011
Again, the div-containers have to be adjusted, next is making the system able to calculate the positions and margin of the navigation elements by itself.

printscreen_v_0012
We argue about the main-content box. I recommend to keep it white without any image in the background: as soon as there's content with some pictures it'll look balanced pretty much, I think. Right now, almost black text on white background is looking empty, for sure, because it is empty.

printscreen_v_0013
We're ready to go online with the new design, just few pixel-corrections to do. Art isn't happy with the position of the language selection; we test some frames around the whole page in addition.

printscreen_v_0014
The actual version is fed with content. Knowing search engines like text I start typing like a horse. Translations block a little, but I try to keep both languages content up to date. And: I recognized W3Cs validators have problems with default-pages as well.

printscreen_v_0018
Thanks the hint from art the printscreen of the Rammstein-video worked as freezed frame.

printscreen_v_0019
A browser agent CSS selector for IE 7 and below has been added. Astonishing people still surf with IE 6.

printscreen_v_0020
I'm still not happy with the main navigation: looks a lottle lost without background images. We try out some examples at the test-server. Remote-loaded validator images are moved to the production-server to be independant from that server; in addition GZIP-compression is enabled via PHP, increasing our website speed to optimize for users and search-engines.

printscreen_v_0021
Art forced me to invert the main-content finally, we worked on the background as well, added some JS for the navigation layer for Art, and added much content ... most of it pictures, no surprise from a designer.


*GUI, a Debian Lenny with KDE, intentionally shown to deliver some information about me, like date, pp. For the geeks: please do not try out to hack any server you'll find there; just send me an e-mail.