HTML/CSS Workshop: Unterschied zwischen den Versionen

(33 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)

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

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

|image=~~Metalab~~.~~gif~~

|image=Html5badge.jpg

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

|when=~~28.05.2013 19:00~~

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

|category=Workshop

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

== Hallo liebe Metalabber und Interessierte! ==

~~Ich würde sehr gerne einen~~ Workshop ~~für~~ den ~~'''28.Mai 2013 um 19:00''' ansetzen und vorbereiten~~.

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

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

Lösung für den letzten Workshop:

~~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, damit ich nicht zu viel an einem Tag anzugehen versuche~~.

After und Before Pseudo Selektoren müssen laut Spezifikation content festgelegt haben.

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

Auch wenn der content auf leer (also '' ) gesetzt wird, ist es notwendig.

.group:after

{

content: ''''''';

clear: both;

}

~~=== Eckdaten ===~~

~~'''Zielgruppe:''' Interessierte, Anfänger, Leute die ihre Wissenslücken füllen wollen~~

~~'''Ort:''' Bibliothek~~

=== Themenpunkte ===

'''~~Zeit~~:''' ~~28.5.2013 19:00 (nach dem Java Meetup)~~

Teil 1

==== Einleitung ====

'''Dauer:''' 15 Minuten

'''~~Dauer:~~''' ~~Bis zu 2~3 Stunden~~, ~~generell aber open end.~~

'''Beginn'''

* Über mich

** Wer bin ich und was mach ich - kurze Vorstellung

* Worüber ist der Workshop, was wollen wir erreichen in diesem Workshop

~~== Teilnehmer ==~~

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

*[[User:Misan|Misan]]

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

* Min

* [[User:Vierlex|vierlex]]

* ?

~~== Themenpunkte ==~~

'''Dauer:''' 30 Minuten

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

'''HTML'''

* Geschichte und Stand der heutigen Definition <abbr title="Hyper Text Markup Language">HTML5</abbr> & <abbr title="Cascading Style Sheets">CSS3</abbr>

* 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

* 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 (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos & Don'ts)

* Herkömmliche Methoden

* Natürlich im späteren Verlauf auch die modernen Methoden und Approaches

** Wie hat man früher gewerkt

* HTML und CSS zu trennen bedeutet Trennung von Struktur und Aussehen.

** (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 56:

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.

* <abbr title="World Wide Web Consortium">W3C</abbr> Boxmodell (Margin, Outline, Border, Padding, Content)

Teil 2

=== Aufbau eines ersten Layouts - Open End ===

Zeile 75:

Zeile 117:

** Inhalt

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

Zeile 138:

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 152:

Zeile 201:

http://subtlepatterns.com/

Codesniffer: Ist dein HTML valide?

Zeile 166:

Zeile 216:

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