Archiv der Kategorie: HTML5 und CSS3

JQuery best practice: Javascript Funktionen auslagern und über Klassen aufrufen

Veröffentlicht am von
jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

Javascript jQuery best practice:
Alle Javascript Funktionen sollten in ein externes Javascript File ausgelagert werden. Das Javascript File wird dann über ein <script>-Tag im head-Bereich oder vor dem schließenden Body-Tag </body> eingebunden. Schauen wir uns ein praktisches Javascript Best Practice Beispiel an. Belegen wir einen HTML Link mit einer Javascript Function:

 

 

jQuery Javascript best practice example:
HTML in der Seite
<a href=”#” class=”doSomeMagic”>Do some magic</a>

Javascript jQuery best practice im ausgelagerten JS-File
$(‘a.doSomeMagic’).click(function(){
// Magic code or simple
console.log(‘Right here!’);
});

Die jQuery .click() Methode erlaubt uns einfach ein Event an ein bestimmtes HTML

HTML5 Webdesign aus Duisburg Logo

HTML5 Webdesign aus Duisburg Logo

Element zu binden. In diesem Falle wird die oben beschriebene Javascript Funktion an alle Links mit der Klasse “doSomeMagic” gebunden. Das ist auch der große Vorteil dieser Art der Programmierung. Es ist zentral und Darstellung und Logik von einander getrennt. Betrachten wir hierzu ein Javascript jQuery bad practice example.

Javascript jQuery bad practice example
<a onclick=”doSomething()” href=”#”>Click!</a>

Hier wird direkt der Javascript Funktionsaufruf im A-Tag HTML Element ausgeführt. Dadurch ist das Javascript nicht mehr klar vom HTML Code getrennt. Würde sich die Funktion ändern, also umbenannt oder Parameter hinzugefügt, müsste das immer an allen Stellen im HTML Code geändert werden. Das macht dann erheblichen Mehraufwand bei Änderungen.

 

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

Weiterführende Links Javascript jQuery:
jQuery Library
http://www.jquery.com/ 

Einstieg in die Internetprogrammierung: Responsive Webdesign – was ist das?

Veröffentlicht am von
Responsive Design Webdesign Duisburg Quelle mediaqueri.es

Responsive Design Webdesign Duisburg Quelle mediaqueri.es

Responsive Webdesign ist ein Begriff der zur Zeit verstärkt diskutiert wird. Ich werde in den nächsten Wochen vermehrt über das Thema bloggen und das hier ist der erste Artikel zu der Serie “Responsive Webdesign”.

Responsive Webdesign – Was ist das?
Ein Responsive Webdesign passt sie an die jeweilige Größe des Ausgabegerätes an. Das sind heute Fernseher, Desktop PC, Notebooks, Tablets und Smartphones. Derzeit stark im Fokus ist Responsive Webdesign für Smartphones. Man spricht hier von einer mobilen Webseite. Responsive Design bezieht sich allerdings bei dem Entwurf der Layouts auf 4 Formate. Das sieht man sehr gut in den angehängten Beispielen.

Responsive Webdesign – Wie geht das technisch?
Grundsätzlich wird die große Ansicht einer Seite als HTML und CSS umgesetzt und dann je nach Auflösung zusätzliche CSS Regeln geladen. So werden beispielsweise Webseiten Bereiche, wie eine Sidebar auf der rechten Seite ausgeblendet oder Webdesign Navigationen nur vertikal und nicht mehr horizontal abgebildet. Das kann über mediaqueries oder mit Hilfe von JavaScript realisiert werden. Es sollte dem Kunden jedoch immer möglich sein die große Ansicht auch auf einem kleinen Gerät zu laden, wenn er das möchte. So kommt er auch an alle Informationen, die auf der kleineren Ansicht eventuell nicht nur erreichen sind.

