Einführung Responsive Webdesign

Größe: px
Ab Seite anzeigen:

Download "Einführung Responsive Webdesign"

Transkript

1 Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout Aktuelle Situation Mobile Browser sind leistungsstark Viele unterschiedliche Displaygrößen Desktop-Mode zeigt Webseiten wie auf dem Desktop Mobile Frameworks versuchen das Template Mobil zu machen Hang zur eigenständigen APP damit es sich auch richtig anfühlt

2 Kann sich eine Webseite verschiedenen Bildschirmgrößen anpassen? Es gibt eine Vielzahl von Responsive Grids die dieses Verhalten bereits heute bieten können. Dazu gehört unter anderem SimpleGrid (www.simplegrid.info) das im folgenden vorgestellt wird. Desktop u. Mobile Version einer Webseite Das Layout stellt sich auf die jeweils verfügbare Größe des Browserfensters ein. Testen kann man dieses Verhalten bereits im Browserfenster auf dem Desktop. Hier reicht es das Browserfenster entsprechend zu verkleinern oder zu vergrößern.

3 Das Layout unterliegt einem per CSS definiertem Raster. Ähnlich einer frühen Tabellen-Umsetzung wird hier mit rows und slots gearbeitet. CSS sorgt dafür dass die jeweils vorhandene Breite optimal genutzt werden kann. Elemente für die horizontal kein Platz mehr vorhanden ist, werden nach unterhalb verschoben. Rows und Slots in der Desktop und Mobile Ansicht Damit das funktionieren kann müssen bei der ersten Umsetzung der Webseite Vorkehrungen getroffen und Regeln eingehalten werden.

4 Die Technik CSS wird per Media-Queries Breitenabhängig eingebunden Zeile mit 6 Spalten Zeile mit 4 Spalten Zeile mit unterschiedlichen Spaltenbreiten Skalierung von Bildern Tiefe Verschachtelung von Elementen

5 Da wir nun das Layout responsive gestaltet haben bleibt noch zu klären inwieweit sich das auch auf die Bilder bezieht. Auch stellt sich die Frage wie wir mit verschiedenen DPI umgehen wollen. Verschiedene Versionen eines Bildes Man könnte die Bilder der Desktop-Version ausliefern und vom Endgerät verkleinern lassen das würde allerdings viel zu große Datenmengen ausliefern und Ressourcen auf dem Endgerät belegen. Als Alternative könnte man die Bilder im Quelltext mit zusätzlichen Größenmarkern versehen und die vorbereiteten Bilder je nach vorhandener Breite laden. Das würde zwar die Darstellung optimieren aber für jede denkbare Auflösung vorab die optimale Datei zu erzeugen ist auch nicht unproblematisch. Adaptive-Images (www.adaptive-images.com) bietet eine möglichen Ausweg über die Nutzung von.htaccess und dynamischer Erzeugung von angepassten Bildinhalten. So funktionieren ADAPTIVE-IMAGES

6 Sourcecode der Beispiele <!DOCTYPE html> <html lang="en"> <head> <title>simplegrid</title> <meta http-equiv="x-ua-compatible" content="ie=emulateie7; IE=EmulateIE9"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"/> <link rel="stylesheet" href="./css/base.css" type="text/css" media="all"> <!--[if lt IE 9 ]><link rel="stylesheet" href="./css/720_grid.css" type="text/css"><![endif]--> <link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)"> <link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)"> <link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" > </head> <body> <div class="grid"> <div class="example-grids"> <div class="slot-0">.slot-0 <div class="slot-1">.slot-1 <div class="slot-2">.slot-2 <div class="slot-3">.slot-3 <div class="slot-4">.slot-4 <div class="slot-5">.slot-5 <!-- /.row mit 6 Spalten --> <div class="slot-6">.slot-6 <div class="slot-7">.slot-7 <div class="slot-8">.slot-8 <div class="slot-9">.slot-9 <!-- /.row mit 4 Spalten --> <div class="slot-0">.slot-0 <div class="slot-1-2">.slot-1-2 <div class="slot-3-4-5">.slot <!-- /.row mit 3 unterschielich breiten Spalten --> <div class="slot-0">.slot-0 <!-- end.slot-0 --> <div class="slot-1-2-3">.slot <div class="slot-1">.slot-1 <div class="slot-1">.slot-1 <div class="slot-2-3">.slot-2-3 <div class="slot-2">.slot-2 <div class="slot-3">.slot-3 <div class="slot-2-3">.slot-2-3 <!-- end.slot > <div class="slot-4-5">.slot-4-5 <div class="slot-4">.slot-4 <div class="slot-5">.slot-5 <!-- end.slot > <!-- /.row --> <!-- /.example-grids --> <!-- /.grid --> </body> </html>

