Zum Inhalt springen

HTML/CSS Workshop: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
VisuellWikitext
Misan (Diskussion | Beiträge)
103 Bearbeitungen
Keine Bearbeitungszusammenfassung
Misan (Diskussion | Beiträge)
103 Bearbeitungen
 
(54 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Head_en}}
== 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. :)


Use like this:
<pre>
{{Veranstaltung
{{Veranstaltung
|name=HTML/CSS Workshop
|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|Vortrag
|category=Workshop
|status=active
|status=active
|wtf=so much stuff is happening!
|wtf=Workshop für Einsteiger und Jene die Webentwicklung/Design kennen lernen wollen
}}
}}
</pre>


<!-- todo: if (category = Usergroups | Party) hide the template! -->


*Mein Workshop?
=== 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.
 
 
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 <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
* 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
** 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 :)
</div>
 
== 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 :)
 
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&amp;Attribut Index
 
https://css-tricks.com/
 
https://css-tricks.com/almanac
 
Anlaufstelle für HTML und Semantik sowie WAI ARIA &amp; 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


[[Kategorie:Workshops]]
[[Kategorie:Workshops]]
Abgerufen von „https://metalab.at/alpakaparty/HTML/CSS_Workshop“