Zum Inhalt springen

HTML/CSS Workshop: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
VisuellWikitext
Misan (Diskussion | Beiträge)
103 Bearbeitungen
Misan (Diskussion | Beiträge)
103 Bearbeitungen
 
(15 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
== Hallo liebe Metalabber und Interessierte! ==
== Liebe Metalabber und Interessierte von überall ==


Ich würde sehr gerne einen Workshop für den  '''28.Mai 2013 um 19:00'''  ansetzen und vorbereiten.  
Der Workshop wird in einer monatlichen Basis stattfinden.
Es sind auch mit demm Thema verwandte Vorträge geplant.


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.
=== Requirements ===
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.
Alles was du benötigst ist ein funktionierendes Laptop, egal ob Mac, Windows oder Linux.
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 :)
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
Zeile 16: Zeile 17:
|image=Html5badge.jpg
|image=Html5badge.jpg
|involved=[[User:Misan|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 22: Zeile 23:
}}
}}


=== Eckdaten ===


'''Zielgruppe:''' Interessierte, Anfänger, Leute die ihre Wissenslücken füllen 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 ===
 
<div style="border-left: 3px solid #444; margin-left: 1.5em; padding: 0 .5em; font-size: .8em;">
== Hallo liebe Metalabber und Interessierte! ==
 
Der Workshop wurde im Nachhinein auf den Hauptraum verlegt weil doch großes Interesse bestand.


'''Ort:''' Bibliothek


'''Zeit:''' 28.5.2013 19:00 (nach dem Java Meetup)
Lösung für den letzten Workshop:


'''Dauer:''' Bis zu 2~3 Stunden, generell aber open end.
After und Before Pseudo Selektoren müssen laut Spezifikation content festgelegt haben.
Auch wenn der content auf leer (also '' ) gesetzt wird, ist es notwendig.


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


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


== Teilnehmer ==


*[[User:Misan|Misan]]
=== Themenpunkte ===
* Min
* [[User:Vierlex|vierlex]]
* [[User:Scenor|scenor]]
* weirdrat
* RXC
* du?


== Themenpunkte ==
Teil 1
=== Einleitung - etwa 15 Minuten ===
==== Einleitung ====
'''Dauer:''' 15 Minuten


'''Beginn'''
'''Beginn'''
Zeile 62: Zeile 69:
** In vorhandener Software verwenden (wie Forensoftware oder andere Anwendungen die eine Ordnerstruktur vorgeben)
** In vorhandener Software verwenden (wie Forensoftware oder andere Anwendungen die eine Ordnerstruktur vorgeben)


=== Theorie - HTML und CSS ===
==== Theorie - HTML und CSS ====
 
'''Dauer:''' 30 Minuten
'''Dauer:''' 30 Minuten


'''HTML'''
* Geschichte und Stand der heutigen Definition <abbr title="Hyper Text Markup Language">HTML5</abbr> &amp; <abbr title="Cascading Style Sheets">CSS3</abbr>
* Geschichte und Stand der heutigen Definition <abbr title="Hyper Text Markup Language">HTML5</abbr> &amp; <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
 
'''HTML'''
* Herkömmliche Methoden  
* Herkömmliche Methoden  
** Wie hat man früher gewerkt
** Wie hat man früher gewerkt
Zeile 82: Zeile 89:
* CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen.
* 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)
* <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 - etwa 30 Minuten ===
=== 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.


* Arbeitsplatz einrichten - Editor wählen (empfehle Sublime Text 2 - Cross Platform)
* Fragen bis hierher klären und Hinweise aufklären.
* Fragen bis hierher klären und Hinweise aufklären.
* 5~10 Minuten Pause und Vorbereitung für den nächsten Teil
* 5~10 Minuten Pause und Vorbereitung für den nächsten Teil


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


Zeile 99: Zeile 121:


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 ==
Zeile 158: 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 172: Zeile 201:


http://subtlepatterns.com/  
http://subtlepatterns.com/  


Codesniffer: Ist dein HTML valide?  
Codesniffer: Ist dein HTML valide?  
Zeile 186: Zeile 216:


http://jsfiddle.net/
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 ==
== Abschließende Worte ==
Abgerufen von „https://metalab.at/alpakaparty/HTML/CSS_Workshop“