Bei Terrashop gibt es zur Zeit eines der besten Fachbücher zum Thema CSS3 zu einem drastisch reduzierten Preis. Das Buch “CSS3 – Leitfaden für Webdesigner” geht für schlanke 14,99 € anstelle der sonst fälligen 39,80 € über die virtuelle Ladentheke. Unter unseren Leserinnen und Lesern verlosen wir zudem fünf Exemplare auf bewährte Weise. CSS3 – Leitfaden für Webdesigner Das Fachbuch “CSS3 – Leitfaden für Webdesigner” aus dem Addison-Wesley Verlag wurde geschrieben von der Münchnerin Florence Maurice und erschien im Sommer 2011. Auf der eigens für den Leitfaden geschaffenen Website css3-leitfaden.de hält Frau Maurice die Informationen aktuell. Erst im November 2012 aktualisierte sie die Tabelle zur Browserkompatibilität. Ebenfalls dort verfügbar sind alle Listings, sowie alle Links des Buches. Die wesentlichen Inhalte des Leitfadens für den Webdesigner sind: CSS3 und der Stand der Dinge Browserkompatibel gestalten mit Modernizr, Filtern und Conditional Comments Mit den neuen Selektoren und Pseudoklassen arbeiten Transparenzen erstellen mit opacity, RGBA & Co. Mehr Typografie – von Webfonts bis zu Texteffekten Neue Optionen für Rahmen und Hintergrundbilder Gestalten mit Farbverläufen, Transformationen (inkl. 3D), Ãœbergängen und Animationen Gerätespezifische Ausgabe mit Media Queries – vom Desktop bis zum iPhone Neue Layout-Optionen mit Multi Column, Flexible Box und Grid Layouts In insgesamt [...]* Ähnliche Beiträge“Web Usability” – Büchergewinnspiel…29 kostenlose CSS3 Code Snippets sorgen für frischen Wind…CSS3 Button-Generator erstellt komplexe CSS3-ButtonsExpressive Web: HTML5 und CSS3 kreativ erklärtCSS3-Maker: Komfortable GUI für komplexe CSS3-Effekte
Der Bundestag hat das Leistungsschutzrecht eingeführt (Bundestags-Drucksache 17/11470), der Bundesrat hat es abgesegnet, so dass das sog. Siebente Gesetz zur Änderung des Urheberrechtsgesetzes mit seiner Verkündung im Bundesgesetzblatt in Kraft treten kann. Der Bundesrat hätte zwar mit seiner Mehrheit das Gesetz nicht verhindern, es aber immerhin in den Vermittlungsausschuss überweisen und damit bis über die Bundestagswahl im September hinauszögern können, so dass es wegen des Grundsatzes der Diskontinuität nochmals auf den Weg hätte gebracht werden müssen. Leistungsschutzrecht: Die Netzgemeinde ist schwer getroffen Seither herrscht in der Netzgemeinde eine gewisse Ratlosigkeit, weil man die Kraftprobe zwischen der analogen und der digitalen Welt verloren glaubt. Sicherlich, das Kräftemessen zwischen zwei grundverschiedenen Systemen, dem analogen und dem digitalen, geführt mit klassischen Mitteln der Politik, mit Einflussnahme und Lobbyismus, einerseits und den Mitteln des Netzes andererseits, konnte das Leistungsschutzrecht nicht verhindern. Schon sieht der Anführer der digitalen Bataillone, Sascha Lobo, ihren Einfluss enorm geschwächt, alles Aufbäumen gegen das geplante Gesetz habe nichts gebracht, und daher fasst er abschließend das Gewicht der Netzgemeinde zusammen: „Wirkung null wäre noch geprahlt“. Aber ist all die Aufregung um das Leistungsschutzrecht angebracht? Werfen wir einen juristischen Blick darauf. Leistungsschutzrecht: Wie es tatsächlich gestaltet ist Das neue „Leistungsschutzrecht für Presseerzeugnisse“ [...]* Ähnliche BeiträgeGefahr für Seitenbetreiber: Abmahnungen bei fehlender oder…Jahresrückblick 2012: Die wichtigsten Entscheidungen zum…Jahresrückblick 2012: Die wichtigsten Entscheidungen zum…Jahresrückblick 2012: Die wichtigsten Entscheidungen zum…Jahresrückblick 2012: Die wichtigsten Entscheidungen zum…
Eine gute Verpackung gibt dem Konsumenten einen Kaufanreiz, informiert und zeigt einen einzigartigen Look, ein wiedererkennbares und erinnerungswürdiges “Gesicht”, bei großer Funktionalität. Die hier vorgestellten Beispiele sind (zumeist) Prototypen. Ideen, die vielleicht eines Tages in den Läden stehen. Ich würde das begrüßen, denn allemal ziehen diese Verpackungsdesigns den Blick auf sich. Wir haben 40 außergewöhnliche Exemplare ausgesiebt und bieten Ihnen dazu noch Tipps, wie Sie Ihren eigenen Prototypen in Photoshop entwerfen. Hardegger Hüppen Designer: Nadine Geissbühler © Nadine Geissbühler Woolly Heads Designer: Rellana Wool © Rellana Wool Dillon’s Small Batch Distillers Designer: Insite Design © Insite Design Gotta Moo Package Designer: Narani Kannan © Narani Kannan Le Chat Designer: Isabela Rodrigues © Isabela Rodrigues Packaging Project 43-47 Designer: ampro.ro © ampro.ro The Butler’s Pantry Designer: Brandcentral © Brandcentral Mini-Tutorial #1: Eigenes Label entwerfen 01 Grundformen nutzen Bei der Gestaltung eines eigenen Labels ist es sehr hilfreich, geometrische Grundformen als Basis einzusetzen, also Rechtecke, Kreise oder Dreiecke. Hier habe ich das Polygon-Werkzeug mit einem dunklen Grünton eingesetzt. Damit so schöne abgerundete Spitzen entstehen, stellen Sie in der Optionsleiste die Seiten auf 24 ein und klicken auf das Zahnrad, um zu den weiteren Optionen zu gelangen. Aktivieren Sie Abrunden und Stern mit [...]* Ähnliche Beiträge40 freie Fonts, die der Typografie-Liebhaber 2013 unbedingt…40 frische Logo-Ideen für Gestalter (plus Tipps zur…Inspirationsturbo: 40 aufwändig gestaltete…44 Corporate Identities und wie Sie mit Photoshop Ihrer…Kreativitätsturbo: 40 hochwertige und ungewöhnliche…
1. April 2013. Dr. Web ist seit einem Jahr wieder da. Die Neueröffnung 2012 erwies sich als wahr und nachhaltig. Wir hatten ja schon damals angekündigt, dass es sich nicht um einen Aprilscherz handeln würde. In diesem Jahr wollen wir daher mehr zum Aprilspaß beitragen und stellen Ihnen zu diesem Zweck das jQuery-Plugin Fool.js vor. Eine ernsthaftere Anwendung haben wir mit Faker.js auch noch für Sie. Ist ja keine Witze-Seite hier… Fool.js bringt Ihre Besucher um den Verstand Fool.js von Visual Idiot ist ein dediziertes Plugin für den ersten April oder jeden anderen Tag, an dem Sie Ihre Besucher in den Wahnsinn treiben wollen. Ein simpler Funktionsaufruf nach dem Einbinden des Plugins im Head bietet Zugang zu einem ganzen Portfolio fieser Scherze. Es kann relativ harmlos los gehen: 1 2 3 $(document).ready(function() { // When the document is ready $.fool('rick'); // Run the Rick Astley prank }); Dieser Call führt dazu, dass die Besucher gerickrollt werden – ein Klassiker moderner Späßekunst. $.fool kann jedoch auch mit mehreren Späßen gleichzeitig bestückt werden. So können Sie Ihre Besucher natürlich noch weit effektiver zur Verzweiflung bringen: 1 2 3 4 $.fool({ hiddenVideos: true, // Show some wonderfully annoying videos vanishingElements: true, // Hide [...]* Ähnliche BeiträgeBookBlock und Windy: 2 jQuery-Plugins für…jQuery Custom Content Scroller: Schluss mit hässlichen…Conditionizr für jQuery – Bedingtes Laden von…HTML5 Server-Sent-Events: Per JavaScript auf Server-RequestsHTML5: Schicke Tooltipps mit Tooltipster für jQuery
CheckPanel ist eine brandneue Web-App aus Deutschland. Ziel des derzeit in öffentlicher Beta befindlichen Dienstes ist es, wiederkehrende Aufgaben im Umfeld des Betriebs einer Website zu verwalten. Zu abstrakt? Ein Standardfall für eine wiederkehrende Aufgabe wäre beispielsweise die Prüfung, ob die Website oder Teile davon erreichbar sind, das sog. Web-Monitoring. Aber auch andere Funktionalitäten sollten regelmäßiger Wartung unterliegen, wie der erfahrene Admin sicherlich bestätigen wird. CheckPanel: Schlanke Optik, intuitive Bedienung CheckPanel, ersonnen und betrieben durch den deutschen Web-Entwickler Florian Sander, kann derzeit völlig kostenfrei genutzt werden. Für die Zukunft stellt sich der Betreiber ein Freemium-Modell vor. Teile des Dienstes werden aber auf Dauer kostenfrei nutzbar bleiben. Derzeit liegen keine Informationen darüber vor, inwieweit Funktionsbeschränkungen greifen werden. CheckPanel ist schnell einsatzbereit. Lediglich eine E-Mail-Adresse, sowie ein Passwort muss der Interessent hinterlegen. Nach der Bestätigung der eingegebenen Adresse mittels eines Links aus einer vom System automatisch versandten E-Mail kann es los gehen. Ein weitgehend leeres Interface fordert zur Anlage der ersten Checkliste auf. So wie ich es verwende, sind Checklisten meine Projekte, für die ich bestimmte wiederkehrende Tasks definieren will. Als erstes setze ich den Klassiker, den Verfügbarkeitstest der gesamten Website auf und definiere diesen Task als Robocheck. Ein Robocheck wird etwa [...]* Ähnliche BeiträgeTrello: Kostenloses, projektorientiertes Kollaborationstool…CollabPress macht aus WordPress ein Kollaborationstool für…Avatars.io für App-Entwickler – Alle Avatare zentral…Twissues: Neuer Twitter-Service aus Spanien sorgt für…Medium: Neue Plattform der Twitter-Gründer will…
Die Zeiten, in denen CSS rein mit der Hand geschrieben werden musste, sind schon seit einiger Zeit vorbei. In den letzten Jahren konnten sich immer mehr kleine Helferlein etablieren, die einzelne Aspekte des CSS-Design visuell unterstützen. Aus Spanien kommt eine neue Web-App, die vier Teilbereiche komfortabel abzudecken versteht. Die Entwickler des Dienstes CSS Matic sind alte Bekannte. Freepik.com und Thumbr.it zeichnen für CSS Matic verantwortlich Dr. Web-Leserinnen und -Leser kennen die Suchmaschine Freepik.com. Im Sommer 2012 stellten wir den Service vor. Wir konnten Freepik mit Einschränkungen empfehlen. Positiv erschien uns die hohe Zahl gefundener Ressourcen für die verschiedenste Bedarfslagen und Desktop-Softwares. Weniger erwärmen konnten wir uns für das Konzept der Drittverlinkung. So ist es bei Freepik stets erforderlich, die Lizenz der gefundenen Ressource noch einmal gründlich auf deren Quell-Website gegen zu checken. Freepik selber hostet (zumindest in der Regel) den entsprechenden Download nicht. Seit einigen Wochen ist das Freepik-Team sehr aktiv mit der Erstellung eigenen Contents beschäftigt. Man darf gespannt sein, ob es da nicht bald etwa zu einem exklusiven Freebie für die Leser von Dr. Web und Noupe Magazine kommen könnte ;-) Nach eigenen Aussagen wollte der Gründer von Freepik, der Spanier Alejandro Sánchez Blanes, der Design Community etwas [...]* Ähnliche BeiträgeFreepik: Suchmaschine für kostenlose Design-RessourcenCSS3: Verläufe so einfach wie in Photoshop mit ColorZillaCSS3 Toolkit – GUI für Mac OSX derzeit kostenlosCSS3 Button-Generator erstellt komplexe CSS3-ButtonsBorder-Image-Generator: Grafische CSS-Rahmen leicht gemacht
Die Entwicklergemeinde rund um jQuery ist sehr aktiv. Nahezu stündlich werden Plugins ersonnen, die es so bislang nicht oder nicht in der Form gab. Der Fortschritt ist kaum noch zu protokollieren. Dabei sind große Projekte, darunter sind aber auch viele kleine Helfer für ganz bestimmte Anwendungszwecke. Fünf dieser kleinen Tools stellen wir im folgenden Beitrag vor. Imageloader.js – Schnelles Vorausladen von Bildern Imageloader.js erledigt eine gängige Aufgabe schnörkellos. Dem jQuery-Plugin wird ein Array von Bild-URLs übergeben. Dieses lädt es vor. Eine Callback-Funktion bei Fertigstellung des Preloads erlaubt, weitere Programmlogik daran zu knüpfen. Gleiches existiert für den Fall eines Fehlers. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function(){ $.imageloader({ urls: ['images/0.jpg', 'images/1.jpg', 'images/2.jpg', 'images/3.jpg'], onComplete: function(images){ // when load is complete }, onUpdate: function(ratio, image){ // ratio: the current ratio that has been loaded // image: the URL to the image that was just loaded }, onError: function(err){ // err: error message if images couldn't be loaded } }); }); Imageloader.js steht unter MIT-Lizenz zur kostenfreien Nutzung bereit. Jtwt.js – Anzeigen von Tweets auf Websites via JSON Jtwt.js erlaubt es, unter Zugriff auf Twitters JSON API, die aktuellen Tweets eines bestimmten Users im [...]* Ähnliche BeiträgeResponsive Menu: jQuery-Plugin minimiert Navigationsmenüs…Roundabout: jQuery-Plugin bringt schicke Coverflow-Optik in…Toolbar.js für jQuery und Bootstrap: Flexible…Handsontable: Einfache Tabellenbearbeitung mit jQuery und…Social jQuery: Einheitliche Social-Buttons statt…
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 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: 1 2 3 .holmes-debug img:not([alt]) { outline: 2px solid red; } Das Auftreten einer Raute als [...]* Ähnliche BeiträgeCSS3: Individuelle Nummerierungen mit der…Heyoffline.js: Freies JavaScript überwacht den OnlinestatusCSS4 bereits heute nutzen: Elternelemente ansprechen mit…JavaScript-Turbo: Head.js verkürzt die Ladezeiten…HTML5 Server-Sent-Events: Per JavaScript auf Server-Requests
Eine Website sollte grundsätzlich natürlich so aufgebaut sein, dass sich alles intuitiv ergibt und man keine Einführung braucht, um sich zurechtzufinden. Manchmal ist es jedoch sinnvoll, auch regelmäßige Besucher etwa auf neue Funktionen oder Inhalte aufmerksam zu machen. Intro.js ist ein Framework, das Besucher per Tooltip in Form einer kleinen Einführungstour auf bestimmte Bereiche der Website hinweist. Man kennt das Prinzip solcher Introtouren zum Beispiel von Facebook. Kleine beschreibende Tooltips poppen beim Besuch einer Seite auf und zeigen auf neue Funktionen. Weist eine Seite mehrere Neuerungen auf, lassen sich die Tooltips durchklicken und man wird schnell auf alle Veränderungen einer Seite aufmerksam gemacht. Mit Intro.js schnell Touren erstellen Intro.js stellt ein Framework zur Verfügung, mit dem sich spielend einfach und schnell solche kleinen Touren realisieren lassen. Dazu müssen die JavaScript- sowie die Stylesheet-Datei des Frameworks eingebunden werden. Anschließend werden alle HTML-Elemente, für die ein Tooltip erscheinen soll, mit entsprechenden Data-Attributen ausgezeichnet: <div data-intro="Informationstext" data-step="2"></div> Ãœber das Attribut data-intro wird der Text angeben, der im Tooltip erscheinen soll. data-step gibt bei mehreren Tooltips an, an welcher Stelle innerhalb der Tour der Hinweis erscheinen soll. Es werden automatisch Buttons zum Vor- und Zurückblättern eingeblendet, sodass man schnell durch alle Hinweise durchklicken kann. [...]* Ähnliche BeiträgeHINT.css – Tooltipps ganz ohne JavaScript, nur mit…HTML5: Schicke Tooltipps mit Tooltipster für jQueryHTML5 Server-Sent-Events: Per JavaScript auf Server-RequestsHTML5: Threesixty.js generiert 360-Grad-Ansichten aus…Aus der Nähe betrachtet: Schöne Zoomeffekte mit…
Da schrecken selbst die Profis zurück: Haare freistellen. Eine recht anspruchsvolle und zeitaufwändige Aufgabe, wenn selbst feinste Haarstrukturen vom Hintergrund gelöst werden sollen, ohne Verfärbungen des alten Hintergrundes oder allzu grobe Auswahlen. Auch für den Einsteiger geeignet: Wir stellen Ihnen zwei professionelle Techniken zum Freistellen vor, die besonders in Kombination zu perfekten Ergebnissen führen und zeigen Tipps und Tricks zur Optimierung von schon freigestellten Haaren. Haare freistellen: ein heikles Thema Haare freistellen mit einem Kanal 01 Kanal anlegen Ã-ffnen Sie das Dokument in Photoshop und drücken Sie das Tastenkürzel Strg+J auf der Tastatur, um die Hintergrundebene zu kopieren. Blenden Sie die Hintergrundebene über einen Klick auf das Augensymbol im Ebenenbedienfeld aus. Ein Doppelklick auf den Ebenennamen „Ebene 1“ ermöglicht es uns, diese Ebene umzubenennen, etwa in „Haare freigestellt“. Wechseln Sie von der Ebenen- in die Kanäleansicht. Falls der Reiter Kanäle nicht zu sehen ist, klicken Sie im Menü auf Fenster > Kanäle. Sie sollten bei einem RGB-Bild (Bild > Modus > RGB-Farbe) drei Kanäle sehen können. Klicken Sie die Kanäle Rot, Grün und Blau nacheinander an und sehen Sie, wo sich die Haare optimal vom Hintergrund absetzen, wo der größte Kontrast zu sehen ist. Kopieren Sie diesen Kanal über das [...]* Ähnliche BeiträgePhotoshop CS5: Hautretusche auf zwei EbenenPhotoshop: Teintkorrekturen ohne GesundheitsrisikenPhotoshop: Tilt-Shift- und Lomografie-Effekt für…Photoshop-Tipps: Fotos beim Freistellen umrechnen oder…Photoshop: Interessantere Fotos mit Farbmanipulation und…
