Typographie

Grundlagenwissen zur Typographie:

Grundlagen

Übersicht diverser Corporate- Logo- Schriften:

https://99designs.de/blog/logo-und-branding/logoschriften/

Psychologische Wirkung typographischer Beispiele:

https://99designs.de/blog/design-kreativitaet/typografie-wirkung/

Typographie- Logo- Beispiele:

https://www.pinterest.de/iammariya/typography-logo/

Aktuelle Trends im Logo-, Typo- Design (Page):

https://page-online.de/kreation/logo-design-10-aktuelle-trends-die-ueberzeugen/

Eine kurze Einführung zu Typologie mit Beispielen:

http://lankau.de/gw_hso/pdf/03a_typographie001.pdf

Webhosting

Unter Webhosting versteht man die Bereitstellung von Webspace sowie die Unterbringung (Hosting) von Websites auf dem Webserver eines Internet Service Providers (ISP).

Es bestehen verschiedene Webhosting Möglichkeiten!

Artikel hierzu bei Wikipedia:

https://de.wikipedia.org/wiki/Webhosting#Dedicated_Hosting

Bei der Einrichtung einer Webhosting Umgebung, bzw.  bei der Bestellung eines Hosting Pakets sind verschiedene Features zu bedenken:

Soll ein CMS installiert werden?
Wieviele Datenbanken sind nötig?
Wieviel Webspace ist angebracht?
Sind mehrere ftp Zugänge vorgesehen?
Sollen Video Dateien auf dem eigenen Server laufen (streaming Lösung) oder über einen Dienst wie youtube / vimeo?
Ist https und ssl ohne Mehrkosten möglich?
Sind die jeweiligen Software Versionen auf dem neuesten Stand?
Welche Systeme sind vorinstalliert?

Webentwicklung + Webdesign : Trends

Was ist los da draussen? Was ist state of the art?

Hier finden sich ein Überblick aktueller Trends im Webdesign und der Webentwicklung:

Allgemeine Überlegungen zu Trends in der Web- Entwicklung:

Aktuelle Webdesign-Trends im Überblick

Trends 2018

https://t3n.de/news/webdesign-trends-2018-885197/

Trends 2017

https://t3n.de/news/webdesign-trends-2017-763609/

https://blog.netpress.de/webdesign-trends-2017-die-top-5

Trends 2016

https://t3n.de/news/6-webdesign-trends-fuer-2016-702646/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

Webworker Umfrage
http://webkrauts.de/artikel/2014/jetzt-wissen-wir-es

Beliebteste CMS 2014:
http://webkrauts.de/artikel/2014/welches-cms-ist-das-beste

IT Trends

https://de.statista.com/statistik/daten/studie/675726/umfrage/die-wichtigsten-trends-in-der-itk-branche/

