{"id":279,"date":"2025-04-17T23:01:23","date_gmt":"2025-04-17T23:01:23","guid":{"rendered":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/?page_id=279"},"modified":"2025-04-18T00:17:07","modified_gmt":"2025-04-18T00:17:07","slug":"3-klasse","status":"publish","type":"page","link":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/?page_id=279","title":{"rendered":"3. Klasse"},"content":{"rendered":"\n<p class=\"has-medium-font-size\"><strong>SKI-Responsive Design<\/strong><\/p>\n\n\n\n<p>In diesem Semester haben wir uns mit den Grundlagen des Responsive Designs besch\u00e4ftigt. Das Hauptziel war es, Bilder so einzubinden, dass sie sich automatisch an verschiedene Bildschirmgr\u00f6\u00dfen anpassen \u2013 unser erster Kontakt mit sogenannten Media Queries.<\/p>\n\n\n\n<p>Unsere Aufgabe war es, ein Skibild und ein Skilogo so einzubauen, dass sie sich je nach Gr\u00f6\u00dfe des Displays ver\u00e4ndern. Damit haben wir die ersten Schritte in Richtung modernes, mobilfreundliches Webdesign gemacht.<\/p>\n\n\n\n<p><strong>Was wir gelernt haben:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Einsatz von Media Queries f\u00fcr verschiedene Endger\u00e4te<\/li>\n\n\n\n<li>Flexible Anpassung und Skalierung von Bildern<\/li>\n\n\n\n<li>Grundlegende Prinzipien f\u00fcr die Gestaltung von mobilen Webseiten<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" data-id=\"314\" src=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-1024x517.png\" alt=\"\" class=\"wp-image-314\" srcset=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-1024x517.png 1024w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-300x152.png 300w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-768x388.png 768w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-1536x776.png 1536w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-browser-2048x1034.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Browseransicht<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" data-id=\"313\" src=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-1024x585.png\" alt=\"\" class=\"wp-image-313\" srcset=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-1024x585.png 1024w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-300x172.png 300w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-768x439.png 768w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-1536x878.png 1536w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/ski-code-2048x1171.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Code-Ansicht<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>Im Sommersemester haben wir eine kleine, interaktive Webseite erstellt, auf der man per Button ein Bild ein- oder ausblenden konnte. Zus\u00e4tzlich wurde eine Hobbies-Box unter dem Bild mithilfe von CSS optisch ver\u00e4ndert.<\/p>\n\n\n\n<p>Das Ziel der \u00dcbung war es, Interaktivit\u00e4t mit JavaScript und gezielten CSS-Klassen umzusetzen \u2013 also Elemente zu verstecken oder anzuzeigen und deren Design dynamisch anzupassen.<\/p>\n\n\n\n<p><strong>Was wir dabei gelernt haben:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elemente per Button sichtbar machen oder ausblenden<\/li>\n\n\n\n<li>CSS-Klassen gezielt und dynamisch zuweisen<\/li>\n\n\n\n<li>Bilder sowie die Gestaltung der Hobby-Box flexibel steuern<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" data-id=\"316\" src=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-1024x573.png\" alt=\"\" class=\"wp-image-316\" srcset=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-1024x573.png 1024w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-300x168.png 300w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-768x429.png 768w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-1536x859.png 1536w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/aaaa-2048x1145.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Code-Ansicht<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" data-id=\"315\" src=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-1024x528.png\" alt=\"\" class=\"wp-image-315\" srcset=\"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-1024x528.png 1024w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-300x155.png 300w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-768x396.png 768w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-1536x791.png 1536w, https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/wp-content\/uploads\/2025\/04\/bbbb-2048x1055.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Browser-Ansicht<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SKI-Responsive Design In diesem Semester haben wir uns mit den Grundlagen des Responsive Designs besch\u00e4ftigt. Das Hauptziel war es, Bilder so einzubinden, dass sie sich automatisch an verschiedene Bildschirmgr\u00f6\u00dfen anpassen \u2013 unser erster Kontakt mit sogenannten Media Queries. Unsere Aufgabe war es, ein Skibild und ein Skilogo so einzubauen, dass sie sich je nach Gr\u00f6\u00dfe [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":277,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":0,"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=\/wp\/v2\/pages\/277"}],"wp:attachment":[{"href":"https:\/\/Mehmet.Erkin.pages.hak-schwaz.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}