Werbeagentur Grafik-Deal.de in Langenhagen

CSS 2 + 3 Übersicht

s.noschka — Sun, 16 May 2010 21:40:57 +0000

Nachdem unsere Renovierungsarbeiten für die neuen Geschäftsräume nun bald abgeschlossen sind, kommen wir auch mal wieder dazu den Blog mit Leben zu füllen.

Bei der Arbeit mit CSS habe ich seit meinen ersten Zeilen Code Hilfsmittel immer zu schätzen gewusst. Ein sehr gutes Buch zum Einstieg in die Materie ist definitiv “CSS Praxis von Galileo Cumputing.”

Bei diesem Buch war eine sehr schöne Tabelle dabei, die alle möglichen CSS Eigenschaften aufgelistet, und die Kompatibilität in den verschiedenen Browsern farblich hervorgehoben hat. Diese Art von Übersichtstabellen habe ich bei der Enwicklung mit CSS häufig genutzt und als große Hilfe empfunden. Jetzt, da CSS 3 bereits Einzug gefunden hat ins moderne Webdesign und von immer mehr Browsern konfliktfrei interpretiert werden kann, nutze ich immer mehr Tabellen und s.g. “Cheat Sheets” um schnell Eigenschaften, Selektoren o.Ä. nachzuschlagen. Bei Smashingmagazine.com habe ich jetzt eine schöne Übersicht für CSS 2 und 3 gefunden, die auf keinem Webentwickler-Schreibtisch fehlen sollte. Hier können z.B. neue CSS3 Eigenschaften wie Text- oder Box-Shadow gefunden werden. Aufgelistet sind dann die entsprechende Syntax, die verschiedenen Formen für alle Browser und so weiter. Ich empfehle einen Besuch bei dem Anbieter, wo man die “Cheat Sheets” auch gleich herunterladen kann.

Cheat Sheets bei Smashingmagazine.com

Tweets mit jQuery anzeigen

s.noschka — Thu, 29 Apr 2010 20:44:28 +0000

Auf unserer Seite kann man ja in der Sidebar immer den letzten Tweet von unserem Twitter Account sehen, ich werde in den letzten Tagen öfter gefragt wie das realisiert wurde. Die Antwort ist mal wieder jQuery.

Ursprünglich hatten wir in die functions.js vom Wordpress theme eine Wordpress-Twitter Funktion eingebaut und die Funktion entsprechend in die Sidebar eingetragen, diese Lösung entpuppte sich als etwas instabil. Die deutlich bessere und einfachere Lösung kommt von jQuery. Mit dem folgenden Code wird der letzte Tweet ausgelesen und über den Selektor ins entsprechende Seitenelement eingetragen.

Im Code muss nur “Username” durch den eigenen Benutzernamen ersetzt werden und schon kann man das Beispiel ins eigene Projekt einbinden. In unserem Beispiel wird der neue Tweet in den Paragraph-Tag mit der ID “Tweet” eingefügt.

html Code





Show latest Tweet

jQuery Code

$(document).ready(function() {

         $.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
   				$("#tweet").html(data[0].text);
         });
});

#10 Video Tutorial – jQuery Slideshow mit Pfiff

s.noschka — Wed, 28 Apr 2010 17:03:23 +0000

#10 – Video Tutorial – jQuery Slideshow

Ich habe bei den jQuery Tutorials aus meinem Blog Eintrag eine jQuery Slideshow ausgewählt, bei der wir in diesem Video Tutorial den jQuery Code nachbauen und uns anschauen wie er aufgebaut ist.

Das Tutorial kommt ursprünglich von BuildInternet.com und beinhaltet einen Wechsel zwischen 4 Flickr Bildern, die Einbindung der jQuery Plugins easing und timer, sowie eine timer & switch Anweisung zur Steuerung der Slideshow.

html Code

Panning Slideshow | Build Internet Tutorial

This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. Head back to Build Internet for the full tutorial and explanation.

css Code

/*
	Panning Slideshow with jQuery
	Build Internet Tutorial (www.buildinternet.com)
	Written by Zach Dunn
*/

*{margin:0; padding:0;}

