Lieber Nutzer, diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie JavaScript in Ihrem Browser ein.
Gerade diese Seite bietet Aktionen die ohne Scripte nicht funktionsfähig sind. Zu sehen ist sonst nur eine minimale Version.

Information der Werbeagentur für responsives Webdesign

Beate Fritsche
Staatlich geprüfte Gestalterin
Telefon: +49(0)2351-6746920

Körnerstraße 5a
58507 Lüdenscheid

Von mir benutzte Programmiersprachen


Auf dieser Seite stelle ich Ihnen den kleinen Teil von Programmier­sprachen vor, mit denen ich zur Zeit in meiner Werbe­agentur für responsives Webdesign hauptsäch­lich arbeite. Eine interaktive Seite mit Beispielen zu HTML, CSS, JavaScript, jQuery, XML und PHP. Die Darstell­ungen sind zum Teil überzogen darge­stellt, nur um die Möglichkeiten zu zeigen.

HTML = HyperText Markup Language


Ein Browser nimmt Angaben wie eine Webseite ange­zeigt werden soll nur in einer Sprache entgegen, der Hyper­text-Aus­zeigungs­sprache, Kurz­bezeichnung HTML. Dabei sind sie in der Regel flexibel, was die Interpret­ationen angeht, welcher Code vom Webserver rüber­geschickt wird. Anders ausgedrückt, vergibt ein Browser je nach Hersteller und Version gewisse Syntax­fehler. Mit welchem Browser die Webseite auf das Anzeige­gerät gebracht wird hat man als Web­designer leider keinen Einfluss,

also muss dafür gesorgt werden, dass die Seite in allen Browser­familien wie Mozilla, Safari, Chrome, Opera, Internet Explorer u.s.w. akzeptabel aussieht. Nur allein mit HTML geschrie­bene Web­seiten bein­halten zwar alle schrift­lichen Informat­ionen und auch die wichtigsten Funktionen, aber das Design ist sehr spartanisch. Eine weitere Gruppe ist XHTML. XHTML ist so ähnlich wie HTML, selbst der Code unterscheidet sich kaum, jedoch ist sie eine vollständig auf XML definierte Sprache, die keine Unsauberkeit im Code zulässt.

Einfacher Text einer Webseite nur in HTML. Ansicht über einem Server nach Drücken der Aktion-Taste.


html
head
title Eine Seite nur mit HTML /title
/head
body

Eine Seite nur mit HTML erstellt. Texte und Bilder sind schon vorhanden, Listen und Links auch, sogar funktionsfähig für die Weiter­leitung. Eine einfaches Layout kann ohne Schwierig­keiten mit Tabellen erststellt werden. Der Nachteil daran, das Layout ist statisch.

• Home
• Anwendung
• Kontakt
• Impressum



Als Blindtext werd ich eingesetzt, dass nichts verschiebt und nichts zerfetzt, mich breitmach auf der leeren Seite und damit Positionen halte, und irgendwann werd ich ersetzt und dann liest man das Thema jetzt.

2014 @ Beate Fritsche
/body
/html
Eine Seite nur mit HTML

Eine Seite nur mit HTML erstellt. Texte und Bilder sind schon vorhanden, Listen und Links auch, sogar funktions­fähig für die Weiter­leitung. Eine einfaches Layout kann ohne Schwierig­keiten mit Tabellen erststellt werden. Der Nachteil daran, das Layout ist statisch.



Als Blindtext werd ich eingesetzt, dass nichts verschiebt und nichts zerfetzt, mich breitmach auf der leeren Seite und damit Positionen halte, und irgendwann werd ich ersetzt und dann liest man das Thema jetzt.

2014 @ Beate Fritsche

CSS = Cascading Stylesheets


Cascading Stylesheets sind die Formatvor­lagen einer Web­seite. Auch wenn das HTML-Gerüst und die Inhalte einer Web­seite gleich bleiben, kann man mit verschie­denen Styles­heets die Web­seite, wie mit Kleidung bei verschiedenen Anlässen, anziehen und unter­schiedlich aus­sehen lassen.

