Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Webdesign. Technologien im Web Text Inhalt Worte, Pfade, Bilder, Videos,... HTML Struktur Abschnitte, Überschriften, Links,... CSS Layout Design, Schriften,

Ähnliche Präsentationen


Präsentation zum Thema: "Webdesign. Technologien im Web Text Inhalt Worte, Pfade, Bilder, Videos,... HTML Struktur Abschnitte, Überschriften, Links,... CSS Layout Design, Schriften,"—  Präsentation transkript:

1 Webdesign

2 Technologien im Web Text Inhalt Worte, Pfade, Bilder, Videos,... HTML Struktur Abschnitte, Überschriften, Links,... CSS Layout Design, Schriften, Farben,... JS Interaktion Veränderungen (clientside) Web2.0 Interaktion (serverside) Datenbanken CMS (alles zusammen)

3 Ablauf Semester –Grundkurs HTML & CSS (codecademy) –Übungen Layout gestalten mit HTML & CSS –Probe HTML & CSS –Projekt design Website (Ausschreibung Mockup) –Grundkurs PHP (codecademy) –Einführung CMS (WordPress) –Übungen Formulare und Datenbankabfragen –Probe PHP & Datenbanken –Projekt dynamische Webseite (WordPress) –Ende AF infcom.ch 

4 Vorläufige Zeitplanung THEMA: 1L2L Datum (Mo) Mi 13: :50Do 10: :05 9-Feb HTML&CSS (Codecademy) 16-Feb HTML&CSS (Codecademy) 23-Feb HTML&CSS (Übungen) 2-Mär HTML&CSS Layout Principles 9-Mär Kollegiumstag/Erarbeitung Text Corporate Design 16-Mär Corporate DesignCorporate Design/Ausschreibung 23-Mär Projekt Ausschreibung 30-Mär Projekt Ausschreibung Abgabe Ausschreibung Ferien (Wochen 15 & 16) 20-Apr Arbeitswoche MA 27-Apr CMSWP 4-Mai PHP 11-Mai PHPAuffahrt (Do & Fr frei) 18-Mai Formulare & Datenbanken 25-Mai PHP & DatenbankenWP 1-Juni WP 8-Juni WP 15-Juni WP 22-Juni WPAbgabe WP 29-Juni Debattiertag Maienzug

5 STATISCHE WEBSEITEN

6 .com –(immer) Einloggen mit dem bereitgestellten login –Kurs (HTML & CSS) selbständig bearbeiten –Sie haben 2 Wochen (Unterricht & zuhause) –Optional: „Make a Website“-Kurs / JS-Kurs

7 DYNAMISCHE WEBSEITEN

8 HTML & CSS Hallo... Hallo...  Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:  Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1- Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt h1 { color: orange; font-weight: bold; } h1 { color: orange; font-weight: bold; }

9 HTML & CSS Home About Contact Home About Contact  Noch immer wird “meinCSS.css” benutzt:  Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll... #nav { width: 60%; float: right; }... #nav { width: 60%; float: right; }...

10 Inhalt | Struktur | Layout Hallo! Statische Webseite Der Webdesigner erstellt die Dateien (HTML, ggf. CSS separat), die der Host dann im Internet für die Clienten (Browser) bereit stellt. Also sieht jeder dieselbe, unveränderliche Webseite, die der Webdesigner gestaltet hat. Layout der Seite (CSS) Layout der Seite (CSS) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

11 Inhalt | Struktur | Layout Hallo! Dynamische Webseite: Der Webdesigner schreibt ein Programm (in PHP), das die benötigten Dateien (HTML, ggf. CSS) produziert. Deshalb kann die Seite unterschiedlich aussehen, in Abhängigkeit von Rechten oder Verhalten des Benutzers. Layout der Seite (CSS) Layout der Seite (CSS) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

12 Inhalt | Struktur | Layout Hallo! WEB2.0 / CMS: Die einzubeziehenden Inhalte werden in einer Datenbank gespeichert. Daher können sie flexibel benutzte/geordnet und sogar online geändert werden (mit den entsprechenden Rechten). Layout der Seite (CSS) Layout der Seite (CSS) Inhalt der Seite (Buchstaben,...) Inhalt der Seite (Buchstaben,...) Struktur der Seite (HTML) Struktur der Seite (HTML)

13 Wordpress 4.0 oder: Wie man ein CMS benutzt und administriert.

14 Ein Anwendungsbeispiel –Frontend: vom Client auszuführender Code  was der Endbenutzer zu sehen bekommt –Backend: vom Server auszuführender Code (inkl. Einstellungen)  bestimmen das Ergebnis im Frontend

