Comics

Präsentation der Website-Struktur Design

Darstellung der Ebenen des Webdesigns

Wie wir alle wissen, sind die beiden Seiten eines Website-Designs nicht immer die gleichen. Die visuelle Seite ist diejenige, die alle Benutzer sehen können,alle Grafiken, Schaltflächen, Bilder und die Seite, die darunter liegt, die sogenannte „visuelle Seite“. DerSeitencode, der für das Funktionieren der Website verantwortlich ist. Wie erreichen Sie hier ein Gleichgewicht?

EineWebsite enthält nicht nur eine Art von Code, sondern sie besteht aus verschiedenen Codes. Zunächst ist alles HTML-Code, der das Gerüst bildet, in das wir CSS (Cascading Style Sheets ) und eine Software-Sprache wie PHP einbetten. Mit anderen Worten: HTML wird verwendet, um den Inhalt der Seite zu strukturieren, während CSS es ermöglicht, den Inhalt der Seite und ihren Stil getrennt zu behandeln, und die Softwaresprache PHP, um Anweisungen an den Computer weiterzugeben.

HTML-Code allein löst nicht die gleichen Effekte aus wie Dropdown-Menüs oder das automatische Scrollen von Bildern. Es ist der Code, der für die Benutzeroberfläche ist, während der andere Code für die Verarbeitung der Daten und die Verbindung zur Datenbank ist. Auf der Präsentationsschicht bezieht es sich auf die grafische Benutzeroberfläche sowie den Code, der die IT steuert, einschließlich des Codes, der interaktive Elemente wie Dropdown-Menüs steuert.

Die Code-Präsentation umfasst:

  • HTML und HTML 5
  • CSS
  • Skriptsprachen wie JavaScript, jQuery und Ajax.

In der Regel werden all diese Sprachen geschickt miteinander verwoben, um ein visuell ansprechendes und hochfunktionales Website-Design zu erstellen.

1. Erstellen einer Multimedia-Schnittstelle

Animierte und immersive Designs wurden sowohl durch den Einsatz von Adobe Flash als auch durch eine Kombination aus HTML, CSS und anderen Skriptsprachen erreicht. Viele Jahre lang stand Adobe Flash an der Spitze, aber das hat begonnen, sich zu ändern. Mit der Entwicklung von HTML 5 und CSS sind wir heute in der Lage, viele interaktive und animierte Effekte verstärkt nachzubilden.

HTML 5, die neueste Ausgabe von HTML, hat einen großen Schritt nach vorne gemacht, was die Gestaltungsmöglichkeiten der Präsentationsschicht angeht. Dies bietet einen erweiterten Satz von Werkzeugen und elementaren Eigenschaften und eröffnet Designern die Möglichkeit, mit einzelnen Elementen zu arbeiten und diese zu verwenden. So können Designer zum Beispiel eine Navigationsgruppe mit einem neuen ’nav‘ anstelle des bisher verwendeten ‚div‘-Elements definieren. Auch die Funktionen zur Unterstützung von Animationen und Interaktionsdesign können mit HTML5 eindrucksvoll verbessert werden, und die Tatsache, dass HTML5 von Handy-Browsern wie Apple Safari unterstützt wird, hat neue Möglichkeiten für das Webdesign eröffnet.

Ein paar Worte zu Adobe Flash

Flash ist eine interaktive Animationstechnologie, mit der Sie eine sehr ansprechende und interessante Oberfläche erstellen können. Wenn es darum geht, das Flash-Element im Webdesign zu implementieren, ist der Prozess recht einfach. Die Komponente wird in Adobe Flash entwickelt und dann als .swf-Datei exportiert, oder genauer gesagt, die SWF-Datei wird wie ein Bild in eine HTML-Seite eingebettet. Die .swf-Datei kann sowohl ein kleiner Teil der Seite sein oder sich buchstäblich über die gesamte Oberfläche erstrecken. Damit dies funktioniert, muss der Benutzer den Flash Player in seinem Browser installiert haben, um die Seite mit der  .swf-Komponente anzeigen zu können.