Responsive Webdesign – Was bringt es dem Kunden?
Ein Kunde entspricht einer bestimmten Zielgruppe und sucht sein eigenes Ziel auf der Internetseite. Nehmen wir als Beispiel die Internetseite eines Restaurants. Typische Navigationspunkte könnten hier sein:

  • Bilder von den Räumen
  • Reservierung
  • Veranstaltungen
  • Öffnungszeiten
  • Facebook Chronik
  • Speisekarten
  • Specials

Das ist jetzt exemplarisch. Wichtig ist zu verstehen das ein Webuser eher stöbert und auf Bilder aus ist, während ein mobiler User konkrete Informationen möchte. Und hier liegt der Teufel dann auch schon im Detail. Man braucht ein Webdesign Konzept für die mobile Ansicht einer Webseite. Für den mobilen User sind Kontakt, Adresse und Anfahrt viel wichtiger, als eine Bildergalerie und eine 1,5 MB große Speisekarte im PDF Format.

Responsive Webdesign – Was bringt es dem Seitenbetreiber
Die Besuchergruppe mit Tablets und Smartphones macht zur Zeit eine sehr starke Wachstumsphase durch. Allerdings sind im Bereich Smartphones APPs immer noch führend. Vorallem weil sie über zahlreiche Funktionen, wie z.B. eine GPS Ortung verfügen und deshalb viel spezifischer sind. Aber Responsive Design ist gewaltig auf dem Vormarsch und es bringt Kunden und Unternehmer enger zusammen, wenn das Konzept stimmt.

Weiterführende Links zu Responsive Webdesign
Wikipedia Seite zu Responsive Webdesign
http://de.wikipedia.org/wiki/Responsive_Webdesign
Referenzen zum Thema Responsive Design
http://www.mediaqueri.es

WordPress Bildergalerie zu Responsive Webdesign

jQuery code snippet: html() mit Bild – image – füllen

Veröffentlicht am von
jQuery Webdesign Duisburg

jQuery Webdesign Duisburg