15 C ontent M anagement S ystem Bei einem Content Management System – kurz CMS – geht es darum, den Inhalt einer Webseite, also den Content, zu verwalten. Im Gegensatz zu statischen Webseiten, deren Inhalt sich nicht oder nur selten ändert, werden CMS für dynamische Webseiten mit wechselndem Inhalt eingesetzt. Mit Hilfe von CMS ist es möglich, Inhalte ohne Programmierkenntnisse zu erstellen. Außerdem lassen sich Benutzer in Gruppen organisieren, denen wiederum unterschiedliche Rechte vergeben werden können. So lässt sich ziemlich genau einstellen, welcher Benutzer was darf. Bild: Text: Lars Becker; Die gängigsten kostenlosen CMS sind: WordPress Joomla Drupal Typo3

16 Infografic: way/

17 Also los: WordPress installieren Der Host ist bereits angemietet, die zu WordPress 4.0 gehörenden Dateien sind auf den Server geladen, die Datenbank ist angelegt, und das für jede(n) von ihnen. Jetzt müssen sie ihre WP-Version nur noch installieren: –http://www.nksainf.ch/nicolasruh/wp- admin/install.phphttp://www.nksainf.ch/nicolasruh/wp- admin/install.php hier sollte natürlich ihr Name stehen, siehe Zettel

18 Wird im header angezeigt, hat nichts mit der URL zu tun. vornamenachname Passwort bitte merken! geben sie eine funktionierende Adresse an Häkchen entfernen !

19 hier geht’s zum administrator-login

20 Einloggen : admin/

21 Backend : admin/

22 Frontend :

23 Der Beitrag... –ist die Grundeinheit eines Blogs (WP kennt auch Seiten, aber damit beschäftigen wir uns später)

24 wordpress-features-and-functionalities-infographic.htm

25 Aufgaben 1.Zunächst sorgen sie für ein wenig Inhalt: Erstellen und Veröffentlichen sie > 5 Beispiel-Beiträge Experimentieren sie auch mit Bildern, Videos, Links,... Machen sie sich mit der Text-Ansicht des Editors vertraut Setzen sie Beitragsbilder, Schlagwörter und Kategorien ein Überprüfen sie das Ergebnis im Frontend 2.Machen sie sich weiter mit dem Backend vertraut: schauen sie sich an, welche Einstellungen man vornehmen kann probieren sie Verschiedenes aus, z.B. –neues Theme installieren, Theme anpassen, Kommentare moderieren Aber Achtung! Sie sind der Administrator und müssen Dinge ggf. auch wieder in Ordnung bringen

26 Die grosse Aufgabe –Sie haben jetzt ihre eigene WordPress-Seite. Auf dieser Seite sollen im Laufe der Zeit möglichst viele Informationen aufgeschaltet werden, die ihnen bei der Vorbereitung der Abschlussprüfung helfen können (Binf und/oder andere Fächer) –Als Admin sorgen sie dafür, dass die Inhalte der Seite sinnvoll ausgewählt und inhaltlich korrekt sind, die Sprache klar und richtig ist und nötige Quellen angegeben sind die Strukturierung von Seite und Inhalten es Besuchern einfach macht, Relevantes zu finden das Layout der Seite einheitlich und ansprechend gestaltet ist und die Ordnung klar transportiert –Ihre Seite wird gegen Ende des SJ anhand diese Kriterien bewerten (ganze Note, Kriterien bekommen sie noch genauer)

27 Die letzten 15 Minuten... –Erstellen sie mindestens einen Beitrag, mit 1.Gut gewähltem Titel 2.Sauber formuliertem Text (ca. 5 – 10 Sätze) 3.Beitragsbild, z.B. Screenshot 4.Kategorie(en) & Tag(s) – sobald wir das eingeführt haben Inhaltlich soll es in diesem Beitrag darum gehen, was sie heute im BInf (neues) gelernt haben. Heute könnten sie z.B. einen Beitrag zu Frontend/Backend schreiben, oder erklären, was ein CMS ist. ab jetzt immer

28

29 HTML & CSS seite.html  Das Beispiel, das uns jetzt eine Weile beschäftigen wird  Sehr nah am WordPress Standard-Aussehen (nur etwas vereinfacht und nicht mehr dynamisch)  Das Beispiel, das uns jetzt eine Weile beschäftigen wird  Sehr nah am WordPress Standard-Aussehen (nur etwas vereinfacht und nicht mehr dynamisch)....site-header { width: 100%; height: 48px; }....site-header { width: 100%; height: 48px; }... style.css

30 HTML & CSS Ein Beitrag Text Text Text Text Text Text Text Noch ein Beitrag Text Text Text Text

Ähnliche Präsentationen


Google-Anzeigen