Trotz seiner Fähigkeit, mit Blitzlicht beeindruckende Bilder zu erzeugen, hat es einige Nachteile. Am wichtigsten ist, dass die Systeme von aplle einfach keine Flash-Dateien unterstützen. Daher muss eine in Flash erstellte Website eine alternative Version der Website für mobile Apple-Besucher anbieten (natürlich nur, wenn der Markt für sie wichtig genug ist). Die Aufforderung an den Benutzer, die neueste Version des Flash-Players für das iPhone herunterzuladen, ist eine irrelevante Schaltfläche, denn selbst wenn es möglich wäre, Flash für die Seite herunterzuladen, wäre es immer noch nicht verfügbar.

HTML5 als Alternative zu Flash

Wie bereits erwähnt, ermöglicht die Kombination aus HTML 5, CSS und jQuery-Code nun die Wiedergabe von animierten Webseiten, die bisher nur in Flash möglich waren. Die Verwendung desCanvas-Elements ist jetzt viel einfacher als je zuvor, um eine reichhaltige und animierte Benutzeroberfläche zu gestalten. Die meisten modernen Telefon- und Desktop-Browser unterstützen bereits den HTML5-Standard, wodurch es möglich ist, ein Design zu erstellen, das über mehrere Plattformen hinweg funktioniert.

2. DHTML, JavaScript, jQuery und Ajax

Denken Sie daran, dass einfaches HTML die Struktur des Inhalts erzeugt. Skriptsprachen wie JavaScript, Ajax und jQuery, die das Verhalten der Elemente der Benutzeroberfläche und der auf der Seite angezeigten Inhalte steuern, sind in diese Struktur eingewoben.

JavaScript ist eine dynamische Skriptsprache, die in der Lage ist, komplexe Animations- und Interaktionseffekte zu erzeugen, wie z. B. die Erstellung eines Dropdown-Menüs oder die Erweiterung einer Fensterebene. Dadurch können Sie mit dem Benutzer interagieren, den Browser steuern und den Inhalt der angezeigten Webseite ändern. Wenn JavaScript in HTML implementiert wird, wird das HTML weiter zu„DHTML„. Dynamisches HTML (DHTML) ermöglicht es Ihnen, interessante interaktive Elemente und Animationen zu erstellen.

jQuery ist eine vereinfachte Form von JavaScript, die sich auf häufig verwendete Interaktionen zwischen JavaScript und HTML konzentriert. Es wurde entwickelt, um die Navigation auf einer Website zu erleichtern. jQuery ist eine kostenlose Open-Source-Software und ist im Internet verfügbar. Sie können vorgefertigte Skripte kopieren und in Ihre Websites einfügen und für unsere Zwecke anpassen. Mit jQuery können Sie Animationen und Interaktionsdesign-Effekte mit viel weniger Code erstellen, als Sie mit JavaScript benötigen würden.

Beispiel jQuery-Effekte:

  • Aufklappen und Zusammenklappen entsprechend dem Fenster
  • Bilddrehkarussell
  • Bild bei Rollover zoomen usw.


Ajax
(Asynchronous JavaScript and XML) ermöglicht es, dass Verarbeitungen wie das Hoch- und Herunterladen von Daten im Hintergrund (asynchron) stattfinden, ohne die Anzeige oder das Verhalten der Webseite zu beeinträchtigen. Daher ist ein erneutes Laden der Seite oder ein Klicken auf die Schaltfläche „Aktualisieren“ nicht erforderlich und die Daten auf der Seite können automatisch aktualisiert werden.

3. erweiterte CSS-Grafikeffekte

In der Vergangenheit haben wir eine Rastergrafik wie ein JPEG oder GIF verwendet, um ein grafisches Element wie z. B. eine Schaltfläche zu erstellen. Sie würden nicht nur die Ladezeit einer Website erhöhen, sondern müssen auch mit einer Software wie Photoshop so gestaltet werden und müssen dann jedes Mal manuell geändert werden, wenn man das Aussehen der Website ändern möchte.

