HTML/CSS Workshop: Unterschied zwischen den Versionen

aus Metalab Wiki, dem offenen Zentrum für meta-disziplinäre Magier und technisch-kreative Enthusiasten.
Zur Navigation springenZur Suche springen
 
(46 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
== Liebe Metalabber und Interessierte von überall ==
 +
 +
Der Workshop wird in einer monatlichen Basis stattfinden.
 +
Es sind auch mit demm Thema verwandte Vorträge geplant.
 +
 +
 +
=== Requirements ===
 +
 +
Alles was du benötigst ist ein funktionierendes Laptop, egal ob Mac, Windows oder Linux.
 +
Nur wäre eine grafische Oberfläche von großem Vorteil (Das Ergebnis lässt sich schwer in Text-only Browsern beobachten.)
 +
 +
=== Zielgruppe: ===
 +
Die Zielgruppe sind für den Anfang größtenteils '''Anfänger''' und jenen die sich unter HTML/CSS gar nix vorstellen können. Generell bin ich aber für jeden, der etwas beitragen kann und will, dankbar. Allerdings ist Webentwicklung/Design ein Thema welches erst viel Vorwissen benötigt, jedoch werde ich versuchen dass wir so schnell wie möglich zum Editor kommen und unser erstes Konstrukt schreiben. :)
 +
 