7

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015

Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Responsive Webdesign Bootstrap und co. Pierre Hein & Benjamin Stein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was ist Responive Webdesign, Media Queries und CSS preprocessing 2. Frameworks Bootstrap,

Mehr

Interface-Optimierung bei mobilen Endgeräten

Interface-Optimierung bei mobilen Endgeräten Interface-Optimierung bei mobilen Endgeräten Darauf sollte man achten Darstellung über CSS anpassen Durch optimierte Breiten kann man sehr einfach für Mobiltelefon oder ipad optimierte Seiten ausliefern.

Mehr

Responsive Web Design

Responsive Web Design Responsive Web Design mit APEX Theme 25 Christian Rokitta APEX UserGroup NRW Treffen 20.01.2014 Oracle DB & APEX Entwickler (selbstständig) Deutschland ( 1996) Niederlanden ( 1996) themes4apex: APEX UI

Mehr

Gestaltung der barrierefreien Website. DI Gerald Kortschak sevian7 IT development GmbH gkortschak@sevian7.com

Gestaltung der barrierefreien Website. DI Gerald Kortschak sevian7 IT development GmbH gkortschak@sevian7.com Gestaltung der barrierefreien Website DI Gerald Kortschak sevian7 IT development GmbH gkortschak@sevian7.com Inhalte: Überblick Wie wird s gemacht? Was bringt es?

Mehr

Responsive Webdesign

Responsive Webdesign ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR Inhalte 1. Warum Responsive Design? 2. Geschichte

Mehr

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe«

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe« 201 PhoneGap bringt einen standardisierten Hardwarezugriff für Smartphones mit. Aber was passiert, wenn Sie mehr wollen: Wenn Sie eine Hardware per Bluetooth ansprechen wollen oder Features der jeweiligen

Mehr

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign?

1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 1. Warum Responsives Webdesign? 2. Was ist Responsives Webdesign? 3. Welche Technik und Konzepte gibt es im Responsiven Webdesign? 4. Wie sieht die Zukunft im Responsiven Webdesign aus? Special: Responsives

Mehr

Responsive Web Design Graceful Degradation and Progressive Enhancement

Responsive Web Design Graceful Degradation and Progressive Enhancement Graceful Degradation and Progressive Enhancement Seminar Web Engineering für Master-Studenten (WS 2013/2014) Betreuer: Michael Krug Datum: 13.12.2013 1 Gliederung 1. Warum? 2. Konzepte zur Anpassung an

Mehr

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer

15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer 15.04.2014 Was ist HTML? Tim Berners-Lee Die erste Webseite: info.cern.ch, 13. November 1990 Webseiten waren ursprünglich einfache Textseiten mit Links. HTML = Textzusätze zur Formatierung & Erweiterung

Mehr

Responsive Webdesign

Responsive Webdesign Responsive Webdesign Anlass sind 2 Probleme: 1. Darstellung der HU-Homepage auf mobilen Geräten ist nicht optimal (Überprüfung der Anzeige mit Strg+Shift+M oder Simulatoren www.responsinator.com) 2. Summe

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 28. April 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014

Responsive Webdesign. IHK-Arbeitskreis Software. Prof. Dr. Manfred Wojciechowski 18.02.2014 IHK-Arbeitskreis Software Prof. Dr. Manfred Wojciechowski 18.02.2014 Aufbau Vorstellung Responsive Webdesign Motivation Technologien Frameworks 2 Vorstellung Zur Person 1991 1996: Studium Informatik an

Mehr

BFV Widgets Kurzdokumentation

BFV Widgets Kurzdokumentation BFV Widgets Kurzdokumentation Mit Hilfe eines BFV-Widgets lassen sich die neuesten Ergebnisse und die aktuellen Tabellen des BFV auf der eigenen nicht kommerziellen Webseite mit wenig Aufwand einbeten.

Mehr

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks.

Gliederung. Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Gliederung Responsive Design Begriffserklärung und Übersicht. Frameworks Einführung in HTML / CSS Frameworks. Präsentationsplattform Vorstellung der Präsentationsplattform Setzkasten. 1 / 14 Responsive

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

Die Sache mit den Bildern

Die Sache mit den Bildern Die Sache mit den Bildern S Grafiken im mobilen Webdesign S S Contao NRW Day 2014 S 1 Janosch Oltmanns seit 2011 bei DMA Interaction Developer Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten

Mehr

Erste Schritte in NVU

