Kategorien
Design HTML/CSS

SVG & CSS: Was geht, was nicht in der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung

Dribbbox stellt Ihr Dribbble-Portfolio als Website dar, ganz ohne Aufwand

Viele Tools sind einfach. Aber wenige davon sind einfach gut. Dribbbox vom belgischen Designer Benjamin De Cock ist beides. Benjamin erstellte ein zeitgemäßes, responsives Portfolio-Design, das automatisch den Inhalt eines beliebigen Dribbble-Portfolios auslesen und sehr ansprechend darstellen kann. Das ist schon gut. Noch besser ist, die Lösung hosten Sie selber auf Ihrer eigenen Domain.

dribbboxcom

Dribbbox: Instant-Portfolio auf Basis von HTML, CSS und JavaScript

Dribbbox laden Sie frei als Zip-Archiv mit einem Gewicht von 50 kb herunter. Im entpackten Archiv finden Sie den Ordner app. Im obersten Level dieses Ordners findet sich die Datei config.js, welche es noch anzupassen gilt. Im Auslieferungszustand enthält sie natürlich noch die Konfigurationsdaten des Belgiers:

dribbbox.config = {

  dribbble_username : "bdc",
  short_description : "User interface and icon designer.",
  email_address     : "ben@deaxon.com"

}

Ersetzen Sie den Inhalt der drei Parameter mit Ihren Angaben. Danach laden Sie den kompletten Inhalt des Ordners app in einen beliebigen mit einer Domain oder Subdomain verbundenen Ordner Ihres Webspace hoch. Rufen Sie die Domain/Subdomain über einen Browser Ihrer Wahl auf. Ihr Dribbble-Portfolio sollte ohne weitere erforderliche Handgriffe zu sehen sein.

Dribbbox entfernt den gesamten Netzwerk-Overhead aus Ihrem Dribbble-Profil und zeigt ausschließlich die von Ihnen hochgeladene Arbeit. Auf diese Weise können Sie Ihr Portfolio quasi automatisch mit aus Dribbble speisen, ohne sich um potenziell kritische Kommentare oder sonstiges Beiwerk sorgen zu müssen.

Dass Dribbbox voll responsiv arbeitet, erwähnte ich bereits. Der schlanke Portfolio-Generator basiert ausschließlich auf HTML, CSS und JavaScript und beinhaltet auch alle erforderlichen Dateien. Es gibt keine externen Abhängigkeiten. Nachdem das System so in sich geschlossen ist, können Sie das Look & Feel Ihres Portfolios nach Belieben anpassen.

Wenn man unbedingt etwas zu kritisieren sucht, dann bietet sich höchstens der Umstand an, dass Dribbbox-Portfolioseiten auf sehr großen Bildschirmen etwas leer wirken, da die Dribbble-Bilder stets nur 400 x 300 Pixel groß sind. Dribbbox liest die Bilder aus Dribbble aus und zeigt sie in derselben Größe zentriert im rechten Bildschirmbereich an. Auf meinem DELL 27"er mit 2.560 x 1.440 Pixel und maximiertem Browserfenster wirkt das dann logischerweise etwas filigran. Auf mobilen Geräten hingegen ist die Darstellung bar jeder Kritik.

Auf jeden Fall ist Dribbbox ein Must-Have für den engagierten Dribbble-Nutzer.

Links zum Beitrag

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Photoshop

Total Recall #1: 140+ kostenlose HTML/CSS-Website-Vorlagen und PSD-Templates

In unserer schnelllebigen Branche ist es sinnvoll, ab und an mal innezuhalten und zurück zu schauen. Denn die Geschwindigkeit hat auch ihre Nachteile. So neigen wir dazu, nur auf den neuesten heißen Scheiß zu schauen, obwohl es ein paar Monate zuvor möglicherweise bessere Lösungen gegeben hat.

Kategorien
Design HTML/CSS

HTML, CSS, PSD und mehr: 22 kostenlose Design-Ressourcen aus dem Dezember 2013

Design-Ressourcen werden aus verschiedenen Gründen stets gern genommen. Einige von uns verwenden sie als Bausteine für ihr nächsten Projekt. Andere nutzen sie lediglich, um sich eigenen Kreationen inspirieren zu lassen. Aber uns allen gemeinsam ist, dass wir diese Ressourcen sammeln. Der alte Jäger und Sammler in uns lässt sich halt nicht überlisten. In vollem Bewusstsein dieses Umstandes haben wir uns wieder durch die Tiefen des Netzes bewegt und sind mit der folgenden Liste voller HTML-, CSS- und PSD-Templates wieder aufgetaucht. Nehmen Sie sie mit zur Feuerstelle und hören das begeisterte Uga, Uga.

Eins noch vorab: Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Sektion #1: HTML-Vorlagen

Every Web Service: HTML-Template im Web-Service-Look

Every web service template

Erstellt von: Matt Boldt
Features: Minimalistisches Design, eher was für Unternehmen

Wijayakusuma: Landing-Page mit großem Countdown-Zähler

Wijayakusuma landing page

Erstellt von: Bagus Fikri
Features: Extrem prominenter Countdown

Hawthorne: Minimalistisch, mit schöner Typografie

Hawthorne HTML template

Erstellt von: Type and grids
Features: was für Minimalisten und Freunde durchdachter Typografie

Flat UI Components: Interaktive UI in HTML5 und CSS3

Flat HTML UI

Erstellt von: Javier Latorre López-Villalta
Features: Moderne HTML/CSS-Vorlage im aktuellen Designtrend

Sektion #2: PSD-Vorlagen und Elemente

The Depending Theme: Dunkles Grid-Template für Agenturen

The depending theme PSD

Erstellt von: Gennadiy Ukhanov
Features: grid-basiert

Swiss: Modernes Tumblr-Template

Swiss PSD template

Erstellt von: Niall MacFarlane
Features: gut strukturiert und minimalistisch

Delize: Newsletter-PSD-Template mit huter Layer-Organisation

Delize PSD template

Erstellt von: Michael Reimer
Features: sehr gut organisierte PSD-Datei

Startup: Flat Design mit vielfältigen Einsatzmöglichkeiten

Startup PSD template

Erstellt von: eWebDesign
Features: sehr vielseitig verwendbar und im aktuellen Flat-Trend

GerduKreatip: für das Agentur-Portfolio

GerduKreatip PSD template

Erstellt von: Andreansyah Setiawan
Features: mehrere Seiten im Template

Smart App: Minimalistische Landing-Page für App-Entwickler und andere

Smart App PSD template