jQuery code snippet für ein img-Tag mit der html() jQuery Funktion
$(‘#id-of-element’).html($(“<img>”).attr(“src”, ‘/path-to-image/image.gif’);

Es ist möglich mit der .html() jQuery Function HTML Code an einer bestimmte Stelle im Webdesign auszugeben. Damit man einen img-Tag mit jQuery mit der .html()-Methode ausgeben kann ist es nötig die richtige jQuery Syntax für die Darstellung eines HTML-Tags, in diesem Falle eines img-Tags, zu nutzen. Das oben angegebene jQuery-Code snippet zeigt, wie es richtig geht.

Felix Baumgartner Red Bull Webdesign Flash Intro kann weit mehr als HTML5 und CSS3

Veröffentlicht am von
Falsh File swf speichern unter

Falsh File swf speichern unter

Flash ist tot. Das ist eine der Kernaussagen von Fachmagazinen und Internet Experten. Das sitmmt aber nicht ganz. Flash war nicht umsonst über Jahre das Vorzeigeformat im Internet und ist auf fast 100% aller Webbrowser installiert. Sieht man dagegen die Bemühungen die Möglichkeiten mit HTM5 und Flash zu ersetzen frage ich miich doch sehr häufig. ob hier nicht ein Schritt zurück gemacht wird. Und es wird auch weiterhin auf Fash gesetzt. So auch beim Flash Intro der offiziellen Internetseite von Redbull Star Felix Baumgartner. Ich haben das Flash Intro hier direkt in die Seite eingebunden und zeige auch wie man eine swf Datei auf der eigenen Internetseite speichert und verwendet.

Flash Intro der Red Bull Star Internetseite von Felix Baumgartner

Offizielle Internetseite von Felix Baumgartner mit Flash Intro
www.felixbaumgartner.com

CSS3 HTML5: Beispiel für animierte Werbebanner und Sicherheitslücken in Flash Bannern

Veröffentlicht am von


Mit den mit neuen CSS3 und HTML5 Werbebannern ist es möglich animierte Werbebanner plattform übergreifend zu erstellen. Bisher waren hochwertige Werbebanner Animationen nur mit der Flash Technologie möglich, die jedoch nicht auf allen Smartphone Betriebssystemen verfügbar ist. Alternativ gibt es GIF-Werbebanner. Diese Technik kann jedoch nur Wechselbilder abbilden und keine Animation, wie eine einfache Bewegung abbilden.

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

Bei Webbrowsern ist Flash generell bei über 99% der User verfügbar. Allerdings ist es erst durch HTML5 und CSS3 möglich animierte Werbebanner mit Open Source Werkzeugen zu erzeugen. Flash Banner können nur mit Hilfe des Flash Programms von Macromedia erstellt werden. Die Software ist, wie alle Produkte von Abobe, teuer im Einkauf.

Für den Einbruch von Flash hat vor allem die Politik von Apple unter Steve Jobs gesorgt. Hier wurden u.a. Sicherheitslücken als Grund angegeben. Apple hat es geschafft mit seiner strengen Sicherheitspolitik jahrelang vierenfrei zu bleiben. Das mag aber auch mit dem anfänglichen Marktanteil in Zusammenhang stehen.

HTML5 Webdesign aus Duisburg Logo

HTML5 Webdesign aus Duisburg Logo

Das ist heute nicht mehr so und auch die Festung Apple wird fallen. Aber ihre Mauern werden immer sehr dick und hoch bleiben. Sorge macht immer auch der User. Für günstigere Modelle gibt er seine gesamten Daten einfach frei, Hier sollten die Leute mehr aufgeklärt werden.

 

 

 

 

CSS3 und HTML5 animierte Banner Beispiel und Tutorial:
http://webstandard.kulando.de/static/css-animation-olympicgames

Sicherheit Flash Bannern – 12 Sicherheitslücken bei Flash gefixt
http://www.heise.de/security/meldung/Flash-Update-11-3-flickt-sieben-Sicherheitsloecher-1614642.html

Adobe: Apple trägt die Hauptschuld am Flash-Tod
http://winfuture.de/news,66569.html

Bekannte YouTube Kanäle für Action Sport von Rip Curl, Ford World Rally Team, MotoGP, ASP World Tour, GoPro und Red Bull

Veröffentlicht am von

Highlight YouTube Videosmit tollen Bildern und Musik sind ein tolles Format. YouTube ist als WEB2.0 Portal schon längst die kostenlose Online Marketing Plattform. Alle großen Firmen, die mit dem Internet Geld verdienen, nutzen YouTube gezielt. Die Videos werden von der Google Tochter für jedes Endgerät von PC bis Smartphone optimiert dargestellt. Zusätzlich können die Videos leicht „geteilt“ werden und erzielen so eine optimale Reichweite im Internet.

Seit 2011 produzieren wir mit der Firma www.rogo.tv Highlight Videos für Randsportarten. Neben Inline Hockey wurden auch Wasserball Highlight Videos für die Deutsche Wasserball Liga DWL produziert. Wir können jede Sportart professionell in Szene setzen. Sprechen Sie uns einfach für Ihre nächste Sportveranstaltung an.

Rip Curl Hersteller für Surfsport
www.youtube.com/user/Ripcurl

Ford World Rally Team
www.youtube.com/user/FordWRC

MotoGP Motorrad Rennsport Serie
www.youtube.com/user/MotoGP

ASP World Tour Surf Liga
www.youtube.com/user/ASPWorldTour

GoPro Action Video Kamera
www.youtube.com/user/GoProCamera

Offizieller RedBull Action Sport Kanal mit über 300 Mio. Videoaufrufen
www.youtube.com/user/redbull

HTML5 und CSS3 Webdesign: Beispiele auf Beta Internetseite von theexpressiveweb.com

Veröffentlicht am von


Mit dem neuen Internettechnologien HTML5 und CSS3 ist weit mehr möglich, als nur Videos auf der eigenen Internetseite einzubinden und Responsitive Webdesign zu nutzen. Neben der Möglichkeit HTML5 und CSS3 Formulare intuitiv mit Reglern und Colorpickern auszufüllen sind die besondere Stärken dabei Animationen zu erstellen, die  wie ein Flashmovie ablaufen und sind dabei völlig neue dynamische Möglichkeiten bieten. In Zukunft werden wir viele animierte HTML5 und CSS 3 Banner im Internet sehen.

Auf der Beta Internetseite von “The Expressive Web” kann man sich zahlreiche Beispiele zum Thema HTML 5 und CSS3 anschauen. Die Internetseite ist natürlich auch mit einem Responsitive Webdesign programmiert und passt die Darstellung des Webdesigns der Bildschirmgröße an. Dabei sind die Übergänge zusätzlich animiert. Einfaches Responsitive Webdesign ist auch mit der Standard Einrichtung von WordPress möglich. Wenn sie die Seite zusammen schieben, werden die Elemente ebenfalls neu angeordnet.

Weiterführende Links zum Thema HTML 5 und CSS drei Beispiele:
www.theexpressiveweb.com

HTML und CSS Tutorial: Praktische Beispiele zur CSS Eigenschaft position zum klicken und ansehen

Veröffentlicht am von
HTML und CSS Webdesign Tutorial position

HTML und CSS Webdesign Tutorial position

Die CSS Eigenschaft position kann mit unterschiedlichen Werten für unterschiedliche Darstellungen im Webdesign genutzt werden. Auf der nachfolgend vorgestellten Internetseite zum Thema Webdesign CSS position hat man eine schöne und einfache Möglichkeit sich durch die unterschiedlichen CSS Eigenschaften von position zu klicken. Dabei wird das CSS Webdesign Beispiel direkt auf der Seite dargestellt. Dadurch ist es sehr einfach mögliche sich einen Überblick über die unterschiedlichen CSS Eigenschaften und ihre Auswirkungen im Webdesign zu verschaffen.

Weiterführende Links zum Thema HTML und CSS Tutorial
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Die Webdesign CSS position Beispiele sind
#div-1 {
position:static;
}
————————–
#div-1 {
position:relative;
top:20px;
left:-40px;
}
————————–
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
————————–
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
————————–
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
————————–
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
————————–
#div-1a {
float:left;
width:200px;
}
————————–
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
————————–
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