Diese Trennung von Inhalt und Design gibt uns Web­designern Gestaltungs­möglich­keiten, die mit reinem HTML nicht zu erreichen sind. Styles geben dem Dokument ein Aussehen.

Der Text von oben aber diesmal mit CSS. Ansicht über einem Server nach Drücken der Aktion-Taste.


html
head
title Eine Seite mit HTML und CSS /title
styles type:"text"
,form1 (width: 98%, height: auto,)
,form2 (float: right,)
,form3 (width: 98%, height: auto, border-bottom: 2px solid black,)
,form4 (width: 20%, height: auto,)
,form5 (width: 50%, height: auto, float: left, margin: 10px 20px 10px 0px,)
,form6 (width: 70%, height: auto, float: left,)
,form7 (width: 95%, height: auto,)
,form8 (width: 98%, height: auto, overflow: auto, float: left,)
/styles

/head
body

Die Seite wie oben, mit dem selben HTML und zusätzlich mit CSS versehen. Texte und Bilder werden formatiert. Das Layout ist angepasst aber noch nicht dynamisch.

• Home
• Anwendung
• Kontakt
• Impressum



Als Blindtext werd ich eingesetzt, dass nichts verschiebt und nichts zerfetzt, mich breitmach auf der leeren Seite und damit Positionen halte, und irgendwann werd ich ersetzt und dann liest man das Thema jetzt.

2014 @ Beate Fritsche
/body
/html

Eine Seite mit HTML und CSS

Dieselbe Seite wie oben, mit HTML und zusätzlich mit CSS erstellt. Texte und Bilder werden formatiert. Das Layout ist angepasst aber noch nicht dynamisch.

Als Blindtext werd ich eingesetzt, dass nichts verschiebt und nichts zerfetzt, mich breitmach auf der leeren Seite und damit Positionen halte, und irgendwann werd ich ersetzt und dann liest man das Thema jetzt.

2014 @ Beate Fritsche

JavaScript


JavaScript taucht immer wieder in den Medien auf. Sowohl im positiven wie auch im negativen Sinne. Der Haupt­grund dafür ist, dass den Browser­herstellern immer wieder Fehler bei der Programm­ierung ihrer Browser unter­laufen. Ohne jetzt weiter auf diese Presse­mit­teil­ungen einzu­gehen, mit Javascript lassen sich die eher beschränkten Möglich­keiten von Html auf Web­seiten erweitern. Alle Funktionen laufen im Browser ab und es ist keine besondere Server­voraus­setzung zu erfüllen.

Graphische Beispiele sind auf fast allen Web­seiten zu sehen und ohne Javascript kaum umsetzbar. Javascript sollte nicht mit Java verwechselt werden. Beide haben gar nichts mitein­ander zu tun. Ähnlich sind zwar die Vor­schriften, die wie ein Programm aussehen, aber die Kommandos brauchen eine Browser­unter­stützung, die leider auch heute noch bei unterschied­lichen Browsern verschieden inter­pretiert werden und nicht gleich sind. Dies bedeutet, dass die verschiedenen Versionen des Skriptes mit unter­schiedlichen Kommandos ausge­liefert werden müssen.

Einfacher Bilderwechsler in JavaScript, einsetzbar als Slider. Ansicht über einem Server nach Drücken der Aktion-Taste.


-script-
setTimeout("slide show()",2000),
var img = new Array(),
var BildNummer = 0, var anzahl_bilder,
var dateiendung; var datenquelle;
anzahl_bilder = 10;
datenquelle = "images/bild0";
dateiendung = ".png";
if(document.images) (i = 1; i <= anzahl_bilder; i++)
img = new Image(); if(i < 10)
img.src = datenquelle + "0" + i + dateiendung;
else img[i].src = datenquelle + i + dateiendung;
function wechsel()
BildNummer++;document.getElementById("bild001")
.src = img[BildNummer].src,
if(BildNummer == anzahl_bilder)BildNummer = 0;
start = setInterval("wechsel()", AnzeigeZeit),
-/script-
slider