Erstellt von: PsdBooster
Features: Minimalistisches, sehr modernes und ansprechendes Design

Church Website Template: Texturen, aufwändige Typografie, dennoch nicht überladen

Church Website PSD tempate

Erstellt von: FREEPSDFILES.NET
Features: PSD-Datei wohl-organisiert

Bloom: Flat Template für E-Commerce’ler

Bloom e-commerce PSD template

Erstellt von: Enes Danış
Features: durch das Flat Design entsteht ein starker Fokus auf die Produkte

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat UI Final: Standard-Flat-Kit für Designer

Flat UI final

Erstellt von: Samsu
Features: Flat Widgets für mobile Apps

Instagram UI: Instagram Interface aus Vektoren

Instagram UI

Erstellt von: MarinaD
Features: Hübsches Instagram-Interface für Mockups

UI Kit: Flat Widgets-Kit für Web Apps

UI kit

Erstellt von: Simeon K.
Features: Flat Elemente für soziale Anwendungen im Web, sowie Dashboards

Dark Transparent UI Kit: Transparente Widgets für Soziale Apps

Dark transparent UI kit

Erstellt von: Lovi Joshi
Features: Dunkel, modern, mit verschiedenen Nutzerprofil-Elementen

iOS 7 Wireframe Kit: Nützlich für iOS-Entwickler

iOS7 wireframe kit

Erstellt von: Jay Visavadia
Features: 2 Themes enthalten

UI Set: Elemente für mobile Social Apps

UI Set

Erstellt von: Muharrem Şenyıl
Features: iOS7 lässt grüßen

Bootstrapee Dark UI: Dunkle Elemente für Web Apps

Bootstrapee Dark UI

Erstellt von: Bootstrapee
Features: 5 Menüs, 3 Drop-Down-Menus und viele weitere Elemente

Flat Design User Interface Elements: Frei skalierbare Elemente für jede Art von Projekt

Flat design user interface elements

Erstellt von: Marie Dehayes
Features: (Fast) alle Elemente, die man braucht für mobile Apps

Lucid UI Kit: Modern, klar, mit weichen Texturen und Verläufen

Lucid UI kit

Erstellt von: Lucid Site Designs
Features: Ausgewogene Farbwahl, sehr ansehnlich

Massive UI Kit: Auffälliges iOS7-Interface

Massive UI kit

Erstellt von: Max Silenkov
Features: schon im Stile von iOS7, aber dennoch recht auffällig gehalten

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Inspiration Showcases

HTML, CSS, PSD und mehr: 25 kostenlose Design-Ressourcen aus dem November 2013

Ja. Hallo erstmal. Auch in diesem Monat melden wir uns wieder mit einer weiteren Ausgabe unseres monatlichen Komplettpakets der besten, frischesten Design-Ressourcen der letzten Wochen. Wenn Sie unsere regelmäßige Serie bereits kennen wissen Sie ja, was Sie erwartet. Wieder haben wir einen Sack voller HTML-, CSS- und PSD-Templates zusammengestellt und um die besten UI-Kits ergänzt. Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Sektion #1: HTML-Vorlagen

Fore: Minimalistisches HTML-Theme

Erstellt von: Jordan Bowman aka Papaya
Features: Responsives Template im aktuellen Onepager-Stil

Fore HTML template

Spotlight: Landing Page mit Konversionsdrang

Erstellt von: bestpsdfreebies.com
Features: Drei verschiedene Farbkombinationen, komplett mit PSD und DokumentationSpotlight HTML theme

Piccolo: Modern, klar, einfach

Erstellt von: Nathan Brown
Features: Basierend auf Bootstrap bietet dieses Theme 19 verschiedene Seitenlayouts.

Piccolo theme

Flat Ui: Benutzerinterface im Flat Design mit HTML/CSS

Erstellt von: Javier Latorre López-Villalta
Features: HTML/CSS Flat GUI

Flat UI HTML/CSS

Zeni : Responsives HTML5-Theme

Erstellt von: Luiszuno
Features: Responsives Template mit diversen Seitenlayouts

Zeni HTML theme

Wee: Professioneller One-Pager mit HTML5

Erstellt von: Egrappler
Features: verschiedene Seitenlayouts

Wee HTML theme

Sektion #2: PSD-Vorlagen und Elemente

Hexal: Portfolio-Template mit stark sechseckigem Einschlag

Erstellt von: Petrovski Marijan
Features: Flat Design mit vielen Ecken und Kanten ;-)

Hexla PSD template

Golden Gate: Portfolio-Theme, inspiriert vom goldenen iPhone

Erstellt von: Viktor Hanacek
Features: Gold is the new Black, könnte man sagen. Das iPhone 5s inspiriert jedenfalls.

Golden Gate PSD template

Travel Booking Website: PSD-Template für Reise-Sites

Erstellt von: vasiligfx
Features: Modernes, klares Design, dem Flat Trend folgend

Travel Booking PSD template

Selly: eine einfache Landing Page als PSD

Erstellt von: Michał Ptaszyński
Features: Einseitiges Template für Web-Wartehäuschen

Selly Landing Page

My Charity: Grid-basiertes, Flat Design Template

Erstellt von: cssauthor
Features: Wieso diese Vorlage ausdrücklich für mildtätige Zwecke geeignet sein soll ist unklar. Als Portfolio-Template über die volle Breite des Screens macht es sich ebenso gut.

My Charity PSD template

Aqual: ein weiteres minimalistisches Landing Page Template

Erstellt von: Ainar
Features: modernes Design, mehrere Seiten verfügbar

Aqual landing page PSD

Fooseshoes: Flat E-Commerce-Template

Erstellt von: Enzo Li Volti
Features: One-Pager in modernem Look

FooseShoes

Perth: Flat Landing Page Template mit sanfter Farbgebung

Erstellt von: blazrobar.com
Features: Onepager, fluffige Farben

Perth template

Rumors: Magazin- und News-PSD-Template

Erstellt von: herowp.com
Features: für Blogs, Nachrichtenseiten und Magazine geeignet

Rumors PSD template

Dexter’s Lab: und noch ein Landing Page Template

Erstellt von: Balkan Brothers
Features: Flat und modern

Lab template

Sektion #3: Elemente für grafische Benutzeroberflächen

Flat Ui Kit: An Behance erinnerndes User-Interface für mobile Anwendungen

Erstellt von: uipixels.com
Features: Social Media Widgets im Flat Design

Flat UI kit

Ubuntu GUI Template: Komplettes Set für Ubuntu-Fans

Erstellt von: DesignShock
Features: Linux-UI für echte Freunde des alternativen Betriebssystems