Heute wird CSS mit immer mehr Stil, Kontrolle über das Aussehen von Elementen angeboten. Jetzt können Sie Abstufungen, abgerundete Ecken, Spiegelungen und weiche Schatten zu Textelementen hinzufügen, und das, nachdem Sie Ihren  CSS-Code eingegeben haben.

Es gibt eine ganze Reihe nützlicher CSS-Stile für grafische Steuerelemente, jetzt können wir den Code nehmen, um das Einfügen von Bitmap-Grafiken beim Aufbau der Benutzeroberfläche zu vermeiden.

Zu den Vorteilen der Verwendung von CSS für unsere Benutzeroberfläche gehören:

  • Schnellerer Download – CSS-Code wird nur einmal geschrieben und kann als Stil auf jedes Grafik- oder Textelement angewendet werden;
  • Skalierbares Design – Der CSS-Code ermöglicht die Skalierung von Schrift- und Elementattributen;
  • Einfache Wartung – Um die Größe, Farbe und visuellen Effekte einer Schaltfläche, eines Textes oder eines Designelements zu ändern, ändern Sie einfach die Werte im CSS-Code und die Änderungen werden auf alle Elemente angewendet, die einem bestimmten Stil zugeordnet sind;
  • Barrierefreiheit – In CSS verwenden wir tatsächlichen Text für unsere Schaltflächen und Oberflächenelemente, und diese sind so beschriftet und gekennzeichnet, dass sie auf einer Vielzahl von Geräten deutlich angezeigt werden.

4 Responsives mobiles Web-Design

Der neueste Trend im Webdesign ist das responsive Webdesign. Es ist ein Ziel, das Sie dem Ziel näher bringt, Websites so zu erstellen, dass sie ein optimales visuelles Erlebnis bieten, das auf einer Vielzahl von Geräten einfach zu lesen und zu navigieren ist. Wenn ein Benutzer die Größe seines Browserfensters ändert, wird die Webseite sofort aktualisiert, um im Gerätefenster in der angepassten Größe optimal angezeigt zu werden. RWD ist ein neuer Begriff, mit dem Designer nicht nur auf unterschiedlich große Desktop-Browser verweisen, sondern auch auf ein mobiles Gerät, das selbst unterschiedliche Bildschirmgrößen hat.

Responsive Webdesign wird durch die daraus resultierenden Media-Queries im CSS3-Teil der Spezifikation ermöglicht. Es erkennt die Browsergröße und zeigt die Seite an, um das entsprechende Stylesheet zu laden, zum Beispiel„widescreen.css“ oder„mobilescreen.css„. Das liegt daran, dass verschiedene Stylesheets unterschiedliche Layoutsysteme, Schriftgrößen und Bildoptimierungseinstellungen enthalten.

Zu guter Letzt erstellen Sie eine Idee für die Benutzeroberfläche. Online gibt es reichlich Inspiration. Es sollte eine gute Design-Praxis sein, sie zu kopieren und sie dann zu verarbeiten und an unser Site-Design anzupassen.

Kontakt

Suchen Sie einen guten Webdesigner für die Erstellung oder Modernisierung Ihrer Website, kontaktieren Sie uns und wir werden für Sie die beste Lösung sowohl finanziell, ästhetisch als auch funktionell für Ihre potenziellen Kunden besprechen, rufen Sie Roland Piątkowski unter 695 74 23 50 oder
Füllen Sie unser kostenloses Website-Bewertungsformular aus
.

Tags

Bitte beachten Sie, dass Sie durch die Nutzung der Website, ohne Ihre Browsereinstellungen zu ändern, der Datenschutzerklärung und der Speicherung von Cookies zustimmen, die ein effizientes Funktionieren unserer Website ermöglichen.