Commit 9b0183be authored by Axel Dürkop's avatar Axel Dürkop

Update Content

parent afd06a5e
......@@ -21,6 +21,9 @@
## Sitzungen
* [Fahrplan](sitzungen/fahrplan.md)
* [[01] 2017-04-03](sitzungen/01-Mo-2017-04-03.md)
* [[02] 2017-04-10](sitzungen/02-Mo-2017-04-10.md)
* [Arbeitsauftrag INF1](sitzungen/02-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/02-auftrag-inf2.md)
## Material
* [Webtechnologien](material/webtechnologien.md)
......
<mockup version="1.0" skin="sketch" fontFace="Balsamiq Sans" measuredW="1084" measuredH="788" mockupW="1024" mockupH="768">
<controls>
<control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" x="60" y="20" w="1024" h="768" measuredW="450" measuredH="400" zOrder="0" locked="true" isInGroup="-1">
<controlProperties>
<text>Erste%20Schritte%20mit%20HTML%20und%20CSS%0Ahttp%3A//www.erste-schritte.de</text>
</controlProperties>
</control>
<control controlID="9" controlTypeID="com.balsamiq.mockups::MenuBar" x="635" y="99" w="434" h="40" measuredW="434" measuredH="29" zOrder="1" locked="false" isInGroup="-1">
<controlProperties>
<text>Home%2C%DCber%2CTeam%2CPreise%2CAnfahrt%2CKontakt%2CImpressum</text>
</controlProperties>
</control>
<control controlID="10" controlTypeID="com.balsamiq.mockups::Title" x="141" y="338" w="-1" h="-1" measuredW="180" measuredH="43" zOrder="2" locked="false" isInGroup="-1">
<controlProperties>
<text>Heading%201</text>
</controlProperties>
</control>
<control controlID="11" controlTypeID="com.balsamiq.mockups::Paragraph" x="214" y="396" w="202" h="80" measuredW="275" measuredH="80" zOrder="3" locked="false" isInGroup="-1">
<controlProperties>
<text>lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.</text>
</controlProperties>
</control>
<control controlID="12" controlTypeID="com.balsamiq.mockups::Canvas" x="60" y="147" w="1024" h="150" measuredW="100" measuredH="70" zOrder="4" locked="false" isInGroup="-1">
<controlProperties>
<color>15658734</color>
</controlProperties>
</control>
<control controlID="13" controlTypeID="com.balsamiq.mockups::Label" x="481" y="206" w="-1" h="-1" measuredW="183" measuredH="32" zOrder="5" locked="false" isInGroup="-1">
<controlProperties>
<size>24</size>
<text>Keyvisual/Marke</text>
</controlProperties>
</control>
<control controlID="14" controlTypeID="com.balsamiq.mockups::Title" x="441" y="338" w="-1" h="-1" measuredW="190" measuredH="43" zOrder="6" locked="false" isInGroup="-1">
<controlProperties>
<text>Heading%202</text>
</controlProperties>
</control>
<control controlID="16" controlTypeID="com.balsamiq.mockups::Title" x="741" y="338" w="-1" h="-1" measuredW="189" measuredH="43" zOrder="7" locked="false" isInGroup="-1">
<controlProperties>
<text>Heading%203</text>
</controlProperties>
</control>
<control controlID="18" controlTypeID="com.balsamiq.mockups::Canvas" x="60" y="677" w="1024" h="85" measuredW="100" measuredH="70" zOrder="8" locked="false" isInGroup="-1">
<controlProperties>
<color>14540253</color>
</controlProperties>
</control>
<control controlID="19" controlTypeID="com.balsamiq.mockups::Label" x="519" y="705" w="-1" h="-1" measuredW="71" measuredH="32" zOrder="9" locked="false" isInGroup="-1">
<controlProperties>
<size>24</size>
<text>Footer</text>
</controlProperties>
</control>
<control controlID="20" controlTypeID="com.balsamiq.mockups::Icon" x="141" y="396" w="-1" h="-1" measuredW="64" measuredH="64" zOrder="10" locked="false" isInGroup="-1">
<controlProperties>
<icon>SmallClockIcon%7Cxlarge</icon>
</controlProperties>
</control>
<control controlID="21" controlTypeID="com.balsamiq.mockups::Paragraph" x="514" y="396" w="202" h="80" measuredW="275" measuredH="80" zOrder="11" locked="false" isInGroup="-1">
<controlProperties>
<text>lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.</text>
</controlProperties>
</control>
<control controlID="22" controlTypeID="com.balsamiq.mockups::Icon" x="441" y="396" w="-1" h="-1" measuredW="64" measuredH="64" zOrder="12" locked="false" isInGroup="-1">
<controlProperties>
<icon>AIMIcon%7Cxlarge</icon>
</controlProperties>
</control>
<control controlID="23" controlTypeID="com.balsamiq.mockups::Paragraph" x="814" y="396" w="202" h="80" measuredW="275" measuredH="80" zOrder="13" locked="false" isInGroup="-1">
<controlProperties>
<text>lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit%2C%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.</text>
</controlProperties>
</control>
<control controlID="24" controlTypeID="com.balsamiq.mockups::Icon" x="741" y="396" w="-1" h="-1" measuredW="64" measuredH="64" zOrder="14" locked="false" isInGroup="-1">
<controlProperties>
<icon>GearIcon%7Cxlarge</icon>
</controlProperties>
</control>
<control controlID="25" controlTypeID="com.balsamiq.mockups::Canvas" x="75" y="99" w="97" h="40" measuredW="100" measuredH="70" zOrder="15" locked="false" isInGroup="-1"/>
<control controlID="26" controlTypeID="com.balsamiq.mockups::Label" x="109" y="109" w="-1" h="-1" measuredW="29" measuredH="21" zOrder="16" locked="false" isInGroup="-1">
<controlProperties>
<text>Logo</text>
</controlProperties>
</control>
</controls>
</mockup>
\ No newline at end of file
# [02] Montag, 10. April 2017
## Geplante Inhalte
## Inhalte, die sich in der Veranstaltung ergeben haben
## Auftrag
### Ziele
* Sie sind in der Lage, mit HTML und CSS eine einfache Website zu bauen.
* Dabei erarbeiten Sie sich die Grundkenntnisse für HTML-Listen, Bildeinbindung, Hyperlinks, Layout mit CSS
* Sie wissen, was zu tun ist, um eine Website auch für mobile Endgeräte zu optimieren.
### Szenario
Sie sollen für einen mittelständischen Kunden eine einfache Website erstellen. Diese soll zunächst die notwendigen Informationen über den Betrieb und seine Mitarbeiter_innen enthalten. Später soll die Seite ggf. hinsichtlich der Unterseiten skalieren.
Der Kunde wünscht, dass die Seite auch auf mobilen Endgeräten gut aussieht, entscheidet sich aber gegen eine App.
Nach einem ersten Konzeptgespräch mit dem Kunden haben Sie ein Mockup erarbeitet, in dem die grundsätzliche Informationsarchitektur der Website festgehalten ist.
![Mockup der Website](/abb/2017-04-06-erste-schritte.png)
### Arbeitsschritte
**In der Gruppe/im Tutorium**
1. Klären Sie Begriffe, die Sie nicht verstehen.
* Haben Sie Begriffe in der Veranstaltung nicht verstanden, oder sind Ihnen Termini im Mockup/in der Aufgabe unklar?
2. Definieren Sie das Problem.
* Worin genau besteht die Aufgabe, wenn Sie das Mockup in ein HTML/CSS-Dokument umsetzen sollen?
3. Analysieren Sie das Problem.
* Wie lässt sich das große Problem in viele kleinere herunterbrechen?
* Wie können Sie beschreiben, was zu tun ist?
4. Ordnen Sie Ideen und vertiefen Sie diese systematisch.
* Machen Sie Vorschläge, wie vorzugehen ist.
* Wie können Sie die identifizierten Teilprobleme angehen?
5. Formulieren Sie Lernziele.
* Was wollen Sie bei der Lösung der identifizierten Probleme erreichen?
* Was wollen Sie können und verstehen?
**Im Eigenstudium/in Mattermost**
6. Suchen Sie ergänzende Informationen.
* Recherchieren Sie, mit welchen Resourcen Sie allgemeine und spezielle Probleme des Auftrags lösen können.
* Welche Bücher, Tutorials und Videos helfen?
* Teilen Sie die Informationen, die Sie finden, mit den anderen, z.B. in Mattermost.
7. Arbeiten Sie eigene und gemeinschaftliche Erkenntnisse in ihre Arbeit ein.
## Material
Für die Erstellung des Mockups wurde das Tool [Balsamiq](https://balsamiq.com/) verwendet. Es ist in einer [Webversion kostenlos verwendbar](https://webdemo.balsamiq.com/). Die XML-Datei zu dem Mockup kann dort importiert und weiterbearbeitet werden. Sie liegt [in GitLab](#).
## Auftrag
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment