Archiv für die Kategorie „Design“

DaDaBIK Revised

Montag, 8. März 2010

DaDaBik is a “Database Interfaces Kreator”, which helps you building web-interfaces to a database easily. It has been developed by Eugenio Tacchini. Since this is a rather old, yet working, piece of software, no wonder there’s a lot of PHP4 involved :O

I did a redesign of the template in late 2009 and took some time this weekend to get it polished up a bit. What I like about DaDaBIK is that you can provide data editing functionality and are able to adjust the look to a clients CI quickly (just replace one logo and change some colours - the PSD is included).

  • Insert data
  • Login
  • Listing

Although the code of DaDaBIK is from another pre-PHP5-decade, I didn’t see much of a need to change the inner workings of DaDaBIK. So what I did is putting some fresh paint on it using CSS. Since there is no template-engine imlemented into DaDaBik, I had to edit core files here and there for simple markup changes. So! The only thing that makes sense is to offer one complete package here: DaDaBik itself and the new design included.

Installation:
If you’re about to use DaDaBIK for the first time, you might want to take a look at www.dadabik.org as well, since there’s a documentation online giving you more insight. Anyways, the setup is quite easy:

  1. Download the archive
  2. Extract the files, and upload the dadabik folder to your server.
  3. Edit the file includes/config.php and enter your DB settings according to your setup.
  4. Open up the URL yourdomain.com/pathtodadabik/install.php.
  5. DaDaBIK will now set up some internal tables and you’re done.

Notes:
It’s important that you have created the database, you entered in the config.php file first. (for example using phpmyadmin).
If you want to, you can use a pre-made MySQL table structure with some dummy entries that I have included in the zip: just copy and paste the contents of dadabik-example-db.sql into the SQL window of the new database in phpmyadmin.

Once you’re done with the basic installation, head over to the admin.php which gives you all the admin options you need to include/remove secific tables and set human readable aliases for the tables.

The last step to perfect interfaces is to click the Interface configurator link on that admin page.
The configurator gives you all the options to customize the appearance, set default values, define which fields are mandatory, etc. etc.

Demo:
Check out the demo of DaDaBIK with the new design.
You’ll have to enter username test and password: test@ddbdemo to enter.
(please keep in mind that a lot of features are disabled in the demo, since the test-user doesn’t have admin-rights.)

Download:
DaDaBIK Revised 1.0 (1MB, tar.gz)

Subversion Repository:
There is a Subversion repository in case you want to make use of the open source idea or really want to see some old school PHP4 :O

Changelog:
2010-03-09 initial release of DaDaBIK Revised

Sample Markup for CSS Authors

Freitag, 9. Oktober 2009

Have you ever written a CSS file? Have you heard about this “lorem ipsum” thing? Or do you regularly transform designs into CSS & XHTML? If you answer one of these questions with ‘yes’, then this is for you.

What is the first thing you do when it’s time to create a new CSS file? You might start from scratch with a blank CSS every time. You might use Eric Meyer’s reset.css. You might probably work with one of the numerous CSS-frameworks, such as Blueprint CSS or YAML or even use the CSS stuff from that YUI framework. You might even start with your CMS’s standard theme and adjust things from there…

One thing you might forget when you hack in the first lines of CSS (and this happens to the best of us) is to use reallife markup instead of that boring “Lorem ipsum…” designers seem to have a faible for. This is where this markup snippet comes into play: it should help you with filling your wireframe layout with some actual HTML-markup.

So just plain HTML, huh?

This snippet provides a wide range of commonly used markup, that should be supported by most rich editors (a.k.a. WYSIWYG editors).
Since every coder has his own preferences towards class names. I decided to leave out the fancy stuff you could do with classes at all, as this would force some people to spot, delete, or rename those classes afterwards, which would be counterproductive. So this is plain HTML.

Download

Since each and every CMS treats the markup you insert into its page editor differently, I decided to provide both: a version with regular HTML and one without the paragraphs for those CMS that come with their own paragrapher-functionality.
Sample Markup v0.1 (text file, 8 KB)
Sample Markup v0.1 without paragraphs (text file, 8 KB)

Some notes: the HTML-elements included in the snippet are: p, a, abbr, acronym, samp, code, pre, ol, ul, li, blockquote, cite, q, table, caption, thead, tfoot, tbody, tr, td, th, em, strong, sup, sub, div, span

That’s basically it. Just create a code snippet in your favorite editor and remember: Sample markup is the new lorem ipsum.
Am I missing something? Looking forward your improvement suggestions.

Changelog:
v0.1 Initial version. (2009-10-9)

jQuery is fun :)

Mittwoch, 30. September 2009

Sliding Header Animation with jQuery There are probably a dozen pre-made image gallery plugins for jQuery that do the same thing, or could be hacked to do so… but actually I wanted to see how hard it is to code a scrolling header animation similar to the one i found on www.freshtilledsoil.com.
So here’s my own approach for the same thing: See the Demo here. Instead of writing proper plugins for jQuery, I actually got used to writing global Javascript functions. Although these may or may not use jQuery functionality themselves and mostly do project-specific stuff - it’s not really reusable in the next project. So hacking together a jQuery plugin would be mandatory. That said, this is the result of that practice. Easy.

So what this does is: First, it requires you to set up a list with images and another div with links (the controls). have a wrapper div surround this. When clicking on a ‘pager’ link, it will then slide the whole list in its parent div.

Verlosung: The Web Designer’s Idea Book

Mittwoch, 27. Mai 2009

Beim gestrigen Treffen der PHP Usergroup Karlsruhe hab ich doch tatsächlich mal etwas gewonnen!
Und weil ich das Magento Buch von Alexander Steireif und Rieker Rouven gerade gut gebrauchen kann, habe ich mir überlegt auch mal etwas Gutes zu tun. Deshalb verlose ich hier nun ein Exemplar des im Titel erwähnten Buchs von Patrick McNeill. 256 Seiten Inspiration für dich. Bei etwa 100 bis 200 Besuchern pro Tag, sollte sich ja jemand finden, der für das Buch Verwendung hat, oder? Wer das Buch haben möchte der schreibe entweder hier ein Kommentar oder verfolge meine Twitter Updates. Der Gewinner wird am Mittwoch den 10. Juni um 15 Uhr bekanntgegeben. Viel Glück.

 

Und gewonnen hat: Bernd Schmitz aka @schmitz. Gratulation! :)

Xubuntu und Eclipse

Sonntag, 24. Mai 2009

Installiert man Eclipse in seiner brandneuen Xubuntu 9.04 (Jaunty) Installation staunt man beim starten dieser nicht schlecht: da hat mein ein Paket mit einer uralten Version 3.2 geschnürt (aus dem Jahre 2006). Einen Grund dafür gibts wohl auch: ein nicht behobener Bug in Eclipse. Nur leider keine Lösung - zwar gibt es einen Patch, der "für einige funktionieren könnte…".
Stop. Ich will nicht rumexperimentieren und fixen. Eclipse ist Standardsoftware. Man sollte anscheinend gar nicht erst mit solch exotischen Derivaten Zeit vertrödeln.
Das mal so notiert, während die Ubuntu CD noch brennt.