Erste Schritte in NVU NVU (http://www.nvu-composer.de/) ist ein leicht zu bedienender HTML-Editor. Nach dem Start von NVU sieht der Bildschirm wie folgt aus: Lasse dich von dieser Anzeige nicht irritieren, es ist alles halb

Mehr

Think Mobile Effiziente Entwicklungsstrategien im GIS. Kai Hoffmann, BTC AG

Think Mobile Effiziente Entwicklungsstrategien im GIS. Kai Hoffmann, BTC AG Think Mobile Effiziente Entwicklungsstrategien im GIS Kai Hoffmann, BTC AG Mobile Endgeräte Was ist zu beachten? In dieser Betrachtung Smartphone Tablet Unterschiedliche Hardwareausstattung Bildschirmgröße

Mehr

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de

Webdesign Grundlagen. Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Webdesign Grundlagen Michael Kraft, M.A. WS 2012/2013 hawk@herrkraft.de Bürokratie Termine & Kursliste & http://hawk.herrkraft.de Wer bin ich? michael kraft ba ma 2006 2012 hawk tutor interaction digital

Mehr

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016

Georgienseite TYPO3 LTS7 Projekt Georgienseite TYPO3 LTS 7 responsiv Stand: Juni 2016 TYPO3 LTS7 1 Projekt TYPO3 LTS 7 responsiv Stand: Juni 2016 Die gibt es seit 2000. Im September 2014 haben wir sie auf TYPO3 LTS 6 eingerichtet. Juni 2016 erfolgte ein update auf die Version LTS 7 von

Mehr

Leseprobe. »Was sich im Webdesign geändert hatsemantische Strukturelemente in HTML5Media Queries« Inhalt. Index. Der Autor. Leseprobe weiterempfehlen

Leseprobe. »Was sich im Webdesign geändert hatsemantische Strukturelemente in HTML5Media Queries« Inhalt. Index. Der Autor. Leseprobe weiterempfehlen Know-how Wissen, wie s für geht. Kreative. Leseprobe Erstellen Sie moderne Websites mit HTML5, CSS3 und JavaScript. Peter Müller erklärt Ihnen in dieser Leseprobe, wie sich die Webentwicklung verändert

Mehr

X-Apps-Entwicklung für iphone, Android und Co.

X-Apps-Entwicklung für iphone, Android und Co. X-Apps-Entwicklung für iphone, Android und Co. Peter Hecker 16.02.2011 - Bielefeld Peter Hecker Berater Softwareentwickler Trainer Seit 1995 vorzugsweise und am liebsten Web-Technologien! Die GFU Cyrus

Mehr

Best Practices für HTML & CSS. Johannes Eschrig

Best Practices für HTML & CSS. Johannes Eschrig Best Practices für HTML & CSS. Johannes Eschrig Gliederung. 2 1. Best Practices i. Standards ii. Standardfreundlichkeit iii. Grundlegende Regeln 2. Best Practices für HTML i. class & id ii. HTML & CSS

Mehr

Design anpassen eine kurze Einführung

Design anpassen eine kurze Einführung Design anpassen eine kurze Einführung Das gesamte Layout von Papoo basiert auf modernen CSS Layouts die vollständig ohne Layout Tabellen funktionieren. Um schnell vorhandene Designs anpassen zu können

Mehr

Übungen. DI (FH) Levent Öztürk

Übungen. DI (FH) Levent Öztürk Übungen DI (FH) Levent Öztürk Übersicht Entwicklungsumgebung PHPMYADMIN Datenbank anlegen User anlegen Tabellen Anlegen Datenbankzugriffe über PHP 01.04.2014 DI (FH) Levent Öztürk 2 Entwicklungsumgebung

Mehr

Spezifikationen Dein SPIEGEL digital

Spezifikationen Dein SPIEGEL digital Spezifikationen Dein SPIEGEL digital 1. Tablets (ipad, Android 7 /Kindle Fire, Android 10 ) 1.1. Allgemeines 1.2. Statische Anzeigen 1.3. Statische Anzeigen mit Video 1.4. Interaktive Anzeigen 1.5. Tracking

Mehr

Frontend- technologien HTML. B04 Einführung in Softwaretechnologien

Frontend- technologien HTML. B04 Einführung in Softwaretechnologien Frontend- technologien HTML B04 Einführung in Softwaretechnologien Ihre Erwartungen an die Vorlesung Verknüpfung von Wirtschaft und digitaler Technologie Grundlagen, um mit Programmierern, Informatikern

Mehr

HTML-Grundlagen (X)HTML:

HTML-Grundlagen (X)HTML: HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein

Mehr

Einführung in die Webentwicklung

Einführung in die Webentwicklung Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag

Mehr

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck

Die eigene Website. Zusatzkapitel CSS mobile Geräte & Ausdruck Die eigene Website Zusatzkapitel CSS mobile Geräte & Ausdruck Im Folgenden finden Sie einige Zusatztipps zu Kapitel 6 des Buchs Die eigene Website. Mehr Infos zum Buch auf der Website zum Buch. CSS für

Mehr

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014

Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Eine Site für alle Geräte? 200grad GmbH & Co. KG 02.03.2014 Mit der zunehmenden Nutzung des Internets über mobile Endgeräte wie Smartphones und Tablet-PCs steigt die Notwendigkeit, den Internetauftritt

Mehr

Responsive Webdesign mit CSS3 & LESS

Responsive Webdesign mit CSS3 & LESS Frank L. Schad Responsive Webdesign mit CSS3 & LESS Art.-Nr. 126a047fc1ff Version 1.1.0 vom 15.4.2015 Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm 2015 by

Mehr

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

Signatur mit Formatierung

Signatur mit Formatierung Bedienungstip: Signatur mit Formatierung Seite 1 Signatur mit Formatierung Es können Signaturen hinterlegt werden, die beim Erstellen von Nachrichten automatisch angehängt werden. Das ist sehr praktisch,

Mehr

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1

responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 responsive-web 31.10.2012 giordano.ch Oktober 31, 2012 1 perspektiven bruno giordano. // giordano.ch online.ch Oktober 31, 2012 2 giordano.ch Oktober 31, 2012 3 www.leo.org giordano.ch Oktober 31, 2012

Mehr

Google Kriterien für die Bewertung mobil optimierter Webseiten

Google Kriterien für die Bewertung mobil optimierter Webseiten Google Kriterien für die Bewertung mobil optimierter Webseiten Google Kriterien für die Bewertung mobil optimierter Webseiten Am 21. April hat Google damit begonnen ein neues Algorithmus Update auszurollen

Mehr

Eigene Themes from Scratch Stefan Fröhlich.! WordCamp Berlin 2015

Eigene Themes from Scratch Stefan Fröhlich.! WordCamp Berlin 2015 Eigene Themes from Scratch Stefan Fröhlich WordCamp Berlin 2015 Stefan Fröhlich 1984: Basic und 6510-Assembler mit C-64 seit 1995 freiberuflicher Entwickler seit 2012: WordPress anfangs Anpassung von Themes

Mehr

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische

Mehr

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1

HTML5 2 1 / 6. Doing Web Apps HTML5 2. Letzte Änderung: 2014-10-24 Version: 1.1 1 / 6 Doing Web Apps HTML5 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-10-24 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der

Mehr

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg. Klausur Informatik Programmierung, 17.09.2012 Seite 1 von 8 Klausurteilnehmer Name: Matrikelnummer: Wichtige Hinweise Es sind keinerlei Hilfsmittel zugelassen auch keine Taschenrechner! Die Klausur dauert

Mehr

Template Programmierung mit Joomla!

Template Programmierung mit Joomla! Joomla! DAY TM AUSTRIA 2015 Template Programmierung mit Joomla! Inhalt Einstieg in die Joomla! Template Programmierung Inhalt Einleitung Planung Joomla! Template Programmierung Joomla! Template Demo Fragen

Mehr

Seite 2/19. Inhaltsverzeichnis:

Seite 2/19. Inhaltsverzeichnis: Seite 1/19 Anleitung zur Verwendung der freien Webservices für die Routenberechnung auf den Südtiroler Wanderwegen und für die tourismusrelevante kartographische Darstellung. 29.04.2013 Seite 2/19 Inhaltsverzeichnis:

Mehr

Eine eigene Seite auf Facebook-Fanseiten einbinden und mit einem Tab verbinden.

Eine eigene Seite auf Facebook-Fanseiten einbinden und mit einem Tab verbinden. Eine eigene Seite auf Facebook-Fanseiten einbinden und mit einem Tab verbinden. Nach den Änderungen die Facebook vorgenommen hat ist es einfacher und auch schwerer geworden eigene Seiten einzubinden und

Mehr

Publizieren im Internet

Publizieren im Internet Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund

Mehr

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1

SASS für Einsteiger. WordCamp Köln 2015. 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 SASS für Einsteiger WordCamp Köln 2015 06.06.2015 Bernhard Kau @2ndkauboy kau-boys.de 1 Wer bin ich? Bernhard Kau Wahlberliner PHP-Entwickler WordPress-Plugin Hobby-Entwickler CSS-Tüftler Organisator der

Mehr

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1 Neue Oberfläche April 2013 am Montag, den 15. April 2013 Folie 1 Erklärung der Icons Die Icons, welche in jeder Update-Kommunikation verwendet werden, haben folgende Bedeutung: Neuerung (aktiv) Direkt

Mehr

Pattern im Mobile Webdesign. S Contao Konferenz 2016 S

Pattern im Mobile Webdesign. S Contao Konferenz 2016 S Pattern im Mobile Webdesign S Contao Konferenz 2016 S 1 dma.do/schoenheit 2 Janosch Oltmanns seit 2011 bei DMA Prokurist / Geschäftsleiter Buchautor: Web-Apps erstellen mit CMS-Daten HTML5 Content-Management-Systeme

Mehr

5 Der Whisky-App ein Gesicht geben

5 Der Whisky-App ein Gesicht geben 93 Das Modell steht und das Grundgerüst der View ist im letzten Kapitel erstellt worden. Also höchste Zeit, sich mit den Details zu jquery Mobile auseinanderzusetzen. Die verwendeten Bibliotheken hält

Mehr

Kai Laborenz CSS. Das umfassende Handbuch

Kai Laborenz CSS. Das umfassende Handbuch Kai Laborenz CSS Das umfassende Handbuch Auf einen Blick Auf einen Blick 1 Was sind Cascading Stylesheets?... 17 2 HTML und CSS... 25 3 Das erste Stylesheet»Hallo Welt!«auf CSS... 43 4 Selektoren... 49

Mehr

Spezifikationen digitale Editionen DER SPIEGEL manager magazin Harvard Business Manager

Spezifikationen digitale Editionen DER SPIEGEL manager magazin Harvard Business Manager Spezifikationen digitale Editionen DER SPIEGEL manager magazin Harvard Business Manager Inhalt Inhalt 1. Android/Kindle Fire 1.1. Allgemeines 2 1.2. Statische Anzeigen 2 1.3. Statische Anzeigen mit Video

Mehr

HTML5, CSS3 und JavaScript Webseiten entwickeln. Fortgeschrittene Anwendungen. Isolde Kommer. 2. Ausgabe, September 2015 ISBN 978-3-86249-441-5 HTML5F

HTML5, CSS3 und JavaScript Webseiten entwickeln. Fortgeschrittene Anwendungen. Isolde Kommer. 2. Ausgabe, September 2015 ISBN 978-3-86249-441-5 HTML5F HTML5, CSS3 und JavaScript Webseiten entwickeln Isolde Kommer Fortgeschrittene Anwendungen 2. Ausgabe, September 2015 HTML5F ISBN 978-3-86249-441-5 3 HTML5, CSS3 und JavaScript - Webseiten entwickeln 3.2

Mehr

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten

Responsive WebDesign. Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Responsive WebDesign Zukunftssicheres Webdesign für die optimale Darstellung auf allen Geräten Moderne Web-Konzepte punkten mit einer ansprechenden Visualisierung, professionellen Fotos und informativen

Mehr

Dr. Thomas Meinike Hochschule Merseburg

Dr. Thomas Meinike Hochschule Merseburg XSLT Programmierung effektiv und schmerzfrei! Dr. Thomas Meinike Hochschule Merseburg thomas.meinike@hs merseburg.de http://www.iks.hs merseburg.de/~meinike/ @XMLArbyter Zusatzmaterial Februar

Mehr

Referenz Frontend: Responsive Webdesign

Referenz Frontend: Responsive Webdesign Stand: Dezember 2014 Diese Referenzliste bezieht sich auf eine Webseite, von der es zwei Versionen gibt. Diese Version ist mit Hilfe des Twitter Bootstrap Frameworks für mobile Endgeräte optimiert. - Startseite

Mehr

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag

Martin Fache (KIDS interactive) - Anforderungen an eine mobile/responsive Website Vortrag zum Seitenstark Fachtag Agenda Entwicklung der Internet-fähigen Geräte Motivation für mobile Optimierung Lösungsansätze und Praxisbeispiele Im Jahr 2000 http://dag.wosc.edu/?gallery=wosc-computer-collection Im Jahr 2000 Webseite

Mehr

NETTBIZ WEB DESIGN GRAFIK PROGRAMMIERUNG HOSTING

NETTBIZ WEB DESIGN GRAFIK PROGRAMMIERUNG HOSTING NETTBIZ WEB DESIGN GRAFIK PROGRAMMIERUNG HOSTING Jedes Unternehmen wird sich im Laufe der Zeit neuen Herausforderungen stellen und weiter entwickeln. Auch Ihre Kommunikation sollte in der Lage sein mit

Mehr

#58. select-liste (deren Werte durch die Auswahl des Benutzers in der ersten Liste bestimmt werden) direkt über dem Button.

#58. select-liste (deren Werte durch die Auswahl des Benutzers in der ersten Liste bestimmt werden) direkt über dem Button. Dynamisch eine Auswahlliste in einem Rails-Template generieren #58 HACK #58 Dynamisch eine Auswahlliste in einem Rails-Template generieren Hack Generieren Sie mit Hilfe von Ajax und Ruby on Rails eine

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 4 PHP SS 2004 Inhaltsverzeichnis 1. PHP die serverseitige Programmiersprache...1 1.1. PHP - Bereiche in HTML definieren...1

Mehr

Flexibles HTML. christian.cueni@bfh.ch

Flexibles HTML. christian.cueni@bfh.ch Flexibles HTML christian.cueni@bfh.ch Inhalt Desktop & Mobile Strategien Responsive Design HTML5 Feature Detektion mit Modernizr Desktop & Mobile Strategien Wie bringe ich mobile Nutzer zum (UI) optimierten

Mehr

Das TYPOlight CSS-Framework

Das TYPOlight CSS-Framework Das TYPOlight CSS-Framework Aufgaben eines CSS-Frameworks CSS-Reset Vereinheitlichung der Darstellung in allen Browsern Zurücksetzen der proprietären Abstände und Formatierungen Cross-Browser-Formatierung

Mehr

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0

Inhaltsverzeichnis. Christoph Zillgens. Responsive Webdesign. Reaktionsfähige Websites gestalten und umsetzen. ISBN (Buch): 978-3-446-43015-0 sverzeichnis Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen ISBN (Buch): 978-3-446-43015-0 ISBN (E-Book): 978-3-446-43120-1 Weitere Informationen oder Bestellungen

Mehr

Online-Publishing mit HTML und CSS für Einsteigerinnen

Online-Publishing mit HTML und CSS für Einsteigerinnen Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden

Mehr

Informatik I: Einführung in die Programmierung

Informatik I: Einführung in die Programmierung Informatik I: Einführung in die Programmierung 21. Das WWW befragen Albert-Ludwigs-Universität Freiburg Bernhard Nebel 13.01.2015 1 13.01.2015 B. Nebel Info I 3 / 17 Oft braucht ein Programm Informationen,

Mehr

Multimediale Webprogrammierung. Bilder als Content von Webseiten. Bilder in Webseiten. Bildformate. Bilder in Webseiten 15.06.2015.

Multimediale Webprogrammierung. Bilder als Content von Webseiten. Bilder in Webseiten. Bildformate. Bilder in Webseiten 15.06.2015. Multimediale Webprogrammierung 03.06.2015/1 03.06.2015/2 http://www.allwebdesigninfo.com/10-helpful-tools-for-responsive-web-design.html als Content von Webseiten Alle Webseiten, 15.05.2015 (etwa 484.000)

Mehr

Modernes Webdesign mit CSS

Modernes Webdesign mit CSS Heiko Stiegert Modernes Webdesign mit CSS Schritt für Schritt zur perfekten Website Galileo Press Inhalt rt TEIL I Grundlagen 1 Einleitung 1.1 Was ist Webdesign? 1.1.1 Accessibility 15 1.1.2 Usability

Mehr

ArcGIS Online Werkstatt II Wege zur eignen Webanwendung

ArcGIS Online Werkstatt II Wege zur eignen Webanwendung ArcGIS Online Werkstatt II Wege zur eignen Webanwendung Christiane Radies Esri Deutschland GmbH 26. Juni 2014, Stuttgart Agenda 1. Einbetten 2. Templates nutzen 3. API s 4. WebApp Builder 2 2014 Esri Deutschland

Mehr

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)

Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen) Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte

Mehr

Erweiterungen Gantry Framework -

Erweiterungen Gantry Framework - Gantry Framework Gantry Framework ist eine Art Tabelle (Grid), in der man in den Zellen die jeweiligen Beiträge und sonstigen Bereiche positionieren kann. Gantry Framework downloaden Über Google nach Gantry

Mehr

11 Tabellen als Inhaltselement (ohne RichTextEditor)

11 Tabellen als Inhaltselement (ohne RichTextEditor) 11 Tabellen als Inhaltselement (ohne RichTextEditor) Inhaltsverzeichnis 11 Tabellen als Inhaltselement (ohne RichTextEditor) 1 Vorbemerkung.......................................... 1 11.1 Eine einfache

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 1: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH DOZENTENTEAM FÜR JEDES THEMA EIN SPEZIALIST ANDI KELLER andi@4eyes.ch Mitgründer von 4eyes

Mehr

HTML Programmierung. Aufgaben

HTML Programmierung. Aufgaben HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite

Mehr

Webseiten erstellen für Einsteiger

Webseiten erstellen für Einsteiger Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21

Mehr

Installation Tomcat-WebServer in der Musterlösung

Installation Tomcat-WebServer in der Musterlösung Berufliche Schulen ZPG-Mitteilungen Zentrale Projektgruppe Kaufmännische Schulen Beilage: Winfried Klein / Eckehard Möbius Installation Tomcat-WebServer in der Musterlösung Landesinstitut für Schulentwicklung