Ubuntu GUI template

UI Kit by Jamie Syke: Flach und rund und mit lebhafter Farbgebung

Erstellt von: Jamie Syke
Features: Dashboard-Widgets in zeitgemäßen Design

UI kit by Jamie Syke

Minimalistic Flat UI: Blau-dominiertes UI-Kit für mobile Apps

Erstellt von: superstoked
Features: Blau…

Minimalistic Flat UI

Flat UI Kit mit starkem Fokus auf das soziale Element

Erstellt von: Abhimanyu Rana
Features: Einfach und klar, flat und pastellig

Flat UI kit

Incoming Call Interface: Designvorschlag für eine Mobil-App

Erstellt von: Martijn Otter
Features: Sanfte Farbverläufe erinnern an ältere Apple-Designstandards und an das brandneue iOS 7 ;-)

Incoming Call UI kit

Flatty UI: mit viel Liebe zum Detail erstelltes Interface

Erstellt von: Mahmoud Baghagho
Features: detailreich und gut strukturiert

Flatty UI

Google Maps UI: detailgetreuer Nachbau der Google UI

Erstellt von: Victor Soussan
Features: Vektor-basierend und reichlich originalgetreu

Google Maps UI

Dribbble App Concept PSD: So könnte eine App wohl aussehen

Erstellt von: marekdvorak
Features: Gäbe es eine Dribbble-App, könnte sie so aussehen. Aber auch andere Apps könnte man mit diesem Kit dengeln.

Drible Concept PSD

Weitere Teile unserer monatlichen Serie mit Design-Ressourcen

Haben Sie erst heute herausgefunden, dass wir die besten Design-Ressourcen regelmäßig zusammenschnüren und als Paket bereit stellen? Wollen Sie sehen, was wir in den vergangenen Monaten ausgegraben haben? Dann schauen Sie mal hier:

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
Inspiration Tutorials

Bento: Intelligente Liste der besten Online-Kurse zum Thema Web-Development

Erst vor ein paar Tagen stellten wir Ihnen hier eine Liste mit 22 der besten internationalen Online-Schulungsangebote vor. Heute stolperten wir geradezu über eine neue Ressource namens Bento, die ihrerseits die besten konkreten Kursangebote für alle Themen rund um Webentwickler-Themen sammelt und aufbereitet verfügbar macht. Die Sammlung setzt auf die Mithilfe aller und kann sich auf diese Weise zu einem der besten Anlaufpunkte im Netz mausern.

bento-homepage

Bento: Verschiedenste Kurse für verschiedenste Kenntnis-Level

Bentobox.io (kurz: Bento), programmiert von Jon Chan aus New York City, ist ein Repräsentant einer interessanten Herangehensweise an das Feld des Online-Lernens. Hier wird nicht etwa der nächste Kursanbieter entstehen, stattdessen will Bento die besten bereits existierenden Onlinekurse aus den Weiten des Web zusammenziehen und zentral zugänglich machen. Unter den vertretenen Anbietern findet sich Dash, das wir Ihnen erst kürzlich vorstellten, ebenso wie Codecademy und Treehouse, die bereits in unserem großen Roundup ihren Platz fanden, und einige weitere namhafte und weniger namhafte Dienste für Wissbegierige.

Bento ist nach Sprachen/Plattformen/Technologien sortiert. Innerhalb des jeweiligen Themas wird nach Kenntnislevel unterteilt. Es finden sich Materialien für Anfänger, Fortgeschrittene und Profis, wobei der Bereich, der sich an Profis wendet noch häufig unbesetzt ist. Anfänger finden auf jeden Fall genügend Lernstoff.

Wählt man ein Thema an, schlägt Bento per farblicher Hervorhebung weitere Themen vor, die man im Anschluss bearbeiten sollte. In Anbetracht der Vielfalt des Gebotenen, kann eine solche farbliche Strukturierung durchaus helfen, einen klaren Weg durch das Wissensdickicht einzuschlagen.

Bento hat Materialien für nahezu jedes erdenkliche Thema, darunter solche, von denen nicht einmal ich schon je etwas gehört habe. Über 80 Themen mit einer unterschiedlichen Zahl verfügbarer Kurse wollen durchgearbeitet werden. Sollten Sie daran interessiert sein, sich mit der Entwicklung nativer Apps für die drei großen Mobilplattformen zu beschäftigen, ist Bento ebenfalls eine gute Anlaufstelle.

Wenn Sie der Auffassung sind, dass eine der besten Ressourcen zum Thema X fehlt, sind Sie aufgerufen, diese Ressource aktiv zu ergänzen. Diese Form der Weisheit der Vielen ist das Konzept auf dessen Basis Bento noch besser werden soll. Die gemeinsame Arbeit wird über Github organisiert.

Laut Chan ist Bento das Resultat eines einstündigen Code-Hacks. Entstanden am 20. September fand das Projekt innerhalb weniger Stunden seinen Weg auf die wesentlichen Linkhubs unserer Tage, namentlich Reddit und Hacker News. Chan hat sich inzwischen die Zeit genommen und die Story gebloggt.

So, und nun gehen Sie rüber zu Bento, helfen es zu erweitern oder bauen Ihre eigene Version. Immerhin stehen jedem von uns laut Warhol 15 Minuten Ruhm zu.

Ebenfalls eine gute Anlaufstelle für alle Lernwilligen ist das kostenlose E-Book von vergleich.org, welches 500 kostenfreie, deutsche Onlinekurse auf ca. 150 Seiten beinhaltet.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Alles so schön bunt hier: 21 kostenlose Design-Ressourcen zum Herbstanfang 2013

Guten Morgen, Designer, Developer und übrige Netzbewohner. Wir sind zurück mit der neuesten Ausgabe unseres monatliches Rundumschlags mit den besten, frischesten Design-Ressourcen des vergangenen Monats. Wenn Sie unsere regelmäßige Serie bereits kennen, dann wissen Sie ja, was Sie erwartet. Wieder haben wir einen Sack voller HTML-, CSS- und PSD-Templates zusammengestellt und um die besten UI-Kits ergänzt. Alle der folgenden Elemente können frei genutzt werden. Manchmal ist allerdings im Vorfeld des Download eine kostenlose Registrierung erforderlich…

Megacorp: Minimalistisches Multi-Layout-Theme für Desktop- und Mobil-Geräte

megacorp

Erstellt von: HTML5Templates
Features: Minimalistisches UI-Design, ein- oder zweispaltig, sowohl für Desktop, wie auch Tablets und Smartphones geeignet

