HOMEPAGE Einfach selber machen Professionelle Homepage Grundlagenvortrag HOMEPAGE

HOMEPAGE – Einfach selber machen! Professionelle Homepage Grundlagenvortrag

HOMEPAGE – Einfach selber machen! Inhaltsverzeichnis Web 2. 0 Technologien • • • Was bedeutet Web 2. 0? Sieben Prinzipien des Web 2. 0 Technische Merkmale von Web 2. 0 Entwicklung des Internets seit 1992 Verschiedene Web 2. 0 Angebotsformen Content-Management-System • • 10/2/2020 Dynamische Webseiten – PHP kombiniert mit My. SQL Zusammenspiel von Layout, Modul und Template Schritt 1: HTML-Layout mit Containern erstellen Schritt 2: Standard-Module im CMS platzieren Schritt 3: Content in Template mit Containern einbinden Schritt 4: Homepage mit Cascading Stylesheets fomatieren Warum Content, Layout und Funktion trennen? Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 2

HOMEPAGE – Einfach selber machen! Was bedeutet Web 2. 0? Offenheit – Wichtiger Einflussfaktor • • • Open Source Projekte: z. B: Wordpress, xt: Commerce, contenido, e. Groupware API-Schnittstellen ermöglichen Datenzugriff: z. B. afterbuy, e. Bay, Google Maps Trackbacks verstärken Beziehungscharakter: z. B. Weblogs Standardisierung – Schnelle Weiterentwicklung • • RSS-Feeds verteilen Informationen fast jeder Art: z. B. del. icio. us, technorati XML-Daten werden für Nutzer sinnvoll eingesetzt: z. B. Netvibes Freiheit – Benutzer nehmen Einfluss (Interaktivität) • • • Web 2. 0 Anwendungen setzen auf die Mitarbeit der User: z. B. Wikipedia Social Networking erleichtert soziale Beziehungen: z. B. Xing, Google Maps Online-Foren ermöglichen Wissensaustausch (Mitmach-Web): z. B. php. BB Quelle: www. labuschin. com/journal/ web-2 -0/was-ist-web-2 -0 -diesmal-kurz -und-knapp 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 3

HOMEPAGE – Einfach selber machen! Sieben Prinzipien des Web 2. 0 (Tim O‘Reilly) Plattform Web – Das Internet ist inzwischen allgegenwärtig Kollektive Intelligenz – Gegenseitige Verlinkung von Daten im Internet Daten – In Web-Anwendungen gesammelte Daten sind Basis für andere Software-Lebenszyklus – Software ist kein Produkt mehr, sondern ein Service Lightweight Programming Models – Daten sehr einfach jedem bereitstellen Software Level – Als Endgerät sind neben PC‘s, auch Mobile oder sonstige Geräte Benutzerführung – Anwendungen integrieren Rich User Interfaces und Interaktion 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 4

HOMEPAGE – Einfach selber machen! Technische Merkmale von Web 2. 0 • Browserbasierend, d. h. zur Nutzung ist kein Programm nötig • Multiplattform für Computer, PDA, Handy, . . . • Verlagerung von Desktop-Funktionen ins Web (Saa. S) • Starke Interaktivität der Websites durch AJAX • Kontinuierliche Weiterentwicklung • Neuartige Archivierung von Inhalte durch Tags • Flache Navigation 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 5

HOMEPAGE – Einfach selber machen! Entwicklung des Internets Gängige Begriffe der Web 2. 0 Thematik im Zeitverlauf: Quelle: de. wikipedia. org/wiki/Web_2. 0 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 6

HOMEPAGE – Einfach selber machen! Verschiedene Web 2. 0 Angebotsformen Wikipedia – Die freie Online-Enzyklopädie Am Inhalt kann jeder Onlinenutzer mitarbeiten, in dem er Beiträge verfasst oder ergänzt. Mister Wong / del. icio. us / Furl - Lesezeichensammlungen Im Web stellen Nutzer ihre persönlichen Lesezeichen (Social Bookmarking) der Webgemeinde zur Verfügung und indexieren diese mit Schlagworten. You-Tube / Flickr – Bilder-/Videocommunity Im Web präsentieren Nutzer ihre eigenen Bildern oder Videos, vernetzen, bewerten und kommentieren sich gegenseitig. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 7

