HTML/CSS Workshop: Unterschied zwischen den Versionen

(51 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)

Zeile 1:

==~~= Eckdaten =~~==

== Liebe Metalabber und Interessierte von überall ==

~~<span>Datum:</span> 28~~.~~Mai~~.~~2013 <span>Uhrzeit:</span> 19:00 <span>Zielgruppe:</span> Anfänger <span>Ort:</span> Bibliothek~~

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

|name=HTML/CSS Workshop - Get Web Skills!

|image=Html5badge.jpg

|involved=[[User:Misan|Misan]]

|when= - zur Zeit beschäftigt, Termin kommt bald!

|category=Workshop

|status=active

|wtf=Workshop für Einsteiger und Jene die Webentwicklung/Design kennen lernen wollen

}}

=== 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! ==

~~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. 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 :)~~

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

~~== Themenpunkte ==~~

'''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)

=== ~~Einleitung~~ - ~~etwa 45 Minuten~~ ===

==== Theorie - HTML und CSS ====

* Geschichte und Stand der heutigen Definition HTML5 & 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 & 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> & <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 & 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

** Was für und gegen Klickibunti Programme wie Adobe Dreamweaver spricht

Zeile 23:

Zeile 102:

*** Emmet

*** 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 ===

Zeile 41:

Zeile 116:

** Kopfbereich (Header)

** 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.

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

</div>

=== Tools & Quellen ===

== Tools & 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

Zeile 101:

Zeile 181:

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

Zeile 115:

Zeile 201:

http://subtlepatterns.com/

Codesniffer: Ist dein HTML valide?

Zeile 128:

Zeile 215:

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]]