Moderne Open Source-Website im minimalistisches Designstil

slide one

Erstellt von: Start Bootstrap
Features: 17-seitiges Template auf der Basis von Bootstrap 3

Prologue: Template für Fotografie-Seiten im Flat Design

Prologue

Erstellt von: HTML5 UP
Features: Navigationsmenü im Mobil-Stil, Flat Design, responsiv und mit guter Social Integration

Zizurs: Einfaches Template für Coiffeure

Zizurs

Erstellt von: Free Website Templates
Features: Auch das gibt’s. Ein Template für Friseurinnen und Friseure. Es bietet einen minimalistischen Style und weiche Seitenübergänge.

Escape Velocity: Responsives Site-Template

Escape Velocity

Erstellt von: HTML5 UP
Features: Parallax-geeignet, mit schönen Hintergrundmustern und einem eleganten Glas-Effekt in den Menüs

Tapestry: Mehrspaltiges Blog-Design

Tapestry

Erstellt von: HTML5Templates
Features: Mehrspaltiges, responsives Design mit schickem Hintergrund, bild-zentriert

PSD-Template im Flat Style für App-Websites

app website PSD

Erstellt von: Tomas Laurinavicius
Features: UI-Komponenten für Websites zu mobilen Apps, fokussiert sich auf Fotografie

Business: PSD-Website-Template mit kräftigen Farben

Business

Erstellt von: Blaz Robar
Features: Flat Stil, starke Farben, responsives Layout.

STE.AM: Flat PSD-Templates für Event-Websites

STE.AM

Erstellt von: Subash Dharel
Features: PSD mit zwei Templates, auch wieder Flat Design, bemerkenswerte Illustrationen und gute Social Integration

Gusto: PSD-Template zur Erstellung erfolgreicher E-Mail-Newsletter

Gusto

Erstellt von: Michael Reimer
Features: Besonders interessant ist die Trennung von Bild-, Inhalts- und LInk-Containern. Werbeflächen sind vorgesehen.

Worx: Responsives, flexibles WordPress-Theme

Worx

Erstellt von: Cyberspace Builder
Features: flaches, responsives Einseiten-Theme

Thunder: Riesen-PSD-Website-Template

Thunder

Erstellt von: WP Explore!
Features: großes Template für WordPress-Sites mit PSD-Rohdaten.

Crisp UI Kit: Mengen von Web-Elementen

Crisp UI

Erstellt von: Michael Reimer
Features: Für Freunde des minimalistischen UI. Enthält verschiedene Arten von Schaltflächen, Auswahlmenüs, Slider, Fortschrittsbalken. Ganz in pastelligen Harmonietönen gehalten.

UI Kit 2: PSD-Kit im Flat Design

UI kit 2

Erstellt von: Aykut Yilmaz
Features: unzweifelhaft hübsches Kit im trendigen Flat Style mit Kommentarbereich, Slider, Fortschrittsbalken, etlichen Widgets und mehr

Flatilicious User Interface: Optimal für Wireframing

Flatilicious

Erstellt von: Patrick M
Features: Flat Interface mit verschiedenen Elementen, darunter ein Login- und Registrierungsoverlay und ein Widget zur Integration von Twitter

iOS7 GUI: Mehr als 1.000 Elemente für Ihre iOS-App

iOS 7 GUI

Erstellt von: IconShock
Features: iOS7 lässt grüßen, Retina-ready, minimalistische Icons und Elemente

UI Kit: PSD-Set für Fliesenleger ;-)

UI kit

Erstellt von: Rebecca Machamer
Features: ein bisschen Metro-Flair versprüht dieses Set im Flat Design, Windows 8 Enthusiasten vor

Schickes Web-User-Interface-Design-Kit als PSD

Putih Ijo UI kit

Erstellt von: Aryan Dhani
Features: Viele Elemente für den E-Commerce im Flat Design

Metro Vibes UI Kit: Kreative Design-Elemente sparen einen Haufen Arbeit

Metro Vibes

Erstellt von: Freebies Galleries
Features: Ein Füllhorn, unter anderem mit visuellen Kontrollelementen, Sliders, Icons, Schaltflächen und Besonderheiten, wie einer Preistabelle, ein Nachrichtenfeld, eine Wetteranzeige und mehr

Flatimus iOS UI Kit: Flacher als das flache iOS7

Flatimus

Erstellt von: Satys
Features: Retina-ready, Flat UI, Elemente als Positive wie Negative für helle oder dunkle Layouts

Hotel UI Kit: Reise-Apps und Websites bedienen sich bitte hier

Hotel UI kit

Erstellt von: pixelkit
Features: mit Ebenen versehene PSD-Dateien auf der Basis eines 960er Grids, kommerzielle Nutzung erlaubt, skalierbare Vektorgrafiken, kostenlose Updates, freie Schriftarten

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XHTML-Themes.

(dpe)

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Bilder & Vektorgrafiken bearbeiten Design Essentials Photoshop

Best of Juli 2013: 30+ frische HTML/PSD-Themes und UI-Elemente

Im zweiten Teil unserer neuen monatlichen Serie mit frischen HTML/PSD-Themes und UI-Elementen stellen wir Ihnen Ressourcen vor, die sämtlich im Juli 2013 entstanden sind. Wir liefern Ihnen mit über 30 verschiedenen Werken ein breites Set an vorgefertigten Themes, Templates und sonstigen Elementen. In vielen Fällen werden die Rohdaten zur Bearbeitung mit Ihrem favorisierten Bild- oder Vektorbearbeitungsprogramm direkt mitgeliefert. Da sollte für jedermann was dabei sein…

Elegante HTML- und CSS-Themes

Wenn Sie nach Web-Templates suchen, für die Sie nicht erst Photoshop oder Illustrator anwerfen müssen, sind Sie mit der folgenden Liste gut bedient:

Gardentruck: Free Responsive HTML5 Template

Erstellt von: Templatemonster

GardenTruck Html5 Template

Avenir: Clean and Modern “Coming Soon” Page Template

Erstellt von: Wegraphics.Net

Free Coming Soon HTML Template

Caprice: Simple and Beautiful HTML Template

Erstellt von: Elemisfreebies.com

simple and beautiful HTML template

Telephasic: Minimalistic and Responsive Site Template

Erstellt von: HTML5 UP

responsive site template

zAgroPlus: Responsive Dark WordPress Theme

Erstellt von: Templatemonster.com

Responsive Dark WordPress

Simplistic: Simple and Minimalistic HTML5 Template

Erstellt von: Css3templates.co.uk