HOMEPAGE – Einfach selber machen! Verschiedene Web 2. 0 Angebotsformen Xing / My. Space / Lokalisten / Studi. VZ – Soziale Netzwerke In sozialen Kontakt- bzw. Beziehungsnetzwerken, ob beruflicher (Branchenkontakten knüpfen) oder privater Art, legen Nutzer eigene Profile an. Second Life – Virtuelle Spielewelten Eine virtuelle Welt wird hauptsächlich von den Nutzern gestaltet. Der User bewegt sich durch diese virtuelle Welt mit einer persönlichen Figur (Avatar). Weblogs – Veröffentlichen von Content Onlineangebote, auf denen in periodischen Abständen neue Einträge verfasst werden. Blogger veröffentlichen einfach Texte oder Bilder, die Lesern kommentieren. Die Nutzer verlinken sich gegenseitig. Quelle: ARD/ZDF-Online-Studie 2007 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 8

HOMEPAGE – Einfach selber machen! Dynamische Webseiten – PHP kombiniert mit My. SQL Wer keine statische Homepage, sondern einen modernen und flexiblen Internetauftritt möchte, der benötigt die Skriptsprache PHP in Verbindung mit My. SQL. Damit entwickeln Sie dynamische Webseiten aller Art. php. My. Admin ist eine freie PHPApplikation zur Administration von My. SQL-Datenbanken 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 9

HOMEPAGE – Einfach selber machen! Zusammenspiel von Layout, Modul und Template Layout: Das Layout basiert auf ganz einfachem HTML, welches das Grundgerüst bildet mit dem Sie das Aussehen des Frontendbereichs steuern. Module: Dadurch erhält Ihre Website die besonderen Funktionalitäten. Die wichtigsten Standard-Module sind: Navigation, Content, Suchfeld, Loginbox, … Template: Im Template fügen Sie das Layout mit den Modulen zusammen. Sie bestimmen manuell, welches Modul Sie in welchen Layout-Container legen. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 10

HOMEPAGE – Einfach selber machen! Homepage mit contenido entwickeln – Layout Schritt 1: HTML-Layout mit Containern erstellen (Aussehen) Bei dem nachfolgenden Quellcode handelt es sich um einen stark gekürzten Auszug aus dem HTML-Quellcode des Layouts. Interessant ist der farblich hervorgehobene Bereich, wo Sie fünf Container in Aktion sehen. <html> <head> <title>Online-Business für Existenzgründer</title> <meta name="author" content="Susanne Angeli" /> </head> <body> … <!-- Mittlere Spalte START --> <div id="centrecontent" style="float: left; width: 554 px; "> <container id="60" name="Navigationspfad">Navigationspfad</container> <container id="10" name="Headline>Headline (HTML)</container> <container id="12" name="Text">Content 1</container> </div> <!-- Mittlere Spalte ENDE --> … </body> </html> 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 11

HOMEPAGE – Einfach selber machen! Homepage mit contenido entwickeln – Module Schritt 2: Standard-Module im CMS platzieren (Funktionalität) Damit das Layout wie gewünscht aussieht, benötigen Sie ein paar Standard-Module: Headline, Navigationspfad und Content. Die Container übernehmen die Platzierung von Content in dem Endergebnis der HTMLWebseite. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 12

HOMEPAGE – Einfach selber machen! Homepage mit contenido entwickeln – Template Schritt 3: Content im Template mit Containern einbinden Im Normalfall erstellen Sie mehrere Layouts. Mit der Wahl des Layouts sehen Sie die im HTML-Quellcode des Layouts eingebundenen Container. In diese Container legen Sie Informationen (also Content) ab. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 13