body{background:#353637; height:100%;}

#window{clear:both; width:960px; height:350px; background:#131310; overflow:hidden; position:relative; margin:10px auto 10px auto;}

#slideshow{width:1920px; height:700px; overflow:hidden; position:relative;}
	#slideshow li{width:960px; height:350px; float:left; display:inline;}

#content{background:#131310 url('images/speech-bubble.jpg') top left no-repeat; color:#FFF; font-family:georgia, serif; width:960px; margin:0px auto 10px auto; overflow:hidden; padding-top:20px;}

	#content p{font-size:16px; line-height:1.6em; padding:40px 30px 30px 0px; margin:0;}
		#content p a{color:#73ccff;}
		#content img{float:left; padding:30px;}

p.footer{text-align:center; color:#ccc; font-size:12px; font-family: arial, sans-serif;}
	p.footer a{color:#73ccff; text-decoration: none;}

jQuery Code

$(document).ready(function() { 

var current_panel = 1;

var animation_duration = 2500;

	$.timer(6000, function (timer) {

		switch(current_panel) {

		case 1:
		$('#slideshow').stop().animate({left: '-960px',top: '0px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 2;
		break;	

		case 2:
		$('#slideshow').stop().animate({left: '0px',top: '-350px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 3;
		break;

		case 3:
		$('#slideshow').stop().animate({left: '-960px',top: '-350px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 4;
		break;

		case 4:
		$('#slideshow').stop().animate({left: '0px',top: '0px'}, {easing: 'easeOutBack', duration: animation_duration});
		current_panel = 1;
		break;
		timer.reset(12000);
		}

	});

});

Platz 5 bei Google in 3 Tagen!

s.noschka — Wed, 28 Apr 2010 15:33:19 +0000

SEO (Suchmaschinenoptimierung) ist laut vielen führenden Experten eine Frage von “Best Practices”, also der Einhaltung gewisser Regeln während der Programmierung einer Website. Dazu gehören z.B differenzierte Meta-Keywords auf allen Einzelseiten und die Platzierung der h-Tags, die entsprechende Keywords beinhalten.

Um die vorbildliche Arbeit in diesem Bereich zu demonstrieren, kann man sich (Eigenlob usw…) getrost unsere neue Seite ansehen. Bisher haben wir ausschließlich Meta-Arbeit geleistet und die grundlegenden “Best Pratices” beachtet. Anspruchsvollere Techniken wie “Image Replacement” per CSS o.Ä wurden überhaupt noch nicht eingebaut. Die Seite ist seit knapp 4 Tagen online und vor dem Relaunch waren unsere Seiten erst auf Seite 5 der Google Ergebnisse gelinkt, das ist ein immenser Sprung. Diese tollen Ergebnisse aus der letzten Zeit kommen natürlich auch unseren Kunden gelegen, wenn Sie auch eine Seite möchten, die bei Suchmaschienen entsprechend gut indexiert werden, kontaktieren Sie uns.

Nun können wir voller Stolz verkünden, dass sich unsere neue Seite für unsere favorisierten Keywords “Werbeagentur Langenhagen” bei Google nach der ersten Indexierung auf Seite 1 und Platz 5 eingeordnet hat, Tendenz steigend. 3 Werbeagenturen stehen noch vor uns.
Sobald wir die Zeit finden, unsere Seite in Sachen SEO auch mit fortgeschrittenen Techniken zu verbessern, sehe ich eine ungefährdete Nr.1 für unsere Seite in naher Zukunft. So kann man an einem aktuellen Beispiel einer neuen Seite die Funktionsweisen der Suchmaschinenindexierung erahnen und auch verfolgen. Wir werden bei Veränderung der Platzierung wieder Auskunft über die aktuellen Entwicklungen geben.

Google Platzierung

30 Best jQuery Tutorials

s.noschka — Wed, 28 Apr 2010 14:59:16 +0000

jQuery ist für Entwickler eine große Spielwiese. Die vielen Anwendungsmöglichkeiten erzeugen in geübten Händen großartige Plugins und Funktionen. Ich habe eine schöne Seite gefunden, die 30 jQuery Tutorials mit verschiedenen Schwierigkeitsgraden bewirbt.

Diese Tutorials werden z.T von namenhaften Webentwicklern zur Verügung gestellt. Die Jungs von NetTuts.com sind ebenso vertreten wie CSS-Tricks.com. Die Lava-Lamp-Style Menüstruktur aus der Tutorial-Liste ist beispielsweise in abgeänderter Form in unserer Hauptnavigation implementiert. Im Laufe der nächsten Wochen werden wir sicher auch das ein oder andere Tutorial aus der Liste in einem Video-Tutorial verarbeiten.

The best designs

#9 Video Tutorial – Das Wordpress Backend

s.noschka — Thu, 22 Apr 2010 14:33:46 +0000

#9 Video Tutorial: Das Wordpress Backend

Nach der Installation unseres ersten Wordpress Blogs schauen wir uns in diesem Video Tutorial das Wordpress Backend für die Administration der Seite an. Wir werfen einen Blick auf die Erstellung von Artikeln und Seiten, erweitern die Sidebar mit den vorgegebenen Widgets und sehen welche Möglichkeiten es für die Permalinks gibt. Nach diesem Tutorial werden wir die ersten Plugins installieren und in Kürze das Aussehen unseres Blogs verändern.

#8 Video Tutorial – Wordpress installieren

s.noschka — Thu, 22 Apr 2010 14:15:44 +0000

#8 Video Tutorial: Wordpress installieren

Für alle weiteren Wordpress Tutorials ist es zunächst einmal wichtig, dass wir Wordpress installieren können. Wir werden bei dem Free-Hoster Funpic.de einen Account erstellen, eine MYSQL Datenbank für die Installation vorbereiten und anschließend per FTP die Wordpress Dateien hochladen. Die nötigen Modifikationen in der wp_config.php machen wir direkt auf dem Server mittels Coda und dann wird der erste Wordpress Blog in Betrieb genommen. Die Links zum nachbauen werden nachfolgend aufgeführt.

wp_config.php

// ** MySQL Einstellungen - diese Angaben bekommst du von deinem Webhoster** //
/**  Ersetze putyourdbnamehere mit dem Namen der Datenbank, die du verwenden mˆchtest. */
define('DB_NAME', 'testblog2010');

/** Ersetze usernamehere mit deinem MySQL-Datenbank-Benutzernamen */
define('DB_USER', 'testblog2010');

/** Ersetze yourpasswordhere mit deinem MySQL-Passwort */
define('DB_PASSWORD', 'testblog2010');

/** Ersetze localhost mit der MySQL-Serveradresse */
define('DB_HOST', 'localhost');

/** Der Datenbankzeichensatz sollte nicht ge‰ndert werden */
define('DB_CHARSET', 'utf8');

/** Der collate type sollte nicht ge‰ndert werden */
define('DB_COLLATE', '');

#7 Video Tutorial – jQuery auf einer Live-Website

s.noschka — Wed, 21 Apr 2010 14:11:13 +0000

#6 Video Tutorial: jQuery auf einer Live-Website

In diesem Video Screencast schauen wir uns die Seite RAschuler.de an, die wir für die Rechtsanwälte Schuler & Partner in Hannover erstellt haben. Wir benutzten an diversen Stellen JavaScript/jQuery. Die Navigation z.B wird komplett über jQuery gesteuert und auch die Inhalte werden per jQuery load() in die entsprechenden Divs geladen. Die komplette Seite läuft also per AJAX. Des Weiteren haben wir einige jQuery Plugins verwendet, die im Video auch noch einmal beleuchtet werden.

jQuery Plugins

#6 Video Tutorial – Sliding Divs up and down

s.noschka — Wed, 21 Apr 2010 09:55:31 +0000

#6 – Divs hoch und runter sliden

Wie in unserem FAQ Bereich wollen wir hier mit Hilfe von jQuery einen Div-Slider bauen. Ich habe die FAQs leicht umgebaut und als neues Projekt aufgebaut. Auf Knopfdruck sollen nun die entsprechenden Antworten zu den FAQs runtergefahren werden. Bei erneutem Klick sollen diese wieder hochfahren. Wir schreiben in diesem Tutorial den gesamten JavaScript Code für ein vorbereitetes und gestyltes System von FAQs. Die Beispieldateien können wie immer direkt heruntergeladen und modifiziert werden.

html Code

PHP Testseite

Werbeagentur Grafik-deal.de

Wieviel kostet eine Beratung bei Grafik-Deal.de?

Eine Beratung ist selbstverständlich in jedem Fall kostenlos. Wir beraten Sie gern detailliert und eingängig bevor wir über Preise und Abrechnungen sprechen. Sprechen Sie uns einfach an und überzeugen Sie sich selbst.

Wieviel kostet die Umsetzung meines Projekts?

Pauschale Preisangaben sind in diesem Fall natürlich ungemein schwierig. Jedes Projekt wird so individuell bearbeitet, dass sich Zeitaufwand, Projektelemente und die Anforderungen immer so sehr unterscheiden, dass man pauschale Angaben unmöglich mit fixen Angaben machen kann. Für alle Interessierten bieten wir aber eine Preisliste an, die für viele Teilprojekte Richtwerte beinhaltet. Kontaktieren Sie uns, wir schicken Ihnen gern einen ersten Überblick.

Wie lange dauert die Umsetzung eines Projekts?

Um Ihnen eine grobe Vorstellung für den Zeitumfang eines Projektes vermitteln zu können, haben wir einige grobe Richtwerte zusammengetragen. Es handelt sich dabei natürlich um unverbindliche Richtwerte, die etwas großzügiger gewählt sind. Im Allgemeinen arbeiten wir ab Projektbeginn non-stop um Ihnen Zeit und Geld zu sparen.

Website Standard: ca. 2-3 Wochen
Website dynamisch / CMS: ca. 3-4 Wochen
Webshop: ca. 4-8 Wochen
Printwerbung inkl. Druck: ca. 6-10 Tage
Umfangreiche Printwerbung: ca. 2-3 Wochen

Kann ich meine Website während der Erstellung beobachten?

Wir richten für Sie eine eigene Projekt-URL ein, unter der Sie den aktuellen Status Ihrers Webprojekts ständig selbst verfolgen können. Bei großen Entwicklungsschritten werden Sie von uns nochmal gezielt darauf hingewiesen. So haben Sie zu jedem Zeitpunkt den vollen Überblick über Ihren Projektstatus.

Betreuen Sie auch Firmengründer?

Für Firmengründer haben wir spezielle Start-Up Modelle im Angebot, die individuell alle Anforderungen für einen erfolgreichen Start in die unternehmerische Tätigkeit gewährleisten. Sprechen Sie uns unverbindlich an, wir informieren Sie gern.

Ich habe schon eine Werbeagentur, möchte aber wechseln.

Wenn Sie bereits von einer Werbeagentur betreut werden, setzen wir uns gern mit dieser in Verbindung und bereiten einen Wechsel oder eine Zusammenarbeit vor. Sie müssen uns nur mitteilen wie Sie sich die neue Aufgabenverteilung vorstellen und wir kümmern uns um den Rest.

JavaScript Code

$(document).ready(function() {

	$('.faqquestion').click(function() {

		if ( !$(this).hasClass('show') ) {

        	$(this).css('border','1px solid black');
		$(this).addClass('show').next('.faqanswer').slideDown('normal');

		} else {

		$(this).removeClass('show').next('.faqanswer').slideUp('normal');
		$(this).css('border','1px solid #D2D5D6');

		}

		});	

	});

Web Design Galerie

s.noschka — Mon, 19 Apr 2010 17:01:44 +0000

Als Inspiration nehme ich immer wieder gern Websites wie thebestdesigns.com. Auf der Suche nach frischen, eigenen Ideen hilft es immer, wenn man sich ansieht, was die Konkurenz macht.

Die Seite bietet eine riesige Menge guter Designs, featured Designer und jede Menge mehr. Für praktisch jede mögliche Farbkombination gibt es hier Anschauungsunterricht. Hier kommt man definitiv auf Ideen, denn die Designs kommen zum großen Teil von führenden Webdesignern der Szene. Stöbern Sie doch einmal durch das riesige Archiv…bestimmt entwickeln Sie beim surfen tolle Ideen für Ihr nächstes Projekt.

The best designs