{{Veranstaltung
 
{{Veranstaltung
 
|name=HTML/CSS Workshop - Get Web Skills!
 
|name=HTML/CSS Workshop - Get Web Skills!
−
|image=Metalab.gif
+
|image=Html5badge.jpg
−
|involved=[[User:Misan]]
+
|involved=[[User:Misan|Misan]]
−
|when=28.05.2013 19:00
+
|when= - zur Zeit beschäftigt, Termin kommt bald!
 
|category=Workshop
 
|category=Workshop
 
|status=active
 
|status=active
Zeile 10: Zeile 24:
  
  
 +
=== Ich bin dabei ===
 +
 +
Datum noch nicht freigegeben - bitte meldet euch dazu in der Mailing Liste.
 +
 +
== Vergangene Workshops ==
 +
 +
=== 1. Workshop - 28.Mai 2013 um 19:00 ===
 +
 +
<div style="border-left: 3px solid #444; margin-left: 1.5em; padding: 0 .5em; font-size: .8em;">
 
== Hallo liebe Metalabber und Interessierte! ==
 
== Hallo liebe Metalabber und Interessierte! ==
  
−
Ich würde sehr gerne einen Workshop für den ''28.Mai 2013 um 19:00'' ansetzen und vorbereiten. Allerdings bin ich mir noch nicht bewusst wie viele Interessenten es gibt, vorsichtshalber aber mal in die Bibliothek damit, es sei denn es finden sich weit aus mehr Interessenten, in dem Fall würde ich dann den Hauptraum beanspruchen. Diesen Workshop würde ich dann auch je nach Interesse und Beteiligung der Teilnehmer regelmäßig stattfinden lassen. Die Zielgruppe sind für den Anfang größtenteils Anfänger, generell bin ich aber für jeden der etwas beitragen kann und will dankbar. Ich weiß nicht wie viele der Themenpunkte an diesem ersten Workshop abgearbeitet werden können.
+
Der Workshop wurde im Nachhinein auf den Hauptraum verlegt weil doch großes Interesse bestand.
 +
 
 +
 
 +
Lösung für den letzten Workshop:
 +
 
 +
After und Before Pseudo Selektoren müssen laut Spezifikation content festgelegt haben.
 +
Auch wenn der content auf leer (also '' ) gesetzt wird, ist es notwendig.
 +
 
 +
    .group:after
 +
    {
 +
        content: ''''''';
 +
        clear: both;
 +
    }
 +
 
 +
 
 +
 
 +
=== Themenpunkte ===
 +
 
 +
Teil 1
 +
==== Einleitung ====
 +
'''Dauer:''' 15 Minuten
 +
 
 +
'''Beginn'''
 +
* Über mich
 +
** Wer bin ich und was mach ich - kurze Vorstellung
 +
* Worüber ist der Workshop, was wollen wir erreichen in diesem Workshop
  
−
Ich plane jedoch auch Fragen und Diskussionen und Hinweise ein dass ich versuche nicht zu viel an einem Tag anzugehen. Allerdings ist Webentwicklung/Design ein Thema welches erst viel Vorwissen benötigt, jedoch werde ich weiters versuchen dass wir so schnell wie möglich zum Editor kommen und unser erstes Konstrukt schreiben :)
+
'''Verwendungszweck und Hinweise'''
 +
* Dinge die beachtet werden müssen
 +
** Browserkompatibilität
 +
** Was man mit HTML und CSS alleine erreichen kann (ohne PHP also)
 +
** Layouts und Templates die im späteren Verlauf von CMS verwendet werden können
 +
** In vorhandener Software verwenden (wie Forensoftware oder andere Anwendungen die eine Ordnerstruktur vorgeben)
  
−
== Themenpunkte ==
+
==== Theorie - HTML und CSS ====
−
=== Einleitung - etwa 45 Minuten ===
 
  
−
* Geschichte und Stand der heutigen Definition HTML5 &amp; CSS3
+
'''Dauer:''' 30 Minuten
−
* HTML ist keine Programmiersprache sondern eine "Markup" Sprache ähnlich wie SVG/SGML/XML etc
+
 
−
* Herkömmliche Methoden (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos &amp; Don'ts)
+
'''HTML'''
−
* Natürlich im späteren Verlauf auch die modernen Methoden und Approaches
+
* Geschichte und Stand der heutigen Definition <abbr title="Hyper Text Markup Language">HTML5</abbr> &amp; <abbr title="Cascading Style Sheets">CSS3</abbr>
−
* HTML und CSS zu trennen bedeutet Trennung von Struktur und Aussehen.
+
* HTML ist keine Programmiersprache sondern eine "Markup" Sprache ähnlich wie <abbr title="Scalable Vector Graphics">SVG</abbr>/<abbr title="Standard Generalized Markup Language">SGML</abbr>/<abbr title="eXtensible Markup Language">-XML</abbr> etc
 +
* Herkömmliche Methoden  
 +
** Wie hat man früher gewerkt
 +
** (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos &amp; Don'ts)
 +
** Natürlich im späteren Verlauf auch die modernen Methoden und Approaches
 +
** Wir haben aus der Vergangenheit gelernt:
 +
*** HTML und CSS zu trennen bedeutet: Trennung von Struktur und Aussehen.
 +
* DOM - Document Object Model
 +
 
 +
'''CSS'''
 +
* CSS Regeln anlegen
 +
* Kleine Einleitung in die Bedeutung der wichtigsten HTML Elemente
 +
* CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen.
 +
* <abbr title="World Wide Web Consortium">W3C</abbr> Boxmodell (Margin, Outline, Border, Padding, Content)
 +
* Was sind Klassen, wie werden sie verwendet und was sind Selektoren
 +
 
 +
=== Einrichten des Arbeitsplatzes und wählen eines Editors  ===
 +
'''Dauer:''' etwa 20 Minuten
 +
 
 +
* Einrichten eines Arbeitsplatzes
 
* Wahl der Tools und Editor
 
* Wahl der Tools und Editor
 
** Was für und gegen Klickibunti Programme wie Adobe Dreamweaver spricht
 
** Was für und gegen Klickibunti Programme wie Adobe Dreamweaver spricht
Zeile 31: Zeile 102:
 
*** Emmet
 
*** Emmet
 
*** LiveReload
 
*** LiveReload
−
** WebKick - Marke Eigenbau - WebTemplate Kickstarter.
+
*** WebKick - Marke Eigenbau - WebTemplate Kickstarter.
−
* Dinge die beachtet werden müssen
+
 
−
** Browserkompatibilität
+
* Fragen bis hierher klären und Hinweise aufklären.
−
** Was man mit HTML und CSS alleine erreichen kann (ohne PHP also)
+
* 5~10 Minuten Pause und Vorbereitung für den nächsten Teil
−
** Layouts und Templates die im späteren Verlauf von CMS verwendet werden können
 
−
** In vorhandener Software verwenden (wie Forensoftware oder andere Anwendungen die eine Ordnerstruktur vorgeben)
 
  
−
=== Erklärung und Bedeutungen - etwa 45 Minuten ===
 
  
−
* Kleine Einleitung in die Bedeutung der wichtigsten HTML Elemente
+
----
−
* CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen.
 
−
* W3C Boxmodell (Margin, Outline, Border, Padding, Content)
 
  
 +
Teil 2
 
=== Aufbau eines ersten Layouts - Open End ===
 
=== Aufbau eines ersten Layouts - Open End ===
  
Zeile 49: Zeile 116:
 
** Kopfbereich (Header)
 
** Kopfbereich (Header)
 
** Inhalt
 
** Inhalt
−
** Fußberich (Footer)
+
** Fußbereich (Footer)
−
* Aufbau der Seite mit Unterstützung zusammen mit CSS.
+
* Aufbau der Seite zusammen mit CSS.
 
* Eigene Ideen umsetzen.
 
* Eigene Ideen umsetzen.
  
 
Bei Vorschlägen für den Aufbau des Workshops meldet euch bitte einfach :)
 
Bei Vorschlägen für den Aufbau des Workshops meldet euch bitte einfach :)
 +
</div>
  
−
=== Tools &amp; Quellen ===
+
== Tools &amp; Quellen ==
 +
 
 +
Eine Liste aller gängigen und '''zuverlässigen''' Quellen und Tools. (Bitte NICHT auf w3schools[http://w3fools.com/] verweisen)
 +
Für weitere Vorschläge bin ich stets offen.
 +
 
 +
WebKick - Ein Boilerplate/WebTemplate Kickstarter der sich alle nützlichen Tools die hier aufgelistet sind zu Nutze macht. Liefert auch eine Ordnerstruktur für das Anlegen und Einbinden von CSS/Bildern/Javascript und Bildern mit. Zusätzlich sind ein paar Hilfsklassen vorhanden (clear oder clearfix aka .group) Erschaffen von mir :)
  
−
Eine Liste aller gängigen und zuverlässigen Qüllen sowie Tools WebKick - Ein Boilerplate/WebTemplate Kickstarter der sich alle nützlichen Tools die hier aufgelistet sind zu Nutze macht. Liefert auch eine Ordnerstruktur für das Anlegen und Einbinden von CSS/Bildern/Javascript und Bildern mit. Zusätzlich sind ein paar Hilfsklassen vorhanden (clear oder clearfix aka .group) Erschaffen von mir :)
 
 
https://github.com/MartinMuzatko/WebKick  
 
https://github.com/MartinMuzatko/WebKick  
  
Zeile 109: Zeile 181:
 
http://www.google.com/fonts  
 
http://www.google.com/fonts  
  
−
http://www.fontsquirrel.com/ Contrast Ratio Checker:  
+
http://www.fontsquirrel.com/  
 +
 
 +
Icon Fonts!
 +
http://weloveiconfonts.com/
 +
 
 +
 
 +
Contrast Ratio Checker:  
  
 
http://leaverou.github.io/contrast-ratio/#%23FFF-on-%230072  
 
http://leaverou.github.io/contrast-ratio/#%23FFF-on-%230072  
Zeile 123: Zeile 201:
  
 
http://subtlepatterns.com/  
 
http://subtlepatterns.com/  
 +
  
 
Codesniffer: Ist dein HTML valide?  
 
Codesniffer: Ist dein HTML valide?  
Zeile 136: Zeile 215:
 
http://codepen.io/  
 
http://codepen.io/  
  
−
http://jsfiddle.net/ Liebe Grüße Martin "Misan" Muzatko
+
http://jsfiddle.net/
 +
 
 +
 
 +
Fällt dir die Wahl für einen Editor schwer?
 +
Man braucht kein Dreamweaver oder PHPDesigner um professionelle Seiten erstellen zu können.
 +
Editoren wie http://sublimetext.com oder Notepad++ sind lightweight und können sehr gut erweitert und konfiguriert werden!
 +
 
 +
== Abschließende Worte ==
 +
 
 +
Ich versuche im groben und ganzen euch Webentwicklung&Design ein wenig näher zu bringen :)
 +
 
 +
Liebe Grüße Martin "Misan" Muzatko
  
 
[[Kategorie:Workshops]]
 
[[Kategorie:Workshops]]

Aktuelle Version vom 2. Juli 2013, 07:09 Uhr

Liebe Metalabber und Interessierte von überall

Der Workshop wird in einer monatlichen Basis stattfinden. Es sind auch mit demm Thema verwandte Vorträge geplant.


Requirements

Alles was du benötigst ist ein funktionierendes Laptop, egal ob Mac, Windows oder Linux. Nur wäre eine grafische Oberfläche von großem Vorteil (Das Ergebnis lässt sich schwer in Text-only Browsern beobachten.)

Zielgruppe:

Die Zielgruppe sind für den Anfang größtenteils Anfänger und jenen die sich unter HTML/CSS gar nix vorstellen können. Generell bin ich aber für jeden, der etwas beitragen kann und will, dankbar. Allerdings ist Webentwicklung/Design ein Thema welches erst viel Vorwissen benötigt, jedoch werde ich versuchen dass wir so schnell wie möglich zum Editor kommen und unser erstes Konstrukt schreiben. :)


HTML/CSS Workshop - Get Web Skills!
Html5badge.jpg
- zur Zeit beschäftigt, Termin kommt bald!
Misan
Workshop
active
Workshop für Einsteiger und Jene die Webentwicklung/Design kennen lernen wollen
Zuletzt aktualisiert: 02.07.2013


Ich bin dabei

Datum noch nicht freigegeben - bitte meldet euch dazu in der Mailing Liste.

Vergangene Workshops

1. Workshop - 28.Mai 2013 um 19:00

Hallo liebe Metalabber und Interessierte!

Der Workshop wurde im Nachhinein auf den Hauptraum verlegt weil doch großes Interesse bestand.


Lösung für den letzten Workshop:

After und Before Pseudo Selektoren müssen laut Spezifikation content festgelegt haben. Auch wenn der content auf leer (also ) gesetzt wird, ist es notwendig. 

   .group:after
   {
       content: '';
       clear: both;
   }


Themenpunkte

Teil 1

Einleitung

Dauer: 15 Minuten

Beginn

  • Über mich
    • Wer bin ich und was mach ich - kurze Vorstellung
  • Worüber ist der Workshop, was wollen wir erreichen in diesem Workshop

Verwendungszweck und Hinweise

  • Dinge die beachtet werden müssen
    • Browserkompatibilität
    • Was man mit HTML und CSS alleine erreichen kann (ohne PHP also)
    • Layouts und Templates die im späteren Verlauf von CMS verwendet werden können
    • In vorhandener Software verwenden (wie Forensoftware oder andere Anwendungen die eine Ordnerstruktur vorgeben)

Theorie - HTML und CSS

Dauer: 30 Minuten

HTML

  • Geschichte und Stand der heutigen Definition HTML5 & CSS3
  • HTML ist keine Programmiersprache sondern eine "Markup" Sprache ähnlich wie SVG/SGML/-XML etc
  • Herkömmliche Methoden
    • Wie hat man früher gewerkt
    • (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos & Don'ts)
    • Natürlich im späteren Verlauf auch die modernen Methoden und Approaches
    • Wir haben aus der Vergangenheit gelernt:
      • HTML und CSS zu trennen bedeutet: Trennung von Struktur und Aussehen.
  • DOM - Document Object Model

CSS

  • CSS Regeln anlegen
  • Kleine Einleitung in die Bedeutung der wichtigsten HTML Elemente
  • CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen.
  • W3C Boxmodell (Margin, Outline, Border, Padding, Content)
  • Was sind Klassen, wie werden sie verwendet und was sind Selektoren

Einrichten des Arbeitsplatzes und wählen eines Editors

Dauer: etwa 20 Minuten

  • Einrichten eines Arbeitsplatzes
  • Wahl der Tools und Editor
    • Was für und gegen Klickibunti Programme wie Adobe Dreamweaver spricht
    • Was für und gegen Plain Text (Autocomplete Syntaxhighlight) spricht
    • Cross Platform - Open Source Editoren
    • Tools die das Leben erleichtern:
      • Emmet
      • LiveReload
      • WebKick - Marke Eigenbau - WebTemplate Kickstarter.
  • Fragen bis hierher klären und Hinweise aufklären.
  • 5~10 Minuten Pause und Vorbereitung für den nächsten Teil


Teil 2

Aufbau eines ersten Layouts - Open End

  • Erklärung der typischen Bereiche einer Seite
    • Kopfbereich (Header)
    • Inhalt
    • Fußbereich (Footer)
  • Aufbau der Seite zusammen mit CSS.
  • Eigene Ideen umsetzen.

Bei Vorschlägen für den Aufbau des Workshops meldet euch bitte einfach :)

Tools & Quellen

Eine Liste aller gängigen und zuverlässigen Quellen und Tools. (Bitte NICHT auf w3schools[1] verweisen) Für weitere Vorschläge bin ich stets offen.

WebKick - Ein Boilerplate/WebTemplate Kickstarter der sich alle nützlichen Tools die hier aufgelistet sind zu Nutze macht. Liefert auch eine Ordnerstruktur für das Anlegen und Einbinden von CSS/Bildern/Javascript und Bildern mit. Zusätzlich sind ein paar Hilfsklassen vorhanden (clear oder clearfix aka .group) Erschaffen von mir :)