HOMEPAGE – Einfach selber machen! Homepage mit contenido entwickeln - CSS Schritt 4: Homepage mit Cascading Stylesheets formatieren Es gibt drei Möglichkeiten, um HTML und CSS zu verbinden. Erfolgt eine Formatzuweisung doppelt oder mehrfach, hat stets das CSS-Format mit der niedrigsten Stufe den Vorrang. Formatdefinition HTML-Beispielcode Stufe 1: direkt im HTML-Element <h 1 style="[Elementspezifische CSS-Formate]">. . . </h 1> Stufe 2: zentral im <head>-Bereich <style type="text/css"> <!-/*. . . Dateispezifische CSS-Formate. . . */ --> </style> Stufe 3: externe CSS-Datei <link rel="stylesheet" type="text/css" href="style. css"> 10/2/2020 z. B. <p style="background-color: #808040; color: #D 8 FD 02; >…</p> Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 14

HOMEPAGE – Einfach selber machen! Warum Content, Layout und Funktion trennen? Die Trennung von Inhalt (Content), Design (Layout) und Funktionalität ist der Hauptaspekt eines CMS. Diese Komponenten werden unabhängig voneinander entwickelt, im Endprodukt zusammengeführt und dient der Übersichtlichkeit: Redakteur - Die Eingabe von Inhalten soll so einfach wie möglich geschehen, ohne dass sich der Autor mit unnötigen Design- und Funktionalitätsfragen beschäftigen muss. Er konzentriert sich voll auf das Erstellen von Inhalten. Designer - Der Webdesigner arbeitet am mittels CSS am Aussehen, ohne wissen zu müssen, was für ein Inhalt letztendlich auf der Seite stehen wird. Programmierer – Er definiert mit PHP und SQL neue Funktionalitäten und bedient sich dabei eigener Hilfsmittel, wie Unified Modeling Language (UML). 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 15

HOMEPAGE – Einfach selber machen! Glossar Ajax (Asynchronous Java. Script and XML) – Bezeichnet ein Konzept der asynchronen Datenübertragung zwischen Server und Browser, mit dem es möglich ist HTTP-Anfragen durchzuführen, ohne Seiten neu laden zu müssen. CSS (Cascading-Style. Sheet) - Eine deklarative Stylesheet-Sprache für strukturierte Dokumente, die zusammen mit HTML und XML im Einsatz ist. HTML (Hypertext Markup Language) - Textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web. Long Tail – Theorie von Chris Anderson, nach der ein Anbieter im Internet durch eine große Anzahl an Nischenprodukten Gewinn machen kann. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 16

HOMEPAGE – Einfach selber machen! Glossar Mashups - Webinhalte verschiedener Dienste werden über offene Programmierschnittstellen nahtlos zu neuen Diensten verbunden. My. SQL - Ein relationales Datenbankverwaltungssystem. Es als Open-Source. Software für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für dynamische Webauftritte. PHP (Hypertext Preprocessor) - Ist eine Skriptsprache, die hauptsächlich zur Erstellung von dynamischen Webseiten oder Webanwendungen verwendet wird. PHP ist Open-Source-Software. Podcasting – Bezeichnet das Produzieren und Anbieten von Mediendateien (Hördatei/Audio oder Bewegtbilddatei/Video) über das Internet. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 17

HOMEPAGE – Einfach selber machen! Glossar RSS – Service auf Webseiten, der wie ein Nachrichtenticker funktioniert, der Überschriften, einen kurzen Textanriss und den Link zur Originalseite enthält. Saa. S (Software as a Service) – Distributions-Modell stellt Software als Dienstleistung basierend auf Webtechnologien bereit, inkl. Betreuung. Weblog/Blog - Ist ein auf einer Webseite geführtes und damit öffentlich einsehbares privates oder berufliches Tagebuch oder Journal. Wiki – Software und Sammlung von Webseiten, die von den Benutzern nicht nur gelesen, sondern meist auch direkt online geändert werden können. 10/2/2020 Dipl. -Math. oec. Kundler Wolfgang www. wallaby. de 18