{"id":1448,"date":"2022-03-01T11:03:59","date_gmt":"2022-03-01T10:03:59","guid":{"rendered":"urn:uuid:608e944b-4eaa-4161-8bfa-dbf07fc896db"},"modified":"2022-03-01T11:04:00","modified_gmt":"2022-03-01T10:04:00","slug":"nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren","status":"publish","type":"post","link":"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/","title":{"rendered":"Nachhilfe im Googeln \u2013 Ein\u00adbli\u00adcke ins Modul \u00abWebprogrammieren\u00bb"},"content":{"rendered":"\n

\u00abModerne Webauftritte sind keine reinen Webseiten mehr, sondern interaktive und multimediale Webapplikationen. Die Studierenden erhalten in dieser Veranstaltung einen umfassenden \u00dcberblick \u00fcber Konzepte, Sprachen, Protokolle und Frameworks der Webprogrammierung. Dar\u00fcber hinaus werden die Kenntnisse in einem Semesterprojekt angewendet und vertieft.\u00bb, so die Beschreibung des Moduls Webprogrammieren, welches die DBM Studierenden des f\u00fcnften Semesters im letzten halben Jahr bei Ingmar Baetge<\/a> besuchen durften. In diesem Blogbeitrag erz\u00e4hlen die Studierenden Sandro Matter und Danilo Rosini von ihren Erfahrungen in diesem Modul.<\/em><\/p>\n\n\n\n\n

\u00dcber das Modul<\/strong><\/p>\n\n\n\n\n

Begonnen mit einer kurzen Repetition zu den HTML- und CSS-Grundlagen aus den fr\u00fcheren Modulen \u00abWirtschaftsinformatik\u00bb und \u00abProgrammieren 1 & 2\u00bb folgte die Einf\u00fchrung in JavaScript \u2013 dem Schwerpunkt dieses Moduls. Dabei wurde auch auf Besonderheiten der modernen Programmiersprache f\u00fcrs Web eingegangen, welche ihren Ursprung im Jahr 1995 hatte und mit dem Namensvettern Java, bis auf den \u00e4hnlich klingenden Namen, beinahe keine Gemeinsamkeiten pflegt, was oft noch heute noch zu Verwirrung und Missverst\u00e4ndnissen f\u00fchrt. Das Tohuwabohu in der Programmiersprache endete nicht nur beim Namen. So herrscht bei uns nach wie vor nicht v\u00f6llige Klarheit, wieso laut JavaScript die Rechenoperation 1 + 2 = 3 ergibt, aber 0.1 + 0.2 \u2260 0.3 ist. Die Ursache liegt \u00fcbrigens dabei, dass die Programmiersprache Rechenoperationen mit Fliesskomma-Mathematik umsetzt und der Computer von Haus aus nur ganze Zahlen speichern kann, also braucht man eine M\u00f6glichkeit, Dezimalzahlen darzustellen. Diese Darstellung ist nicht ganz genau. Aus diesem Grund ist 0.1 + 0.2 \u2260 0.3. (Die Erkl\u00e4rung im Detail kann hier<\/a> von Dr. Derek Austin nachgelesen werden.) Kapiert? Genau. So f\u00fchlte sich wohl der Grossteil der Betroffenen, welche das erste Mal mit dieser Eigenschaft der Skriptsprache konfrontiert wurde. Dies obwohl die L\u00f6sung \u2013 wie grunds\u00e4tzlich alles in der Informatik \u2013 logisch zu erkl\u00e4ren ist (oder es zumindest sein sollte).<\/p>\n\n\n\n\n

Nachdem die Studierenden sich allerdings genauer mit der Sprache auseinandersetzen und erste Funktionen und Code Teile selbst zu schreiben begonnen hatten, wurde vieles, das zuvor noch Unklarheiten bereitete, klarer. Die Theoriebl\u00f6cke waren interessant und hilfreich.  Am meisten profitieren man jedoch bei der praktischen Umsetzung des Semesterprojektes. Besonders hilfreich waren dabei die regelm\u00e4ssigen Coachings mit dem Dozenten, welcher individuell auf Schwierigkeiten bei den Studierenden eingegangen ist, falls Probleme auftraten, f\u00fcr welche das Projektteam bei Google oder Stackoverflow nicht sofort eine Antwort fand. Meist wurde die Antwort dann eben doch gemeinsam mit dem Dozenten bei Google gefunden, nur nach einer noch l\u00e4ngerer Suche. In der Aussage, der wichtigste Skill f\u00fcr Programmierer sei das Googeln, scheint eben doch ein Qu\u00e4ntchen Wahrheit zu stecken.<\/p>\n\n\n\n\n

Das Semesterprojekt<\/strong><\/p>\n\n\n\n\n

Das Semesterprojekt bildete zugleich 70% des Leistungsnachweises des Moduls. In Gruppen sollte eine interaktive Webseite entstehen, die einen Datensatz oder ein wissenschaftliches Modell interaktiv aufbereitet. Mit v\u00f6llig unterschiedlichen Ideen machten sich die Gruppen an die Arbeit, ihre Projekte umzusetzen. Eine Projektgruppe setzte aus einem Datensatz, welcher Meta-Informationen zum Netflix Filmangebot beinhaltet, eine interaktive Mediathek um, bei welcher der Datensatz nach verschiedenen Parametern gefiltert und durchsucht werden kann. (Das mit dem React-Framework umgesetzte Projekt kann hier<\/a> gefunden werden.) Eine andere Gruppe wiederum erstellte aus einem Datensatz rund um Elektrofahrzeug-Ladestationen eine Plattform um, mit welcher die naheliegendste Station gefunden werden kann.<\/p>\n\n\n\n\n

Unsere Gruppe hat einen etwas anderen Ansatz gew\u00e4hlt. Im vergangenen Jahr erhielt jeder Studierende des Studienganges Digital Business Management per Post ein gedrucktes Lehrmittel zugestellt: Die FHGR Online-Marketing- Cards. Die Karten wurden vor einem Jahr intensiv genutzt, um sich auf die Pr\u00fcfung im Modul Digital Marketing vorzubereiten. Diese fiel dem Team zuf\u00e4llig bei der Projektsuche in die H\u00e4nde und schnell wurde die Idee geboren, eine digitale Version Karten zu erstellen. Nach R\u00fccksprache mit Studiengangsleiter und Initiant der Lehrmittel, Armando Sch\u00e4r, erhielt das Team das GO zur Umsetzung der Karten. Einzige Vorgabe: Die Karten m\u00fcssen auch in Zukunft von den Autoren der FHGR Online Marketing Cards aktualisiert werden k\u00f6nnen.<\/p>\n\n\n\n\n

<\/p>\n\n\n\n\n

Die \u00abanalogen\u00bb Online Marketing Cards der FH Graub\u00fcnden<\/em> (Bildquelle: Eigene Darstellung)<\/p>\n\n\n\n\n\n\n\n\n

Damit die Karten k\u00fcnftig also weiter gepflegt werden k\u00f6nnen, wurde beschlossen, den Code auf GitHub als Open-Source-Projekt zu hosten. Die Seite sollte auf GitHub-Pages aufrufbar sein. Die Websites auf GitHub-Pages werden oftmals mit Jekyll umgesetzt. Jekyll ist ein Generator f\u00fcr statische Websites mit integrierter Unterst\u00fctzung f\u00fcr GitHub-Pages und einem vereinfachten Build-Prozess. Der auf der Programmiersprache Ruby basierende statische Seitengenerator (SSG) nimmt Markdown- und HTML-Dateien und erstellt eine vollst\u00e4ndige statische Website auf der Grundlage von vordefinierten Layouts. (jekyllrb.com<\/a>)<\/p>\n\n\n\n\n

F\u00fcr das Layout wurden verschiedene HTML \u00abGer\u00fcste\u00bb gebaut. Der Inhalt der Karten wurde in Markdown-Files erfasst. Im HTML-Ger\u00fcst wurde so definiert,dass der Inhalt der Markdown-Files platziert werden soll. Das tolle an diesen HTML-Layout-Vorlagen: In Zukunft k\u00f6nnen so die Inhalte der Karten direkt auf GitHub erweitert werden, um die Karten aktuell zu halten. Wird eine neue Karte als Markdown-File hochgeladen, wird die statische Jekyll-Seite automatisch neu gebaut und aktualisiert. Wer mehr \u00fcber die verschiedenen Werkzeuge erfahren m\u00f6chte, die das Online Marketing bietet, sollte sich die Online Marketing Cards der FH Graub\u00fcnden unbedingt ansehen.<\/p>\n\n\n\n\n

<\/p>\n\n\n\n\n

Das Endergebnis: Die Website als \u00abonline\u00bb Online Marketing Cards<\/em> (Bildquelle: Eigene Darstellung)<\/p>\n\n\n\n\n\n\n

Der ganze Sourcecode ist \u00f6ffentlich auf GitHub<\/a> ersichtlich. Der Link zur fertigen Website auf GitHub-Pages finden Sie hier<\/a>.<\/p>\n\n\n\n\n

Lehrreiches und spannendes Praxismodul<\/strong><\/p>\n\n\n\n\n

Abschliessend kann die ganze Projektgruppe sagen, dass die Projektarbeit ein voller Erfolg war. Wir konnten durch vernetztes Denken das Erlernte aus verschiedenen Modulen, wie Programmieren 1 und 2 sowie der Wirtschaftsinformatik einerseits das Wissen wieder auffrischen und dieses mit neuen Learnings im Bereich von JavaScript anreichen und praktisch Anwenden. Das Modul bietet allen mit einem Flair f\u00fcrs Programmieren einen praxisnahen Einblick in die Basics der Webprogrammierung.<\/p>\n\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":77,"featured_media":1453,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"acf":[],"yoast_head":"\nNachhilfe im Googeln \u2013 Ein\u00adbli\u00adcke ins Modul \u00abWebprogrammieren\u00bb - Digital Business Management Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nachhilfe im Googeln \u2013 Ein\u00adbli\u00adcke ins Modul \u00abWebprogrammieren\u00bb - Digital Business Management Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Business Management Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-01T10:03:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-01T10:04:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.fhgr.ch\/dbm\/wp-content\/uploads\/sites\/4\/2022\/03\/oskar-yildiz-gy08fxem2l4-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.fhgr.ch\/dbm\/wp-content\/uploads\/sites\/4\/2022\/03\/oskar-yildiz-gy08fxem2l4-unsplash-scaled.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\">\n\t<meta name=\"twitter:data1\" content=\"5 Minuten\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#organization\",\"name\":\"FH Graub\\u00fcnden\",\"url\":\"https:\/\/blog.fhgr.ch\/dbm\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#logo\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/blog.fhgr.ch\/dbm\/wp-content\/uploads\/sites\/4\/2019\/09\/fhgr_rgb_granit.png\",\"width\":7512,\"height\":1182,\"caption\":\"FH Graub\\u00fcnden\"},\"image\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#website\",\"url\":\"https:\/\/blog.fhgr.ch\/dbm\/\",\"name\":\"Digital Business Management Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#organization\"},\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/blog.fhgr.ch\/dbm\/wp-content\/uploads\/sites\/4\/2022\/03\/oskar-yildiz-gy08fxem2l4-unsplash.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#webpage\",\"url\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/\",\"name\":\"Nachhilfe im Googeln \\u2013 Ein\\u00adbli\\u00adcke ins Modul \\u00abWebprogrammieren\\u00bb - Digital Business Management Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#primaryimage\"},\"datePublished\":\"2022-03-01T10:03:59+00:00\",\"dateModified\":\"2022-03-01T10:04:00+00:00\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#webpage\"},\"author\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#\/schema\/person\/8220cec6f9dfe6e942100cc17ad9c185\"},\"headline\":\"Nachhilfe im Googeln \\u2013 Ein\\u00adbli\\u00adcke ins Modul \\u00abWebprogrammieren\\u00bb\",\"datePublished\":\"2022-03-01T10:03:59+00:00\",\"dateModified\":\"2022-03-01T10:04:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#organization\"},\"image\":{\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#primaryimage\"},\"articleSection\":\"Insights\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blog.fhgr.ch\/dbm\/2022\/03\/01\/nachhilfe-im-googeln-einblicke-ins-modul-webprogrammieren\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.fhgr.ch\/dbm\/#\/schema\/person\/8220cec6f9dfe6e942100cc17ad9c185\",\"name\":\"curchellassabrina\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/posts\/1448"}],"collection":[{"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/comments?post=1448"}],"version-history":[{"count":9,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/posts\/1448\/revisions"}],"predecessor-version":[{"id":1459,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/posts\/1448\/revisions\/1459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/media\/1453"}],"wp:attachment":[{"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/media?parent=1448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/categories?post=1448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fhgr.ch\/dbm\/wp-json\/wp\/v2\/tags?post=1448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}