Website Typen

  1. private „klassische Homepage“, statisch.
  2. Hierarchische Menüstruktur- Site (1-2 Ebenen), zB. für Handwerker, kleine Firmen und Vereine (Begriffsmengen mit Untermengen definieren Menüstruktur). Statisch als pures html + css (+ js + php) oder dynamisch über ein CMS {Systeme WordPress, Joomla, typo3, contao, drupal, processwire, plume… }
    Überblick zu CM Systemen:
    http://webkrauts.de/artikel/2014/welches-cms-ist-das-beste
  3. Blog, chronologisch, mit (automatisch generiertem) Archiv und oder Kategorien, oft dynamisch verlinkt (Tags, Tagcloud). {System WordPress}
  4. Mischformen aus 2. und 3. , realisierbar z.B. mit WordPress.
  5. große Firmensites mit bis zu 5 oder 6 Hierarchie- Ebenen(zB (S,M-)Dax Konzerne, Banken) mit Web und Intranet {ERP Systeme }
  6. Shops {System Magento}. Große, multinationale Shopsysteme oft Cloud- verbund (amazon). Übersicht von open source Shopsysteme bei t3n.
  7. Foren, Beispiel Heise Forum zu Telepolis  {System zum Beispiel: phpbb}
  8. Lernsysteme {zum Beispiel System Moodle}
  9. Wikis, lexikalisches System mit Indexstruktur (Enzyklopädie, Wörterbuch, Thesaurus) {zum Beispiel: System wiki}
  10. Open source Softwareportale (github)
  11. Funktionale Sites mit Programmfunktionen, zum Beispiel https://www.geogebra.org/graphing {HTML5 mit Scripten}
  12. Gaming sites (http://www.miniclip.com/games)
  13. Videoportale
  14. Auktions Shops (ebay und Co.)
  15. Soziale Netze
  16. Cluster- und Cloudsysteme wie amazon, dropbox, MS Office und Techniken aus 9. – 15.
  17. Suchmaschinen (bots) zum Beispiel: metager, duckduckgo, google, yahoo, baidu (China), rambler (Rußland). Google Alternativen werden hier gelistet:
    http://t3n.de/news/google-alternative-474551/

Exkurs: Symbolisch aufgebaute (storyline-) Navigation / Websites

Wir hatten im Unterricht noch Beispiele symbolisch aufgebauter (storyline-) Sites angesprochen, die im Zeitalter ausgefeilter Frameworks seltener werden.
Diese Sites erfüllen weniger den Anspruch schnell und leicht  erreichbarer, nackter Information, sie bauen  eher auf den Erlebnisfaktor. Hier 2 Artikel zum Thema:
http://t3n.de/news/navigation-inspiration-fuer-webdesigner-681870/

geschickter Einsatz von Parallex Scrolling Sites:

http://t3n.de/news/parallax-scrolling-beispiele-423046/

Beispiele symbolisch aufgebauter Websites:

http://benthebodyguard.com/index.php

http://ala.ch/

http://www.cantilever-chippy.co.uk/

http://beloesuhoe.com/

http://daysinaday.com/ (läuft nur mit Flash)


http://gorillaz.com/


http://creativecruise.nl/

Weitere Beispiele auf awwwards:

https://www.awwwards.com/websites/unusual-navigation/

 

 

Website Planung , Website Struktur, usability

Eine Übersicht zur Planung kleinerer Website Projekte finden Sie hier:

http://de.wikihow.com/Eine-Webseite-planen

Desweiteren empfehlenswert das selfhtml wiki zur Website Planung:
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Webprojekte/planen

Einen professionellen Überblick für Website Planungsmethoden (englisch):
https://www.usability.gov/how-to-and-tools/methods/index.html

hier besonders empfehlenswert:

https://www.usability.gov/how-to-and-tools/methods/develop-plan.html

https://www.usability.gov/how-to-and-tools/methods/organization-schemes.html

https://www.usability.gov/how-to-and-tools/methods/organization-structures.html

EU-Datenschutz-Grundverordnung EU-DSGVO

Am 25. Mai 2018 wird die EU-Datenschutz-Grundverordnung EU-DSGVO anwendbar, ab diesem Zeitpunkt ist die am 25. Mai 2016 mit einer Übergangsfrist von zwei Jahren in Kraft getretene Verordnung bindend.

Anbei einige Links zum Thema.

DSGVO – Gesetzestext bei intersoft consulting

Bundesministerium für Justiz und Verbraucherschutz bmjv, Beispiel für einen Datenschutzhinweis und weitere Seiten

FAQ des Branchenverbandes bitkom (als PDF-Download)

Fachbeiträge unter datenschutzbeauftragter-info.de

Datenschutzerklärungs-Generator (sehr ausführlicher Ergebnis)

ftp mit filezilla

Ftp Grundlagen: https://wiki.selfhtml.org/wiki/Grundlagen/File_Transfer_Protocol_%28FTP%29

Beachten Sie, dass wir im Kurs filezilla als Client nutzen, nicht als ftp-Server!

Filezilla nur von der Originalsite herunterladen:
https://filezilla-project.org/
Beschreibung (engl.): https://wiki.filezilla-project.org/Using
Beschreibung (dt.): https://wiki.filezilla-project.org/FileZilla_Client_Tutorial_%28de%29

Editoren (Open source)

Empfehlenswert:

notepad++ , geany oder brackets (für Mac)

Als Web gestützter Editor ist codepen genial. Hier findet Sich auch tonnenweise Code von Web- Projekten:

CodePen is a social development environment for front-end designers and developers.

Wenn Sie mit notepad++ oder einem ähnlichen Editor arbeiten bitte darauf achten, dass Ihre Webdateien (.html  / .css /  .php) in der Kodierung utf-8  gespeichert sind.

Causa Dreamweaver vs Open source Editoren

Eine Einführung in das Handling von Dreamweaver CS 6 finden Sie hier.
Ich rate Ihnen nicht die Dreamweaver Vorlagen von CS6 zu nutzen (die von CC sind ok und auf neuem Stand), besser ein HTML- Framework für Dreamweaver übernehmen, wie wir das im Kurs machen. Ebenfalls kann ich die Dreamweaver Templates nicht empfehlen, da sie nur mit und innerhalb von Dreamweaver funktionieren. Besser sind Codebausteine die auf allen Seiten über php include (zB für Header, Menü und Footer) eingefügt werden.

Ansonsten ist Dreamweaver CS6 oder CC durchaus ein sehr praktischer HTML / CSS Editor mit hervorragender Code Vervollständigung.

Wer sparen will nimmt notepad++ , geany oder brackets (für Mac) und wird damit ebenfalls glücklich. Hier wäre dann immer die Kombi mit Firefox + Firebug oder Chrome + Entwicklertools zu empfehlen.

svg Grafiken

Nutzen Sie für Logos und Signets wenn möglich svg Grafiken. Die lassen sich beliebig skalieren und sind „schlank“. Lässt sich in Illustrator ab CS6 und inkscape leicht erstellen.

Nähere Infos für svg:

https://wiki.selfhtml.org/wiki/SVG/Einbindung

Legen Sie den svg Code am besten extern auf den Server und rufen Sie die src über <img> auf.

Sehr praktisch: svg geht auch als background-image:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-image

Wenn Sie die Ansicht im Browser mit STRG + + vergrößern, sehen Sie, dass eine svg Grafik gestochen scharf bleibt (nicht vergessen mit STRG + 0 die Browser Ansicht wieder auf Normal zu stellen 🙂 ) :

svg Logo, uups Sie sind nicht im Web       svg Logo

30 Awesome SVG Animation For Your Inspiration (hongkiat)

HTML5 Bones , SEO

Am 26.06.2017 haben wir uns die Suchmaschinenoptimierung (SEO) genauer angeschaut. Siehe hier .

Desweiteren haben wir das html5 Bones Framework hochgeladen ( mein_tagebuch01) und in der css/style.css header und footer mit Trennlinie versehen und main / aside gefloatet. Gecleart wurde über overflow:hidden in .wrap .
Siehe hier: http://84.200.44.236/user08/

Mailto Adress, Formularschutz und Mail Harvester

diverse Methoden (alle nur eingeschränkt zuverlässig) :

https://hosting.1und1.de/digitalguide/e-mail/e-mail-sicherheit/e-mail-adresse-schuetzen-so-wirds-gemacht/

effektiv: HTML-E-Mail-Verweis per Redirect

<p>Bei Fragen und Anregungen schreiben Sie uns eine 
<a href="redirect-mailto.php">E-Mail</a>.
</p>

Der Inhalt der Datei redirect-mailto.php leitet den mailto-Verweis per Redirect um:

<?php
header("Location: mailto:name@domain.de"); 
?>

Desweiteren sehr effektiv bei Formularen: Google reCaptcha
https://www.google.com/recaptcha/intro/index.html

Artikel zu Harvestern:

https://www.antispam-ev.de/wiki/Harvester