minimalistic HTML5 and CSS3 template.

ZCorPoRate: Blue and White Responsive HTML5 Theme.

Erstellt von: Zerotheme.com

Blue and White Theme.

PSDs zu Inspirations- und anderen Zwecken

Die folgenden PSDs enthalten Themes mit teils mehreren Layoutvarianten. Sie dienen zu Inspirationszwecken, können aber natürlich auch direkt genutzt werden, wenn man Lust und Fähigkeit zu umfangreichen Anpassungen hat.

Seabird: Elegant Homepage Multipurpose PSD Template

Erstellt von: Elemisfreebies.com

Seabird Free Homepage PSD

Motion: Single Page PSD Web Template

Erstellt von: Mahmoud Baghagho

single page PSD web template.

About Us Page: Minimalistic “About Us” Landing Page

Erstellt von: Chris Allen

About Us Page

Modus Versus: Free Multi-purpose PSD Template for Designers

Erstellt von: Dimitar Tsankov

multi-purpose PSD template

Black Sea: Flat Style Business Template PSD

Erstellt von: Css Author

Clean website design template PSD

Skybox: Minimalistic White PSD Home Page Template

Erstellt von: Elemisfreebies.com

Skybox Free Homepage PSD

Pinball: Responsive Grid Style Blog PSD

Erstellt von: CSS Author

responsive grid style blog PSD

Display: Complete and Elegant Website Template

Erstellt von: Bestpsdfreebies.com

elegant website template

Calm: Free PSD Portfolio Containing a Page for the Home and Another One for the Blog

Erstellt von: Salah Elimam

creative simple portfolio & blog PSD

Bluebox: Flat Website PSD Templates Design

Erstellt von: Adam Engledow

BlueBox: Flat Website PSD

Aditii: Premium Ecommerce Website Template in PSD

Erstellt von: CSS Author

clean e-commerce template.

Coole GUIs zur Entwickler-Entlastung

Mobiles Design entwickelt sich rasant und ist unumgänglich. Kein Wunder also, dass sich mehr und mehr Entwickler in diesen Bereich vorwagen. Zum leichteren Einstieg haben wir folgend eine umfangreiche Liste mit PSD-basierten Interfaces zusammengestellt. Die meisten dieser GUIs sind vollständig.

Modern Touch: Flat and Complete Set of UI Elements in PSD Format

Erstellt von: Pixelkit.com

Modern Touch UI Kit

Light UI Kit: Clean and Deep Collection of UI Elements for Your Web

Erstellt von: Andrewspixels.com

Light and Deep UI Kit

iOS 7 GUI: Fantastic Set of GUI Elements for iOS 7 iPad

Erstellt von: Kim Ruelo

iOS-7 iPad GUI

Dark UI Kit: Simple and Flat Set of UI Elements

Erstellt von: Max Denisov

Dark UI Kit

Fantastic iOS 7 GUI: Spectacular and Useful Resource for Web Designers & Developers

Erstellt von: DesignShock.com

Fantastic iOS 7 GUI

Pop Songs:  Flat Music Player UI Widget

Erstellt von: Pele Chaengsavang

flat music player UI widget.

Flat UI Kit: Nice Set for Flat UIs

Erstellt von: Pixelsdaily.com

Flat UI Kit Free

Marble UI Kit: Simple and Useful GUI Kit in PSD Format

Erstellt von: Jian Wei

Marble UI kit

Dashboard UI: Beautiful Set of Dashboard UI Design PSD

Erstellt von: CSS Author

Dashboard UI

Chubby Stacks: Complete and Elegant UI Kit for Your Next Project

Erstellt von: Pixelkit

Chubby Stacks UI Kit

UI Kit: Modern UI Kit for Web Designers in PSD Format

Erstellt von: Aykut Yılmaz

UI kit for web designers

Flat GUI Kit: Fantastic and Useful Flat GUI Kit in PSD File

Erstellt von: Freepik

Flat GUI Kit

Infographic GUI: Info Graphic PSD Templates Designed in Simple and Clear Style

Erstellt von: Free PSD Files

Infographic PSD Templates

Wooden GUI Set: More Than 1,000 Design Elements for Your Next Web/Software Project!

Erstellt von: DesignShock

Wooden GUI Set

Dark Flat GUI: Cool UI Kit That Includes a Set of Beautiful Components

Erstellt von: Graphicburguer

Flat Design UI Components

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Die 29 besten HTML/PSD-Themes & UI-Elemente des Sommers 2013

Auch wenn Sie nicht mit WordPress arbeiten, brauchen Sie designtechnisch nicht unter einem Stein zu leben oder sich an anderen Orten zu verstecken. Wir haben folgend eine Liste zusammengestellt, die Themes, Vorlagen und Elemente enthält, mit denen Sie sich zum einen die Arbeit erleichtern und zum anderen einen Schub Inspiration holen können. Unsere Sammslung enthält Themes auf Basis von HTML/CSS, aber auch mit Photoshop umgesetzte Entwürfe und – nicht zuletzt – etliche fertige UI-Elemente und ganze Sets für Web- und mobiles Development. Schauen Sie rein. Da ist sicherlich für jeden was dabei…

A. HTML/CSS-Themes und Templates

 

Strongly Typed: Responsive HTML5 Site Template.

Erstellt von: HTML5 UP
Features: Basiert auf SKELJS, einem leichtgewichtigen Framework zur Erstellung responsiver Themes

strongly typed a responsive html5 site template

Infinite: This is a Small HTML/CSS Template for a Design Blog.

Erstellt von: Nathan Brown
Features: Theme im responsiven Grid-Layout mit schicken Effekten

Infinite – A Design Blog Template HTML/CSS

Megacorp: Black and White Flat Business Theme.

Erstellt von: HTML5Templates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

Megacorp HTML Theme.

Photoartwork: This Template is Written Entirely in HTML5 and CSS3.

Erstellt von: css3templates.co.uk
Features: Simples, farb-orientiertes Template mit fester Breite

PHOTOARTWORK HTML Theme.

zParalexy: Responsive Theme with Portfolio Page Made in HTML5 and CSS3.

Erstellt von: Zerotheme.com
Features: Flat Design, responsiv, Seiten-Vorlagen

zParalexy – Free Responsive Html5 Theme

Heavyindustry: Industry Inspiration Red Theme.

Erstellt von: HTML5emplates.com
Features: Minimalistisches Theme mit verschiedenen Layouts, sowie Versionen für Desktop, Tablet und andere mobile Geräte

heavyindustry HTML5 template

Zboommusic: Music Artist Inspiration Responsive  Black Theme.