https://github.com/MartinMuzatko/WebKick

Browser Kompatibilitäts Nachschlagewerk:

http://caniuse.com/

Browser Kompatiblitäts Hilfen: Keine Vendor Prefixes mehr (-moz-, -o-, -ms-, -webkit-)

http://leaverou.github.com/prefixfree/

Anlaufstelle für CSS Fragen und CSS Selektor&Attribut Index

https://css-tricks.com/

https://css-tricks.com/almanac

Anlaufstelle für HTML und Semantik sowie WAI ARIA & Barrierefreiheit sowie Element Index

http://html5doctor.com/

HTML/CSS/PHP Tutorials

http://www.peterkropff.de PHP Basics:

http://tut.php-quake.net/de/

CSS Struktur und erkennen der verschiedenen Rulesets:

http://smacss.com/book/

HTML Abbreviations: HTML bis zu 15x Schneller schreiben

http://emmet.io/

Ist mehr ein gigantisches Snippet Toolset, verwendbar in allen gängigen und wichtigen Editoren

Regelmäßige News über Frameworks, Toolsets, Wege und Möglichkeiten Dinge zu lösen, Usability, Performance etc:

http://www.smashingmagazine.com/

http://www.webappers.com/

http://paulirish.com/

Typography: Webfonts, größtenteils Open Source und Free for Commercial use.