CSS Hacks: Webdesign Probleme mit dem Internet Explorer 6 – IE 6

Veröffentlicht am von
Internet Explorer 6 IE6 Logo

Internet Explorer 6 IE6 Logo

Der Internet Explorer 6 – IE 6 ist zurecht jedem Frontend Webdeveloper ein Dorn im Auge. In der heutigen Zeit sind die Ansprüche an Internetseiten und Webdesign rasant gewachsen und es viele Einsatzmöglichkeiten für HTML5 und CSS3. Es ist absolut nicht mehr zeitgemäß Webseiten für den Internet Explorer 6 IE6 zu optimieren.

Hierfür gibt es gute Gründe im Bezug auf Sicherheit und Funktionsumfang. Der Internet Explorer 6 – IE 6 wurde bereits im Jahr 2001 von Microsoft veröffentlicht. Nachdem kurz darauf zahlreiche Entwickler von Microsoft von dem Projekt abgezogen worden waren kümmerte sich nur noch eine handvoll Mitarbeiter um Sicherheits Updates. Erst im Jahr 2003 wurden mit dem Servicepack1 von Microsoft viele Sicherheitslücken in dem Internet Expolorer 6 IE6geschlossen und 2004 mit dem Service2 wieder ein für damalige Verhältnisse zeitgemäßer Sicherheitsstandard implementiert.

CSS3 Webdesign aus Duisburg Logo

CSS3 Webdesign aus Duisburg Logo

Quelle Wikipedia:
Google stellte zum 1. März 2010 den IE-6-Support für seine Dienste Google Docs und Google Sites ein.[16] Seit dem 13. März 2010 wird der Internet Explorer 6 auch von YouTube nicht mehr unterstützt.[17]
Zur CeBIT 2011, am 4. März, startete Microsoft die Aktion „IE6 Countdown“[18] mit dem Ziel, die Nutzerquote des Internet Explorer 6 auf unter 1 % zu bringen.[19] Im Juni 2012 wurde dieses Ziel für Deutschland erreicht.