Mehr

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F

HTML5, CSS3 und JavaScript 1.8. Fortgeschrittene Entwicklung von Webseiten. Isolde Kommer. 1. Ausgabe, 2. Aktualisierung, Dezember 2013 HTML5F HTML5, CSS3 und JavaScript 1.8 Isolde Kommer 1. Ausgabe, 2. Aktualisierung, Dezember 2013 Fortgeschrittene Entwicklung von Webseiten HTML5F 2 HTML5, CSS3 und JavaScript 1.8 - Fortgeschrittene Entwicklung

Mehr

Mobiler Ratgeber. TILL.DE Google Partner Academy

Mobiler Ratgeber. TILL.DE Google Partner Academy Mobiler Ratgeber TILL.DE Google Partner Academy Warum mobil sein? Eine Webseite, die mobil nicht gut zu erreichen ist, ist mit einem geschlossenen Geschäft gleichzusetzen! Warum mobil sein? Darüber informieren

Mehr

Vitaminkapseln.ch - SEO Check

Vitaminkapseln.ch - SEO Check Vitaminkapseln.ch - SEO Check Überprüfte URL: http://www.vitaminkapseln.ch/ Erstellt am: 16.12.2015 11:00 Übersicht der SEO Analyse Suchvorschau Metaangaben 100% Seitenqualität 40% Seitenstruktur 60% Verlinkung