Erstellt von: Zerotheme.com
Features: Responsiv, dunkel, flat, mit verschiedenen Seitenentwürfen

zBoomMusic – Free Responsive Html5 Theme

CSS3_gallery_garden: Simple Two Column Fixed Width Template.

Erstellt von: css3templates.co.uk
Features: Minimalistisches Theme mit fester Breite und eingebautem Accordeon-Slider

CSS3_gallery_garden template

Parallelism: Responsive Portfolio Site Template.

Erstellt von: HTML5up
Features: Portfolio Template mit horizontalem Scroller und Lightbox

parallelism  a responsive portfolio site template

B. PSD Website-Templates

Designer haben häufig ein gutes Auge für die Bedürfnisse des Kunden. So ist es nicht ungewöhnlich, dass sich Entwickler gern an Designentwürfen orientieren. Diese findet man nicht selten in der Form von Photoshop-Dateien. Und genau das finden Sie hier:

.Rufio: Multipurpose Responsive Template.

Erstellt von: Rufio
Features: Theme im Flat Design, das sowohl als HTML, wie auch als PSD vorliegt

Rufio Free Homepage PSD

Classic: Clean & Minimal Blog Design Template.

Erstellt von: Designer First
Features: Minimalistisches PSD-Design mit mehreren Seiten

Clean & Minimal Blog Design

Revenant: Blue and White Color Combination with Clean Grid to Display Your Products.

Erstellt von: premiumcoding.com
Features: PSD-Template für Unternehmens-Websites; Flat Design

Template home page

E-commerce: Template for Online Bookstore.

Erstellt von: cssauthor.com
Features: PSD-Template mit mehreren Seiten, passend hauptsächlich im Ecommerce-Umfeld

E-commerce Template PSD

Portfolio: Template for the 3 Column Portfolio Page.

Erstellt von: premiumcoding.com
Features: Portfolio-Template im Flat Design mit dezenter Farbgebung

Portfolio page in 3 columns

Illustrate: Flat, Black and White Theme for Designers.

Erstellt von: blazrobar.com
Features: Grid-basiertes Flat Design mit stark zurückgenommenem Farbschema

Free Flat Design PSD Template

Webfolio: Minimal Portfolio Template with Mobile Version.

Erstellt von: CSS author
Features: Portfolio-Layout im Flat Design

Minimal Portfolio Template

C. UI-Elemente und komplette Sets

UI-Elemente kann man immer gebrauchen. Vor allem im Bereich der mobilen Entwicklung sind die Sets zu den einzelnen Plattformen von großem Wert. Aber auch ansonsten schadet ein Blick über den eigenen Horizont nie, und wenn es nur zu Inspirationszwecken dient.

Crystal: Free Mobile Application UI Design in PSD.

Erstellt von: CSS author
Features: Basis-Set mit den notwendigsten Elementen einer mobilen App

Mobile Application UI

Nexus 4 GUI: Android UI Design Kit PSD to Version 4.2.2.

Erstellt von: Chirag Dave
Features: 768*1280 UI-Set, unter anderem für Nexus 4 geeignet 

Nexus 4 GUI psd

Window 8 Metro: 100+ Awesome Window 8 Metro Style Icon and  App GUI Kit.

Erstellt von: Redesign Case
Features: Metro UI als PSD in 300 dpi

Window8 Metro GUI

Metro Vibes: Modern Metro UI Kit That Will Help You Shape Your Website.

Erstellt von: pixelkit.com
Features: UI im Stile der Windows 8 Modern UI

Metro Vibes UI Kit

iOS 7 GUI: Photoshop Template of GUI Elements Found in the Beta 1 Release of iOS 7.

Erstellt von: teehanlax.com
Features: Schon legendäre UI-Sammlung von TeehanLax, jetzt auch für iOS 7

iOS 7 GUI PSD

Flat GUI: Amazing Set with More Than 500 Elements Totally Editable Files

Erstellt von: DesignShock.com
Features: Mehr als 500 Elemente und 100 Icons im Google-Style

Flat GUI PSD

iOS 7 UI Kit: Start Designing iOS 7 Apps Today with This Comprehensive GUI Kit

Erstellt von: MediaLoot
Features: Minimalistisches, sauber wirkendes Interface mit einem Grund-Set voll bearbeitbarer Elemente

Free iOS 7 UI Kit

Metro UI Kit: Metro Style Elements Collection

Erstellt von: tempees.com
Features: Farbenfrohe GUI im vormals Metro genannten Look von Windows 8 

Metro UI kit

Vertical Infinity: Mega Flat Style UI Kit in PSD

Erstellt von: CSS author
Features: Retina-optimiertes, plakatives Flat Interface mit unterschiedlichen Varianten jeden Elementes

Vertical Infinity

Minimal GUI Set: Huge Plastic GUI Pack with More Than a Thousand Elements

Erstellt von: wpthemegenerator.com
Features: Minimalistische GUI mit mehr als tausend Elementen, voll bearbeitbar und kommerziell frei nutzbar

Minimal GUI Set

Transparent UI: Full PSD Free Transparent Layered UI Kit

Erstellt von: blugraphic.com
Features: Transparentes Interface im beliebten Glossy-Look

Transparent Ui Kit (Psd)

Flat UI Kit: Red  and Blue Flat and curvy UI Kit.

Erstellt von: Zachary VanDeHey
Features: Schwungvolles, minimalistisches Interface-Konzept mit starken Kontrasten

Flat Ui Kit

Ecommerce Flat: PSD Ecommerce UI Kit with Flat Design.

Erstellt von: graphicsfuel.com
Features: Alle notwendigen Elemente für eine Ecommerce-Anwendung im Flat Design

Ecommerce Flat UI Kit

Die Autoren

Die Shock Family ist ein Team von Web-Enthusiasten, Designern und Entwicklern, die sich der Erstellung aller Arten von nützlichen Ressourcen rund um das Web widmet. Wer sich offenen Auges im Netz bewegt, ist mit Sicherheit schon über eines oder mehrere Projekte der Shock Family gestolpert, als da wären themeshock, eine Sammlung hochwertiger WordPress-Themes und nützlicher Freebies, iconshock, eine der größten Icon-Sammlungen mit mehr als einer Million Piktogramme und WPthemegenerator, ein Online-Tool zur Erstellung von WordPress- und XTML-Themes.

(dpe)

Kategorien
Inspiration Wissenstests

Das kleine 1×1 des Webdesigners: 10 Fragen zu HTML

