Beiträge mit dem Schlagwort ‘Design’
JQuery Script Sammlung
Ähnlich wie die Verwendung von Mootools in Joomla, verwendet beispielsweise Wordpress die Bibliothek JQuery. JQuery vereinfacht analog Mootools die Anwendung von JavaScript, was sich insbesondere auf die so beliebten Web 2.0 Effekte auswirkt (Info: wer sich für die genauen Unterschiede von Mootools und JQuery interessiert, der findet hier weitere Hintergründe).
Passend eingesetzt ergeben sich nicht nur auf modernen Seiten sehr nützliche und praktische Anwendungen, die dem Nutzer die Anwendung einer Seite (oder Webanwendung) erleichtert, die Bedienung vereinfacht oder die Usability erhöht.
Nachfolgend findet Ihr eine kleine Auswahl an JQuery Scripte und Tutorials, die sich gut an viele Designs anpassen lassen.
Sliding Panel
Das Script ist eigentlich für ein Login-Panel gedacht, das vom oberen Bildschirmrand ein- und ausfadet. Es kann leicht jede andere Art von Content aufnehmen und so ein netter Effekt auf der Seite werden.
Link: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Mega Drop Down Menu
Ist ein sehr schön gemachtes Plugin für ein Drop Down Menü, das ohne Probleme bei entsprechender Gestaltung auch eine größere Anzahl an Links aufnehmen kann.
Link: http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
Plugin Usage
The following sentences try to describe the normal usage of the plugin. There will be also a part with some more advanced tips. Please read the 5 installation steps at the Sexy Bookmarks main page carefully and be sure everything is working properly.
OK, I am there what’s next?
Everything was installed well. Now we can browse to Joomla’s Plugin section. Search the entry which is called “Content – Sexy Bookmarks” or if you have installed a version before 1.1.0 search for “Sexy Bookmarks”. Just open the Plugin by clicking the name or use the checkbox right before the plugins name and click the button “Edit” at the top.
You should see all possible options for the Sexy Bookmarks now. Not? Then you should go one step back and make sure that everything was installed well.
The configuration page
Now I will walk through all options which can be found at the right side of the plugin page. Why not the options in the middle/left? The options displayed in the middle/left side of the page are not special options for the Sexy Bookmarks plugin. These options are the default Joomla! options and can be found on every plugin page. If you have any question on these, please see the official Joomla! documentation. (aaah, one option in the middle/left section is necessary…. do not forget to activate the plugin…!).
Display Options
The display options are the basic options where you can define where the bookmarks should be displayed and where not.
Display Sexy Bookmarks on Frontpage: Choose this, if you would like to see the Sexy Bookmarks menu on the frontpage items. All settings concerning categories and manual settings will be applied (there are more advanced options, I will explain this later). If you do NOT choose this, the bookmarks will NEVER be displayed on the frontpage.
Display Sexy Bookmarks on article pages: Displays the Sexy Bookmarks menu on all single article pages. All settings concerning categories and manual settings will be applied.
Display Sexy Bookmarks on blog layout pages: Will display the Sexy Bookmarks menu on all blog layout pages. Also here will all settings concerning categories or manual settings applied.
Display only if manually defined: If you use this, the Sexy Bookmarks menu will be displayed when you add {sexybookmark} including the brackets inside your article. If you do not use this inside your article, the Sexy Bookmarks menu will never be displayed, no matter which settings you have choosen in the previous options.
Categories: You can enter a comma separated list of category ID’s here. The Sexy Bookmarks menu will be displayed in this categories only. This settings will have an effect on all previous settings. E. g. enter the category ID 25 here and choose display Sexy Bookmarks on Frontpage, than all articles from category 25 will be displayed on the frontpage only.
SB Bookmarks
Add Default CSS File: The Sexy Bookmarks menu has a built in CSS File. Choose “yes” if you would like to use the CSS settings which has been installed with the Sexy Bookmarks menu. If you are a template designer, you can choose “no” and include all your necessary CSS settings inside your own stylesheet. Benefit here, it is not necessary to have an additional HTTP request for the CSS file of the Sexy Bookmarks.
Add no-follow: This will add the rel=”nofollow” attribute to the link tag inside your source code. If you would like to know more about this options, please read Google’s information for webmasters here.
Open links in new window: Will add the target=”_blank” to the link tag. All clicks will open the social bookmarking services in a new browser window.
Sexy Bookmarks
Here you can choose the social bookmark services which you need. The explanation is very simple… yes will display a small button and no not 
Choose your required services. You need a special service which is not listed? Just open a feature request and I will try to add it during the next releases.
A short but necessary information especially for the Twitter bookmark. Some users have reported, that this option will slow down their page. Yes, that’s true, because it is necessary to fetch a short url for each article link from an external short url service provider. This step takes time. I am working on a smart solution to cache the short urls, but this is not available yet.
If you enable the Twitter bookmark, you have to enter your Twitter-ID too. Otherwise your tweets will not work as expected. Additional it is necessary to enter your prefered short url service provider. This is important, because Twitter it is not possible to post more than 140 digits on Twitter and often the Joomla! links will be a bit longer than this or the space for your important words will be smaller and smaller. (Please also see the Twitter information in the chapter before!).
Twittley
Nearly the same as Twitter. Here it is not necessary to enter a personal ID, but a default content category, where your posts should be displayed and some default Twittley Tags. If you have set special Meta-Keys for your article, the Sexy Bookmarks menu will use the Meta-Keys as the Twittley Tags. If there is are no special Meta-Keys, the Sexy Bookmarks menu will fall back to the default tags defined here.
Style Options
Which background image would you like to use: The menu has some build in special images which are displayed at the beginning of the menu. Choose your prefered image here or disable the specials image.
Extra Style: You can enter some special CSS tags here. These tags will be added to the surrounding DIV-Tag of the Sexy Bookmarks menu.
Advanced Tips
The Sexy Bookmarks menu comes also with an exclude possibility. You can use {nosexybookmark} inside your article to not display the menu on a specific article (use it including the brackets). You can place this anywhere in your article. This setting will always win!
Combine this with all other display settings to enable the full power of the Sexy Bookmarks menu.
Additional information
If you miss something in the Sexy Bookmarks menu or if you have found a bug (hopefully not), you can use the Joomlacode repository. Here you can see if the bug is already posted or not. If not, you are very welcome to post it. You can also use the repository to add a Feature Request (e. g. a missing bookmark service or a special incredible really nice feature I haven’t thought about yet).
Here are the necessary Links:
Link to the Sexy Bookmarks menu page inside the Joomlacode repository: http://joomlacode.org/gf/project/sexy_bookmarks/
Link to the Bug-Tracker: http://joomlacode.org/gf/project/sexy_bookmarks/tracker/?action=TrackerItemBrowse&tracker_id=8927
Link to the Feature Request list: http://joomlacode.org/gf/project/sexy_bookmarks/tracker/?action=TrackerItemBrowse&tracker_id=8926
HTML 5 Cheat Sheet
Beim Smashing Magazine gibt es ein Cheat-Sheet für HTML 5 zum Download. Da einige Browser ja bereits die neuen Tags (oder zumindest einen Teil dieser) unterstützen und ein offizieller Releasetermin nirgendwo zufinden ist (ich hab zumindest keinen gefunden). Kann jeder die spezifizierten Tags auf eigene Gefahr hin einsetzen.
Schön auf einen Blick zu sehen, der HTML-Tag, eine kurze Info dazu, die HTML-Version, seit wann der Tag unterstützt wird und eine Übersicht der möglichen Attribute.
Nett; das Cheat-Sheet ist für alle Designer auf jeden Fall einen Blick wert.
Quelle: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
Kostenloses Flavour’s Icon Set
Ein wirklich schönes Icon Set, bestehend aus über 450 Grafiken, kann man momentan beim Smashing Magazine herunterladen. Das von Oliver Twardowski “gepinselte” Icon Set enthält wirklich einige sehr schöne Icon’s, die im Web-Alltag in allen möglichen Projekten verwendet werden können.
Das besondere an dem Icon-Set ist, dass neben den eigentlichen Icons auch die Photoshop Datei zum Download bereit steht und so die Möglichkeit eigener Icons im gleichen Stil möglich ist.
Die Grafiken liegen im Format 48×48 Pixel vor. Viel Spaß mit den Icons.
Quelle: http://www.smashingmagazine.com/20…te-icon-set-for-web-designers/
CSS-Frameworks
Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.
Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem Material im WWW, deshalb lass ich das einfach mal so stehen).
CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.
Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.
Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:
Blueprint
Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.