Mehr

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise

Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt Hinweise Klausur Übung 1 E-Business und WSE: HTML/XHTML SS 2007 Seite 1 von 4 Fachbereich Wirtschaftswissenschaften Klausur: Übung 1 zur Vorlesung E-Business und Web-Site-Engineering Sommersemester 2007 Deckblatt

Mehr

Kompozer Kurzanleitung

Kompozer Kurzanleitung Kompozer Kurzanleitung Für Kompozer Version 0.7.10 1 Grundlagen 1 1. Download Das Programm Kompozer ist ein Freewareprogramm und damit frei von Lizenzen. Es kann auf der Website von Kompozer heruntergeladen

Mehr

Erste Schritte mit XHTML

Erste Schritte mit XHTML Sascha Frank SS 2005 www.saschafrank.de 3.3.05 Eigene Homepage Rechte am $HOME ändern Eigene Homepage Rechte am $HOME ändern chmod 701 /home/login Eigene Homepage Rechte am $HOME ändern chmod 701

Mehr

Referenzen Frontend und PHP

Referenzen Frontend und PHP Referenzen Frontend und PHP Stand: Dezember 2014 - Startseite Stand: Dezember 2014 - Seite wird mit PHP aus mysql Datenbank generiert - HTML5 und CSS3 - Aufbau mit - validiert von W3C www.georgien-nachrichten.de

