HTML/CSS Workshop: Unterschied zwischen den Versionen
Misan (Diskussion | Beiträge) |
Misan (Diskussion | Beiträge) |
||
Zeile 11: | Zeile 11: | ||
<div style="min-width: 400px;"> | <div style="min-width: 400px;"> | ||
<div style="clear:both;"> </div> | |||
== Hallo liebe Metalabber und Interessierte! == | == Hallo liebe Metalabber und Interessierte! == | ||
Version vom 15. Mai 2013, 16:46 Uhr
HTML/CSS Workshop - Get Web Skills! | |
28.05.2013 19:00 | |
Misan | |
Workshop | |
active | |
Workshop für Einsteiger und Jene die Webentwicklung/Design kennen lernen wollen | |
Zuletzt aktualisiert: | 15.05.2013 |
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, damit ich nicht zu viel an einem Tag anzugehen versuche. 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 :)
Eckdaten
Zielgruppe: Interessierte, Anfänger, Leute die ihre Wissenslücken füllen wollen
Ort: Bibliothek
Zeit: 28.5.2013 19:00 (nach dem Java Meetup)
Dauer: Bis zu 2~3 Stunden, generell aber open end.
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.)
Teilnehmer
Themenpunkte
Einleitung - etwa 45 Minuten
- 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 (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos & Don'ts)
- Natürlich im späteren Verlauf auch die modernen Methoden und Approaches
- HTML und CSS zu trennen bedeutet Trennung von Struktur und Aussehen.
- 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.
- 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)
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)
- Fragen bis hierher klären und Hinweise aufklären.
- 5 Minuten Pause und Vorbereitung für den nächsten Teil
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:
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/almanac
Anlaufstelle für HTML und Semantik sowie WAI ARIA & Barrierefreiheit sowie Element Index
HTML/CSS/PHP Tutorials
http://www.peterkropff.de PHP Basics:
CSS Struktur und erkennen der verschiedenen Rulesets:
HTML Abbreviations: HTML bis zu 15x Schneller schreiben
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/
Typography: Webfonts, größtenteils Open Source und Free for Commercial use.
http://www.fontsquirrel.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)
Freie Bild und Farben Ressourcen Kein Gefühl für Farben und Patterns?
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:
Abschließende Worte
Ich versuche im groben und ganzen euch Webentwicklung&Design ein wenig näher zu bringen :)
Liebe Grüße Martin "Misan" Muzatko