Ein schneller Wissenstest für zwischendurch, das wäre was, dachten wir uns hier in der Redaktion von Dr. Web und Noupe Magazine. Und nachdem wir selber stets interessiert an dieser Art von Spiel sind, dachten wir weiterhin, auch unsere Leser könnten sich möglicherweise dafür erwärmen. Ein erster Versuch auf unserer Schwesterseite Noupe ist überaus positiv verlaufen. Von daher werden wir von nun an regelmäßig neue Kurztests anbieten. Unser erster Versuch hier beim guten alten Dr. Web beschäftigt sich mit dem Thema HTML, von dunnemals bis in Bälde. Erwarten Sie keine vollständige Abdeckung, wir stellen ja nur 10 Fragen.

daskleineeinmaleins

HTML und der Spezifikationsprozess: Zeit scheint keine Rolle zu spielen

Wir kennen hunderte von Designern mit hoher Expertise in der konkreten Umsetzung. Wir sind aber häufig genug überrascht, auf welch vergleichsweise niedrigem Level die Grundkenntnisse vielerorts angesiedelt sind. Das ist nicht völlig unverständlich, immerhin verdient man mit dem Wissen um den Zeitpunkt der letzten HTML-Spezifikation mit Empfehlungsstatus nicht unmittelbar Geld.

Das Problem aber ist, dass wir alle, die wir wollen, dass sich das Netz in unserem Sinne fortentwickelt, daran mitarbeiten müssen. Wir sollten dieses Thema nicht einer Handvoll Aktivisten überlassen, die sich im Spezifikationsdschungel besser auskennen. Die Fortentwicklung des Web sollte demokratisch erfolgen und schon jetzt sind die Entscheidungen innerhalb der Spezifikationsprozesse nicht durchgängig das, was man als demokratisch bezeichnen würde. Damit uns nicht andere das künftige Web definieren, müssen wir an dem Prozess teilnehmen. Dazu bedarf es Wissens um die Zusammenhänge. Wenn Sie alle der folgenden Fragen ohne die Hilfe Googles richtig beantworten können, sind Sie zumindest schon mal nicht ganz hinten dran…



Kategorien
Apps Design HTML/CSS JavaScript & jQuery Programmierung

Fries: Kostenloses Framework für die Entwicklung von Android-Apps mit HTML, CSS und JavaScript

Fries von Jaune Sarmiento liegt seit wenigen Tagen in der Version 1.0 vor. Fries stellt ein Framework zur Entwicklung von Web Apps zur Verfügung, die dem Look and Feel der Android UI entsprechen. Verwender der 4er Linie von Android werden sich direkt heimisch fühlen, wenn sie sich die Demos ansehen. In der aktuellen Version ist Fries optimiert auf die Zusammenarbeit mit PhoneGap, kann also nativ wirkende Apps hervor bringen.

fries-homepage

Fries will nicht nur das Prototyping beschleunigen

Vorneweg sei erwähnt, dass Fries unter der liberalen MIT-Lizenz steht, mithin für private und kommerzielle Zwecke verwendet werden darf. Das Projekt wird auf Github gehostet, kann aber auch auf der eigens eingerichteten Demo-Website heruntergeladen werden.

Fries bringt im entpackten Zustand gerade mal runde 470 KB auf die Waage, wovon die eigentlichen Framework-Bestandteile nochmal 100 KB weniger benötigen. Der Rest wird von Beispiel-HTML-Dateien belegt. In Version 1 verwendet Fries die offiziellen Android-Icons, was den authentischen Look der mit Fries erstellten Apps garantiert.

Fries setzt auf HTML, CSS und JavaScript, das Framework besteht im Wesentlichen aus CSS-Dateien und einigen Funktionalitäten, die mit JavaScript realisiert sind und als entsprechende Script-Dateien vorliegen. Fries ist modular aufgebaut. Jede Funktion steckt in einer eigenen Scriptdatei, die erforderlichenfalls von einer korrespondierenden CSS-Datei ergänzt wird. So ist die kollaborative Entwicklung weiterer Features einfach möglich, Sarmiento selber hat auch schon ein gutes Dutzend Ideen für weitere Funktionen.

Die Grundfunktionalität, also das „Übereinanderladen“ der einzelnen Seiten einer App wird vom JavaScript Stacks.js geleistet, das Sarmiento aus Ratchets Push.js entlehnte. Push.js ist nur für iOS tauglich. Stacks.js also sorgt nun für das Laden der Seitenelemente, wie auch der Inhalte über Ajax.

Fries: Simples Komponentensystem mit klarer Aufgabenteilung

Der Aufbau einer Fries-App ist von der Theorie her simpel. Alle Befehlselemente werden in ein Div der Klasse page gepackt, alle Inhaltselemente werden in ein Div der Klasse content geschrieben. Stacks.js kümmert sich um Zuordnung und erforderliche Ladevorgänge. Zusätzlich sorgt es für die Android-typischen Übergangseffekte mittels CSS3 Transforms.

Grundsätzlich kann eine Fries-App via Web-Server ausgeliefert werden, was während der Entwicklungsphase sicherlich der gängigste Weg sein dürfte. Ist die Entwicklung abgeschlossen, empfiehlt es sich spätestens, die App nach Adobe PhoneGap zu überführen, weil dadurch verschiedene Beschränkungen umgangen werden können. Die wichtigste dürfte dabei der Umstand sein, dass sich der Android-Browser nicht komplett wegblenden lässt, so dass die eigene App nicht den vollen Bildschirm nutzen könnte. Das ist nicht kritisch, aber wirkt nicht so professionell, wie es könnte. Zudem unterstützt PhoneGap alle gerätespezifischen APIs, die Android bereit stellt.

Derzeit bietet Fries fertige Komponenten für Action-Bars, Tabs, Schaltflächen, Listen und Formulare. Mittels der Komponente Spinners lässt sich eine Auswahlliste platzsparend unterbringen.

fries-spinners
Spinner im Einsatz

Alle Komponenten können auf der Demo-Website im Einzelnen getestet werden. Wie erwähnt steht Fries unter MIT-Lizenz, PhoneGap unter Apache-Lizenz zum kostenlosen Download bereit. Damit bilden die beiden Projekte ein Team, das den ambitionierten Entwickler ohne zusätzliche Kosten in die Lage versetzt, professionell wirkende Apps im Android Look & Feel zu erstellen.

Wenn ich jetzt noch verstünde, was die Assoziation Fries, zu deutsch Fritten, bedeuten soll, dann bliebe für mich keine Frage offen…

Links zum Beitrag

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Schnell und flexibel HTML-Mockups erstellen mit RoughDraft.js