Mehr

Süddeutsche Zeitung als digitale Ausgabe

Süddeutsche Zeitung als digitale Ausgabe Süddeutsche Zeitung als digitale Ausgabe Technische Spezifikationen für SZ-App- Anzeigen, Stand: 27.03.2015 Inhaltsübersicht 1. Einleitung und Anlieferungstermine S. 1 2. Anzeigen 2.1. Bildanzeigen statisch

Mehr

Whitepaper Responsive Design

Whitepaper Responsive Design 76% Smartphone-Besitzer surfen täglich 69% Tablet-Besitzer surfen täglich 74% der Schweizer nutzen das Internet mobil Das mobile Internet ist mittlerweile fest in den Alltag der Schweizer integriert: 76

Mehr

Webseitenverwaltung. Mit HTML, CSS und ein klein wenig PHP. Steffen Schwientek http://schlaukopp.org

Webseitenverwaltung. Mit HTML, CSS und ein klein wenig PHP. Steffen Schwientek http://schlaukopp.org Webseitenverwaltung Mit HTML, CSS und ein klein wenig PHP Ziel: Einheitliches Layout Banner für alle Seiten des Webauftritts div id="navi" Seite 1 Seite2 Seite

Mehr

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG

CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme

Mehr

{ Light up the Web } Oliver Scheer. Evangelist Microsoft Deutschland

{ Light up the Web } Oliver Scheer. Evangelist Microsoft Deutschland { Light up the Web } Oliver Scheer Evangelist Microsoft Deutschland { Light up the Web } Oliver Scheer Evangelist Microsoft Deutschland Was ist Silverlight? Tools für Silverlight Designer-Developer-Workflow

Mehr

Internet-Partner der Wirtschaft. Suchmaschinen-Optimierung

Internet-Partner der Wirtschaft. Suchmaschinen-Optimierung Vitamine für Ihr Business Unser Thema heute: Suchmaschinen-Optimierung 1. Teil Der Vorfilm... Es sollte schon passen... Ihr Business Unser Service Uwe Stache / BB-ONE.net Catwalk für Google Step one Spezialisiert

Mehr

Wahlpflichtfach Streaming Media

Wahlpflichtfach Streaming Media Wahlpflichtfach Streaming Media Gregor Franzen TM061023 Ines Schwaighofer TM061102 In dem Wahlpflichtfach Streaming Media beschäftigen sich verschiedene Gruppen von Studierenden mit unterschiedlichen Streaming-Technologien.