jQuery


Mit dem Ajax-Framework jQuery steht dem Web­designer eine Sprache zur Ver­fügung, um mit wenig Code bereits Befehle zu ver­wirklichen, die sonst nur umständlich mit komplizierten JavaScript-­Befehlen erstellt werden konnten.

Ich nenne jQuery den kleinen aber starken Bruder von JavaScript, obwohl er mit seinen Framworks in UI und Mobile einiges leichter an Programm­ier­arbeit macht und der einige schwer zu nutzenden JavaScript-­Methoden für animierte und interaktive Web­seiten verein­facht und somit zu einem Universal­werkzeug in der Web­programm­ierung geworden ist.

Ansicht über einem Server nach Drücken der Aktion-Taste.


$("fieldcontain").toggle(function() {
$("#hupfquadrat").queue("fx",[newQueue]);
}, function() {
$("#hupfquadrat").queue("fx",[moveRectangle]);
});
$("fieldcontain").click(function() {
$("#hupfquadrat").stop(true).css({left:'10px',top:'70px'});
moveRectangle();
});
// Erste Funktion, die eine Warteschlange erzeugt
function moveRectangle() {
$("#hupfquadrat").fadeIn("slow")
.animate({left:'+=100'},2000)
.animate({opacity:0.5},1000)
.animate({opacity:1},1000)
.animate({left:'+=-100'},2000)
.fadeOut("slow", moveRectangle);
message();
}
moveRectangle();
function newQueue() {
$("#hupfquadrat").fadeIn("slow")
.animate({top:'+=100'},2000)
.animate({top:'+=-100'},2000)
.fadeOut("slow",newQueue);
message();
}
function message() {
var queueLength = $("#hupfquadrat").queue("fx").length;
$("span").text("Es befinden sich " + queueLength);
$("span").append(" Funktionen im Speicher");
$(document).ready(function() { $("#fieldcontain30").click(function(){ $('#formularius3').toggle(''); }); });

XML = Extensible Markup Language


Die aktuellen Office-An­wendungen verwenden XML als Standard­format im Hinter­grund, um den Daten­austausch zu verein­fachen. Auch für die Ent­wicklung von Anwend­ungen im Web­design ergeben sich daraus neue Möglich­keiten mit Informat­ionen umzu­gehen, auch wenn bei XML-Dokumenten "keine" Form­fehler toleriert werden. Man sagt, das Dokument muss "Wohlgeformt" sein.

Die Grundsyntax beruht auf eine reine Daten­sammlung. Um eine brauchbare Form im Web daraus zu erstellen, muss dem Dokument auch ein Stylesheet zugefügt werden. Somit ist es auch mit XML möglich, die Struktur, den Inhalt und das Aussehen exakt zu trennen. Mit XML wird erreicht, dass mit den Informat­ionen im Inhalt nicht nur Menschen etwas anfangen können, sondern auch Maschinen.

Bilderwechsler mit XML-Datei, einsetzbar als Galerie. Ansicht über einem Server nach Drücken der Aktion-Taste. Bei Mobilen Geräten ohne Flash Player Fehlermeldung.


-xml-
-gallery-
-album-
-imge ="ebcce2b042a6.jpg" tn="ebcce2b042a6t.jpg"/-
-imge ="c78dae1b3460.jpg" tn="c78dae1b3460t.jpg"/-
-imge ="c736a55cc318.jpg" tn="c736a55cc318t.jpg"/-
-imge ="f112edebd05b.jpg" tn="f112edebd05bt.jpg"/-
-imge ="a0793d1e8715.jpg" tn="a0793d1e8715t.jpg"/-
-imge ="4ade7d40f9f2.jpg" tn="4ade7d40f9f2t.jpg"/-
-imge ="95984bb3d732.jpg" tn="95984bb3d732t.jpg"/-
-imge ="95984bb3952d.jpg" tn="95984bb3952dt.jpg"/-
-imge ="1d157465986e.jpg" tn="1d157465986et.jpg"/-
-/album-
-/gallery-
(DetectFlashVer(9, 0, 0))
AC_FL_RunContent(
"src", "slider1/wpimages/slideshowpro?paramXMLPath=8db47c4dabaa6953ab500.xml",
"base", "slider1/wpimages",
"play", "true",
"loop", "true",
"width", "100%",
"height", "300",
"salign", "C",
"scale", "ShowAll",
"id", "slidegallery_1",
"quality", "High",
"wmode", "transparent",
"allowFullScreen", "true",
"name", "slidegallery_1",
"type", "application/x-shockwave-flash",
An old version of the Flash plugin was detected. Please upgrade your Flash plugin.

PHP = Hypertext Preprocessor


Vom einfachen Besucher­zähler, das war einer der Anfänge von PHP, über E-Mail versenden, bis hin zu Auslesen oder Schreiben in Daten­banken mit Hilfe des Management System SQL reicht die Anwendung von PHP. Web­basierte Applikat­ionen wie beispiels­weise Blogging-Soft­ware oder Content Management Systeme (CMS) wie von Joomla oder Word Press würden ohne PHP nicht funktion­ieren.
Beim FTP-Protokoll wird eine Seiten­anforder­ung vom Web­browser (Benutzer­seite) an den Web­server gesendet, der dann die Seite an Ihren Web­browser im Ausgabe­gerät zu Hause oder im Büro aus­liefert, wo sie dann be­arbeitet wird. Wenn alle benötigten Dateien beim Browser sind (Bilder, Styles und Scripte) baut sich die Web­seite auf und die Ver­bindung zum Server wird unter­brochen. Mit PHP oder server­seitigen Skript­sprachen aufge­baute Web­seiten, sogenannte dynamische Web­seiten, verhalten sich da ganz anders.
Die Seite wird zwar wie oben beschrieben ange­fordert, aber die Dateien server­seitig mit speziellen Programmen, einen Parser, aus Daten­banken ver­arbeitet und dann erst als Web­seite in einem Modul an ihren Browser ausge­liefert.

Über diese Module ist es dann möglich, ständig zwischen Browser und Server mit Hilfe des Blackbox-­Prinzips zu kommuni­zieren. Das soll heißen, der Anwender bekommt nicht mit, ob die Werte die er abruft oder in ein Formular eingibt, zur Weiter­ver­arbeitung oder Aufbereit­ung von Daten in einer Daten­bank hinter­legt werden. Leider versuchen auch "Hacker" gezielt diese Daten­banken zu erreichen. Auch wenn "nichts" interessantes oder finanziell verwert­bares zu finden ist, so kann doch ein Miss­brauch durch die über­nommene Kontrolle Ihres Webspace durch Mail­befehle Spam-E-Mails verbreitet werden, die auf den Betreiber der Web­seite zurück­fallen. Schlimmer noch, es kann eine Dos-Attacke einge­leitet werden. Ein Werkzeug, um andere Server anzu­greifen und in die Knie zu zwingen, weil zeit­gleich so viele Http-An­fragen von mehreren gehackten Rechnern an ihn geschickt werden, bis er nicht mehr alle ab­arbeiten kann und abstürzt. Dieser Gefahr sind sich selbst einige Autoren von Web­systemen nicht bewusst. Wichtig ist bei Benutz­ung von CMS-Systemen, mit PHP Unterstützung, das ein sehr hoher Sicherheits­standard einge­halten werden muss.
Da die PHP Programm­ierung meistens im Hintergrund abläuft um Daten zu ver­arbeiten, habe ich aktuell kein Beispiel anzubieten.