In einem Artikel vom Smashing Magazine Webdesign Blog wird darauf eingegangen, daß es sich die Internetagenturen und Webdesign Entwickler selber schwer machen. Anpassungen für die Browseroptimierung im Internet Explorer 6 – IE6 sind mit enormen Aufwendungen verbunden und moderne und zeitgemäße Webdesign Anwendungen sind gar nicht zu realisieren. Auch Google hat hier schon aufgeben.

Das Problem der einzelnen Internetagenturen für Webdesign ist jedoch, daß der Webdesign Kunde gerne mit dem Kopf durch die Wand möchte unter darauf besteht seine neue Internetseite abwärtskompatibel für den Internet Explorer 6 IE 6 optimiert zu bekommen. Hier muss die zusätzliche Leistung in Rechnung gestellt werden. Bei der Webdesign Frontend Entwicklung ist es hier nicht mit einigen CSS Hacks getan. Hier muß die gesamte Applikation von HTML und CSS neu entwickelt werden. Das ist mindestens die doppelte Arbeit für das Frontend Webdesign und damit auch ein doppelter Preis. An dieser Stelle ist es auch sehr wichtig darauf hinzuweisen, daß man nicht den vollen Funktionsumfang für die Internetseite, wie in modernen Browsern gewährleisten werden kann.

HTML5 Webdesign aus Duisburg Logo

HTML5 Webdesign aus Duisburg Logo

Als Webdesign Agentur sollte man vor Projektbeginn vertraglich festhalten für welche Browser und Versionen das Webdesign ausgeliefert wird. Hier ist es auch wichtig den Zeitpunkt der Angebotserstellung unter der Angebotsrealisierung zu unterscheiden. Erfahrungsgemäß kann es hier große Differenzen geben. Dann ist die Überraschung nicht allzu groß, wenn der Kunde nach Projekt Übergabe die Internetseite nicht richtig auf seinem 15 Zoll Bernstein Monitor sehen kann. Einen Rechtsstreit kann sich hier niemand leisten und das Gericht wird sich im Zweifel für den Laien aussprechen. Das Kostet alles mehr als nur Geld.

Webdesign Blog vom Smashing Magazine zum Thema Webdesign und Internet Expolorer 6 IE 6
http://www.smashingmagazine.com/2011/11/03/%E2%80%9Cbut-the-client-wants-ie-6-support%E2%80%9D/

Offizieller Link zu Wikipedia Internet Explorer 6 IE 6
http://de.wikipedia.org/wiki/Internet_Explorer#Version_6

Internet Browser Chrome und Firefox als Artwork Cyberwar

Internet Browser Chrome und Firefox als Artwork Cyberwar

 

 

CSS Hacks: Horizontale Scrollbar und vertikale Scrollbar im Element, Iframe oder der ganzen Seite ausblenden

Veröffentlicht am von

Man kann mit über die CSS Eigenschaften Scrollbalken ausblenden und dadurch verstecken. Natürlich ist das keine saubere Lösung. Die Inhalte, die dann ausserhalb des sichtbaren Bereichs liegen, können nur noch über über die „Markieren“ – Funktion bei gedrückter Maustaste erreicht werden. Es sollte auch beachtet werden, daß es immer noch Leute mit kleinen Bildschirmauflösungen gibt und das Browserfenster nicht immer in voller Größe geöffnet sind.

Allerdings gibt es gerade bei Iframes das Browser Probelm, daß der horizontale Scrollbalken ein paar Pixel zu scrollt, dabei aber kein Inhalt zu breit im Iframe selber ist.

CSS Klasse um vertikalen Scrollbalken ausblenden:
.l-no-vertical-scroll {overflow-y: hidden}

CSS Klasse um horizontalen Scrollbalken ausblenden:
.l-no-horizontal-scroll {overflow-x: hidden}