Mehr

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere.

Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. 1.0.0 Allgemeine Informationen Es gibt zahlreiche Web-Programmiersprachen: HTML, CSS, JavaScript, PHP, Perl, Python, HTTP, XML und viele weitere. Wir werden uns hauptsächlich mit HTML beschäftigen, weil

Mehr

Online werben auf Kreiszeitung.de

Online werben auf Kreiszeitung.de 1) laut IVW Aug 2) laut IVW I/13 Online werben auf Kreiszeitung.de 1,57 Mio. Visits (1 LEgEndE Ihr Ansprechpartner: Florian Meyer Online-Mediaberater Telefon: 04242 58-216 Fax: 04242 58-200 florian.meyer@mk-digital.net

Mehr

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7

HTML Kurs. Inhaltsverzeichnis. Dominic Dietiker Aktualisierung: February 13, 2009. 1 Das HTML-Dokument 2. 2 Einige Tags 7 HTML Kurs Dominic Dietiker Aktualisierung: February 13, 2009 Inhaltsverzeichnis 1 Das HTML-Dokument 2 2 Einige Tags 7 3 Erarbeiten weiterer Tags 11 4 Tabellen 11 A Lösungen 16 1 1 Das HTML-Dokument Tags

Mehr

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift

Mehr

Web Developer Toolbar: Gibt es einen Webworker, der dieses Tool nicht nutzt?

Web Developer Toolbar: Gibt es einen Webworker, der dieses Tool nicht nutzt? Web Developer Toolbar 47 Die HTML-Ansicht zeigt den Code»gefaltet«und farblich hervorgehoben. Die HTML-Ansicht der IE8-Entwicklertools zeigt den»wirklichen«zustand des Dokumentes an. Sind JavaScript-Dateien

Mehr

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org

Layoutmodelle. Steffen Schwientek Große Klostergasse 5 61169 Friedberg Email:schwientek@web.de Web :schlaukopp.org Layoutmodelle HTML wurde von ihren Erfindern nicht als Layoutsprache entworfen, sondern zur Informationsübermittlung entworfen Es gab verschiedene Modelle, welche das Web populär machten und. Bei Erstellung

Mehr

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011. [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: . Addison-Wesley, 2005 [7-4]

Mehr

Websiteentwicklung auf Basis vontypo3 HTML/CSS. Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets. 2. TYPO3 Designvorlage 3.

Websiteentwicklung auf Basis vontypo3 HTML/CSS. Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets. 2. TYPO3 Designvorlage 3. Websiteentwicklung auf Basis vontypo3 /CSS Unterlagen zur Vorlesung WS 14/15-3- 1. Geschichte des Internets 2. TYPO3 Designvorlage 3. 4. CSS 1 Geschichte des Internets Geschichte des Internets Die Ursprünge

Mehr

Kapitel 1. Grundlagen des Worldsoft-CMS

Kapitel 1. Grundlagen des Worldsoft-CMS Kapitel 1 Notwendige Voraussetzungen für diese Schulung: Internetfähiger Computer mit aktuellem Browser (z.b. Firefox, Internet Explorer) Bild- und Textvorlagen: Diese Vorlagen finden Sie auf der CC-Website

Mehr

Erstellen von Templates

Erstellen von Templates Anleitung zum Erstellen von Webdesign Vorlagen für das Contrexx CMS 26.09.2012 1 Inhaltsverzeichnis 1 Einleitung... 3 1.1 Wozu dient diese Anleitung?... 3 1.2 Was wird benötigt?... 3 1.3 Was ist ein Template?...

Mehr

Trend: Mobiles Internet. Eine aktuelle Übersicht

Trend: Mobiles Internet. Eine aktuelle Übersicht Trend: Mobiles Internet Eine aktuelle Übersicht Computer verändern sich Kommunikation verändert sich Fotografie verändert sich Drei Erfolgsfaktoren 1 Seien Sie auf allen Bildschirmen präsent 2 Seien Sie

Mehr

Web-Performance-Optimierung - Websites auf Speed SEO Barbecue - DIWISH - Kiel - 01. August 2012. Timo Heinrich t.heinrich@online-werbung.

Web-Performance-Optimierung - Websites auf Speed SEO Barbecue - DIWISH - Kiel - 01. August 2012. Timo Heinrich t.heinrich@online-werbung. SEO Barbecue Web-Performance-Optimierung - DIWISH - Kiel - 01. August 2012 - Websites auf Speed 1 2 Kinder 1 Frau 41 Jahre jung Seit 1996 autodidaktischer Onliner Schwerpunkte: Suchmaschinenoptimierung

Mehr