http://www.google.com/fonts

http://www.fontsquirrel.com/

Icon Fonts! http://weloveiconfonts.com/


Contrast Ratio Checker:

http://leaverou.github.io/contrast-ratio/#%23FFF-on-%230072

Automatisches Refreshen von geschriebenem Code (Dadurch erübrigt sich sowas wie einer dieser klickibunti Editoren) Erfordert einen Webserver (localhost oder online)

http://livereload.com/

Freie Bild und Farben Ressourcen Kein Gefühl für Farben und Patterns?

http://colourlovers.com/

http://subtlepatterns.com/


Codesniffer: Ist dein HTML valide?

http://squizlabs.github.io/HTML_CodeSniffer/

CSS Validator (eine 100 Prozentige Validierung zu erreichen ist nicht immer konstruktiv!)

http://jigsaw.w3.org/css-validator/

HTML/CSS/JS Pastebin und Online Ausprobier Tools:

http://codepen.io/

http://jsfiddle.net/


Fällt dir die Wahl für einen Editor schwer? Man braucht kein Dreamweaver oder PHPDesigner um professionelle Seiten erstellen zu können. Editoren wie http://sublimetext.com oder Notepad++ sind lightweight und können sehr gut erweitert und konfiguriert werden!

Abschließende Worte

Ich versuche im groben und ganzen euch Webentwicklung&Design ein wenig näher zu bringen :)

Liebe Grüße Martin "Misan" Muzatko

Abgerufen von „https://metalab.at/wiki/index.php?title=HTML/CSS_Workshop&oldid=50837“