Während der Entwicklung einer Website kommt stets ganz früh schon der Moment, wo ein fertig aussehendes Layout mit Inhalten dargestellt werden muss. Diese Inhalte gibt es zu diesem Zeitpunkt meist nicht, weshalb Blindtexte und allgemeine Fotos herhalten müssen. RoughDraft.js erstellt solche „Blindinhalte“ inklusive des nötigen HTML-Gerüstes mit wenig Aufwand für den Entwickler.

roughdraftjs

RoughDraft.js: Viel Inhalt mit wenig Quelltext

RoughDraft.js ist ein Tool, welches Inhalte basierend auf individuellen Vorgaben automatisiert ausgibt. Nachdem die JavaScript-Bibliothek eingebunden und gestartet ist, reichen wenige Zeilen HTML, um beliebig viele Inhalte in unterschiedlicher Form zu erzeugen:

<div data-draft-repeat="20">
  <img data-draft-image="200/100" />
  <p data-draft-text="15/w"></p>
</div>

Die zu generierenden Inhalte werden ganz normal per HTML ausgezeichnet. Über Data-Attribute werden den Elementen Informationen übergeben, mit denen RoughDraft.js die Inhalte generiert. Im Beispiel wird ein DIV-Element erzeugt, welches 20 Mal wiederholt wird. Darin enthalten ist jeweils ein Bild mit 200 mal 100 Pixel Größe, gefolgt von einem Textabsatz, der aus je 15 Wörtern besteht.

Um die generierten Inhalte per CSS gestalten und gegebenenfalls mit Funktionen versehen zu können, lassen sich die HTML-Elemente auch mit Klassen und weiteren Attributen versehen.

Blindtexte und Bilder einbinden

Die verwendeten Blindtexte und Bilder bezieht RoughDraft.js aus verschiedenen Quellen. Für Texte steht neben dem klassischen „Lorem Ipsum“ unter anderem auch die Alternative „Bacon Ipsum“ zur Verfügung. Bilder können von den Seiten Placehold.it, Placekitten.com und etlichen weiteren bezogen werden. Die Quellen können je nach Vorliebe ausgewählt werden:

$(window).roughDraft({
  "author": "bacon",
  "illustrator" : "placehold"
});

Während die Größe der Bilder in Pixeln angegeben wird, gibt es für die Textlänge unterschiedliche Einheiten. Neben der Anzahl der Wörter eines Textes („#/w“) gibt es die Möglichkeit, die Anzahl der Sätze („#/s“) oder Absätze („#/p“) vorzugeben.

Außerdem existieren spezielle Textformate, zum Beispiel für die Ausgabe von Zahlen oder Benutzerinformationen:

<p data-draft-number="100-999"></p>
<p data-draft-user="email"></p>

Bei Zahlen ist es möglich, einen Zahlenbereich vorzugeben, aus der eine Zahl per Zufall ausgewählt wird. Bei Benutzerinformationen stehen verschiedene Ausgaben wie Name, E-Mail-Adresse, Telefonnummer und Land zur Verfügung.

Fazit: RoughDraft.js ist schnell eingebunden und bietet viele Möglichkeiten, um unterschiedliche Inhalte sehr individuell generieren zu lassen. Vor allem ist es einfach möglich, Veränderungen vorzunehmen. Die Länge der Texte oder Größe der Bilder ist im Nu geändert.

Der Entwickler hat übrigens schon Ideen, um weitere Inhalte wie Videos und Zitate per RoughDraft.js in HTML-Mockups einbauen zu können.

Links zum Beitrag

  • Quickly create and prototype a full interactive HTML mock-up | RoughDraft.js

(dpe)

Kategorien
(Kostenlose) Services Design Essentials HTML/CSS

Ungewöhnlicher Codechecker: Holmes prüft HTML auf Validität, nutzt dafür CSS

Bei jedem Web-Projekt ist es angebracht und sinnvoll, den Quelltext auf Fehler und Einhaltung der Standards zu überprüfen. Statt seine Seite durch einen der vielen Validatoren zu schicken, kann man mit dem Diagnostik-Tool Holmes seine Website auch mit einer CSS-Datei auf eine nicht-valide und fehlerhafte HTML-Auszeichnung überprüfen.

holmes
Holmes

CSS-Datei einbinden und Seite checken

Um Holmes nutzen zu können, muss die entsprechende Stylesheet-Datei im Kopf des zu überprüfenden HTML-Dokumentes eingebunden werden. Außerdem ist das BODY-Element mit der Klasse holmes-debug zu versehen. Anschließend markiert Holmes alle HTML-Elemente rot, bei denen Fehler aufgetreten sind – zum Beispiel fehlende Pflichtattribute wie das ALT-Attribut bei Bildern.

Bei Elementen, für die es eine bessere oder sinnvollere Auszeichnung gibt – beispielsweise bei der Raute (#) als Link im A-Element – gibt Holmes eine Warnung aus, indem das Element gelb hervorgehoben wird. Außerdem markiert das Tool alle veralteten Elemente wie das CENTER– oder FONT-Element grau.

So funktioniert Holmes

Das Besondere an Holmes ist, dass es ohne Programmiersprache auskommt. Es nutzt die verschiedenen Selektor-Möglichkeiten von CSS, um Elemente aufgrund unterschiedlicher Kriterien hervorzuheben. Das Nichtvorhandensein des ALT-Attributes bei Bildern wird wie folgt per CSS festgestellt:

.holmes-debug img:not([alt]) {
  outline: 2px solid red;
}

Das Auftreten einer Raute als Link findet Holmes so heraus:

.holmes-debug a[href="#"] {
  outline: 2px solid #fd0;
}

Da Holmes auf teils recht neue CSS-Möglichkeiten wie die Pseudoklasse :not() setzt, lässt sich das Tool nicht mit allen Browsern anwenden. Aktuell funktioniert Holmes in Chrome, Firefox, Opera und Safari. Auch wenn es vom Entwickler nicht im Internet Explorer 10 getestet wurde, so kann ich nach eigenen Tests sagen: läuft.

Fazit: Holmes kann zwar nicht mehr als andere Validatoren, es geht aber einen anderen Weg. Es zeigt dem Entwickler direkt auf der Website, an welchen Stellen fehlerhafter oder verbesserungsfähiger Quelltext steht. Besonders hilfreich kann Holmes sein, wenn man ihn auf einer Website anwendet, die schon etwas betagt ist und die man nicht selbst erstellt hat.

HTML validieren – Links zum Beitrag

  • The CSS Markup Detective | Holmes

(dpe)