Übungen, Code-Klassenarbeiten- Prüfungen mit Lösungen – Tipps zum Coden – Steig ein in die Welt der Programmierung! – Egal ob Spiele-Programmierung, App-Programmierung- Webseiten- Programmierung. Versuche hier ersten Code zu schreiben.
Die neue News-Seite von Schulhof-Programmierung: Bleib dran-.)
Du willst cool in die Programmierung einsteigen? – Es gibt viele Möglichkeiten, dabei ist es auch etwas abhängig, was du überhaupt programmieren möchtest. Eine Webseite, eine App, etc… Schulhof-Programmierung hilft dir mit vielen praktischen Beispielen und Video – Lösungen einen coolen Start hinzulegen. Natürlich gibt es auch viele Tipps, vor allem für Anfänger, wenn du noch nie im Leben auch nur eine Zeile Code geschrieben hast.
Bild einfügen: Wie füge ich ein Bild in Visual-Studio-Code ein ( Code-Aufbau)
Quelltext-Editoren Wo kann ich den Code überhaupt reinschreiben?
Sonntags-Fragen auf Instagram
Github Code hochladen Wie kann ich Code hochladen auf Github
Praxis-Übung – Programmierung eines Rabattrechners- Code-Entwicklung mit Lösung
Bootcamp : Falls du dich für ein Bootcamp bewirbst – Kriegst du diese Aufgabe hin?
Wie legt man ein Code-Projekt für eine Webseite an in VS-Code.
Java-Script-Array – Klassenarbeit- Wie funktioniert ein Array?
Harte Prüfungs-Aufgabe mit Lösung- Coden eines Dienstplans mit Video-Lösung
Zusammen programmieren und online sich verbinden Wie?
Lernplan erstellen: Einen Programmier-Lernplan erstellen – Nur wie eigentlich?
Riesiger Prüfungsraum zum üben, ältere Klassenarbeiten und Prüfungen mit Lösungen
Ausbildungen: Welche Ausbildungen gibt es im Bereich Fachinformatiker?
Fraunhofer-Institut: Was ist Open-Roberta-Lab?
Einstieg in Python – Nur wie? Was kann ich damit machen?
Promotion und Dr. Arbeit in der Informatik- Video-Verweis / eines Professors
Daten in Diagramme in Sekundenschnelle im Code anzeigen – Nur wie?
Web-App : Wie programmiert man eine Web-App und veröffentlicht diese?
App-Entwicklung – Große Übersicht über Techniken
Informatik : Welche Informatik-Wettbewerbe gibt es?
Error-Code- Wie gut kennst du dich im Code aus? ( Anfänger)
NEWS – OKTOBER 2023 Anfänger-Programmierung
25.10.2023 – Achtung – LERN und ERROR- FRAGE – 1
21
Fehler – Error – Fragen
Wie würdest du das ganze angehen?
Du hast die Aufgabe einen kleinen Arbeitszeitnachweis zu programmieren. Er soll so aussehen, wie ungefähr der untere in der Skizze ( Screenshot). Der User soll die Möglichkeit haben, an jedem Tag von 1 – 31, seine Stundenzahl einzugeben, die Gesamtstundenzahl soll automatisiert online berechnet werden im Code. Der User soll außerdem die Möglichkeit haben, mit einem Klick alle Eingaben durch einen Button wieder zu löschen.
Frage 1 : Mit welcher Programmier-Technik oder welchem Tech-Stack würdest du das Problem überhaupt lösen? Begründe warum. Welche Kombinationen von Techniken könnte man hier anwenden? ( ohne Login etc., so einfach wie möglich).
Frage 2 : Was hat der Entwickler für ein Code – Problem, dass er den Satz “ Bitte geben Sie statt des Kommas ein Punkt ein“ in seiner User-Anwendung schreibt?
Frage 3: Er möchte die Farbe blau in ein hellgrün wechseln, welche Technik könnte er hierfür nutzen?
Die mögliche Antwort findest du in Henry´s – Senf Kommentar, demnächst…
Online-Arbeitszeitnachweis (einfach mit Stundenberechnung )
19 - Henry´s- Senf-Kommentar - Error-Frage
Lösungen: – Dienstplan
Frage 1 Mit welchen Techniken könnte man so etwas realisieren?
Du benötigst 3 Techniken – HTML, CSS und Java-Script. Willst du das ganze responsive machen, also für Handys und so, dann kannst du noch zusätzlich mit der Technik Media-Query arbeiten. Wozu braucht man Media-Query, ich habe das noch nie gehört? Antwort: Praktisches Beispiel. Stell dir vor, du möchtest das ganze online stellen, dann klicken sich ja Leute ein mit verschiedenen Endgeräten. Also mit Handy, Tablets, Laptops verschiedener Größen. Das heißt, du musst den Code so anpassen, damit er auch responsive ist, also an andere Endgeräte angepasst ist. Responsive Techniken gibt es viele. Zum Beispiel CSS-Grid- Css-Flexbox, Media-Query – Tailwind / Bootstrap etc. Wenn dir all die Techniken nichts sagen, gib diese einfach in die youtube-Suche ein. Du findest alle Techniken immer gut erklärt auf youtube.
HTML Wozu?
Dieser Prototyp wurde bereits gebaut. In diesem Falle, da es eine einfache Web-Anwendung werden sollte, brauchst du zunächst, einen Code-Editor. Genutzt wurde Visual-Studio-Code, dann benötigst du natürlich HTML, was die Struktur des Dienstplans betrifft. HTML ist eine Markup-Sprache und keine Programmiersprache.
CSS Wozu?
Als 2. benötigst du CSS ( Cascading-Stylesheet) für das Styling und Layout, so dass das ganze deinen Vorstellungen entspricht und auch für den User angenehm ist, dort zu planen.
Java-Script Wozu?
Als 3. Technik benötigst du natürlich java-script. Damit schreibst du die Funktionen. Ein praktisches Beispiel, wie Java-Script hier funktioniert ist, wenn du auf den Botton delete, also löschen klickst, wird im Hintergrund eine Funktion ausgeführt, damit alle Felder in Sekundenschnelle gelöscht werden. Dafür ist java-Script verantwortlich. Java-Script zählt auch die 31 Stundenzahlen zusammen. Das heißt, Java-Script ist für Funktionen und für das Funktionelle einer Web-Anwendung wichtig.
Frage 2 – Die Sache mit dem Komma
Java-Script erkennt im Code nicht, dass du mit einem Komma arbeiten möchtest. In Deutschland wird ja wenn du eine Komma-Zahl schreibst, mit einem klassischen Komma geschrieben. Im englischen Bereich ist das Komma in der java-script-Programmierung allerdings ein Punkt. Das heißt, möchtest du, dass der User die Stundenzahl klassisch eingeben möchte, zum Beispiel 7,5 so musst du das im java-script-Code angeben, dass der Punkt durch ein Komma ersetzt wird im Code.
Frage 3 – Der Entwickler möchte, dass die Farbe blau in ein grün geändert wird. Mit welcher Technik kann er dies tun?
Wenn du meine Lösung aufmerksam liest, dann weißt du jetzt, dass alles was mit Style, Layout und Farben zu tun hat, mit CSS gemacht wird. Das wäre hier also die richtige Antwort.
Ich habe dir hier noch ein Screenshot gepostet, wie du so etwas gliedern kannst in Visual-Studio- Code. Auf der linken Seite legst du also die entsprechenden Techniken an: Für HTMl also index.html für CSS legst du kalender.css an und für java-script legst du kalender.js an… und schon hast du alle Techniken vorbereitet.
Screenshot CSS- und Anlegen der entsprechenden Files in Visual-Studio-Code zur Entwicklung des Codes.
Hilfe, was bedeuten die grünen Zeilen im Code?
Du hast die Möglichkeit innerhalb eines Codes, sogenannte „Kommentare “ einzugeben, diese werden in Visual-Studio-Code grün angezeigt. Wenn du viel Code hast, neu bist, kannst du hier immer schreiben, was du genau machst. Dies kann für dich hilfreich sein, oder für andere, die den Code lesen. Das heißt praktisch für dich, nur du kannst den Kommentar lesen, aber nicht der User auf der Webseite. Der Kommentar wird nicht öffentlich angezeigt, falls du den Code veröffentlichst.
25.10.2023 – Welche Informatik-Wettbewerbe gibt es?
20
Es gibt bundesweite Informatik Wettbewerbe und Jugend-Informatik-Wettbewerbe . Wenn du darauf Lust hast, kannst du dich auf der Webseite mal umschauen und auch ausprobieren. homepage ( Jugend-Wettbewerb – Informatik)
25.10.2023 –App-Entwicklung
Eine der häufigsten Fragen in Programmiergruppen ist sicherlich, wie kann ich eine coole App entwickeln? Was muss ich dafür lernen und welches Werkzeug benötige ich hierfür, um einzusteigen in die App-Entwicklung. Auffallend ist sicherlich parallel die Frage: Wie lange dauert es, bis ich eine App fertig habe? Es gibt jede Menge Techniken, um eine App zu entwickeln… Übersicht
19
Der Senf
Henry´s Senf-Kommentar - App Entwickklung Wie?
App- Entwicklung & Techniken und Sprachen – Was geht ab Leute?
Was würdest du auf die Frage antworten, welche Programmiersprache benötige ich, um eine App zu entwickeln und welche technische Umgebung benötige ich, um eine App zu realisieren?
Zunächst mal solltest du unterscheiden, ob du eine Android-App entwickeln möchtest, oder eine IOS-App und dann gibt es noch die sogenannten- Cross-Techniken. Aber mal eins nach dem anderen-:)
Wie kannst du eine Android-App coden?
Antwort: Lerne Java oder Kotlin
Wie kann ich eine IOS-App coden?
Antwort: Lerne die Programmiersprache „Swift“
Was ist aber eigentlich eine Cross-Technik in der App-Entwicklung?
Sogenannte „Cross-Techniken“ das sind Techniken, wo du nur eine Code-Base schreibst und du kannst dann anhand dieses Codes den Code für beide Systeme nutzen, also für Android und für IOS. Eine noch relativ junge Cross-Technik ist hier Dart und Flutter. Dart ist die Programmier-Sprache und Flutter das Framework. Wenn du zum Beispiel Dart und Flutter lernen möchtest, dann musst du dir „Android-Studio„ auf dein PC installieren und kannst dann loslegen. Android-Studio ist allerdings sehr umfangreich, check die technischen Daten deines Laptops. Es gibt auch viele technische Anleitungen auf Youtube über diese Technik.
Hilfe, ich bin mir unsicher – bleib cool-.)
Wenn du Dart mal kurz ausprobieren möchtest, so kannst du die Sprache in dem sogenannten Dartpad ausprobieren. Das ist ziemlich cool. Den Link findest du hier.
Natürlich gibt es noch viele andere Techniken, eine Übersicht findest du im Beitrag von Schulhof-Programmierung oben, wenn dich das Thema App Entwicklung interessiert. Wenn du das alles zum ersten mal hörst in deinem Leben, dann gib einfach auf youtube die Technik ein, die dich interessiert. Dort findest du viele Entwickler, die dir zeigen, wie du hier cool einsteigen kannst.
Hier noch ein paar Fragen aus den Gruppen:
a) Kann ich auch mit HTML alleine eine App bauen?
Antwort: Nein, aber du kannst allein mit HTML, zum Beispiel eine einfache Webseite erstellen, nur ist diese eben sehr eingeschränkt. Du kannst eben Texte und Bilder einfügen. Nutzen kannst du dazu Visual-Studio-Code, um dort deinen Code reinzuschreiben. Allerdings wäre es besser wenn du zusätzlich etwas CSS lernst. Das ist für das Styling deiner Webseite dann verantwortlich, denn du willst doch, wenn du so etwas machst, dass das ganze auch cool aussehen soll oder? Eine coole Seite, wie du HTML lernen kannst ist sicherlich W3-School.
b) Kostet es etwas, wenn ich eine App in den App-store hochlade?
Antwort: Ja, das ist nicht umsonst
C) Kann ich aus einer eigentlichen Homepage, die ich mit HTML, CSS und java-Script Code geschrieben habe, auch eine App machen?
Antwort: Nein, nicht direkt eine App, sondern eine sogenannte – Web-App: Du musst dazu den Code mit einer manifest-json verbinden. Wie du das machst, siehst du im Beitrag Nr. 18 “ Coden einer Web-App“. Der User kann einfach gesagt dann mit einem kleinen Icon von seinem Handy aus, das ganze abrufen. ( Web-App- Technik)
24.10.2023 –Eine Web-App programmieren – So einfach wie Kuchen backen?
18
Anfänger – Programmierung einer kleinen Web-App
Christine ist mit Henry unterwegs in der Stadt. Es ist ein schöner Sommertag und gemeinsam wollen die beiden Eis und Kuchen essen gehen. Christine fragt Henry ob er heute Abend noch auf die Party kommen würde, aber Franky meint nur kurz „Nö, geht nicht, hab keine Zeit, ich programmiere gerade an einer kleinen Web-App und ehe Christine noch nachfragen kann, was das genau ist, hat sich Henry bereits auf sein Fahrrad geschwungen und ist los. Lies daher auch den Senf-Kommentar von Henry für eine grobe Schritt für Schritt Anleitung. Was ist also eine Web-App und mit welchen Techniken kannst du so etwas erstellen?
Wie kann ich als Anfänger eine kleine Web-App entwickeln? Video (23 Min)
Was brauchst du für eine kleine Web-App? Zunächst mal, brauchst du Visual-Studio-Code, oder einen anderen Quelltext-Editor, um deine eigene Web-App zu erstellen, denn dort schreibst du natürlich den Code.
Mit welchen einfachen Techniken kannst du schon eine kleine Web-App entwickeln?
Den Klassiker einer kleinen Web-App kannst du einfach mit HTML, CSS und Java-Script bauen. HTML ist ja eine Markup-Sprache und bildet dann praktisch die Struktur für die kleine App, mit CSS kannst du deine App stylen, du bestimmst, wo sollen die Bilder hin, wie soll der Hintergrund aussehen usw. das alles machst du mit CSS. Css kannst du cool lernen, wenn du den sogenannten CSS-Generator dir anschaust, dort kannst du Farben und HIntergrund einstellen und dann wird dir mit einem kleinen Generator angezeigt, wie der Code dazu aussieht. Das ist sehr cool, falls du hier Schwierigkeiten hast. Wenn du in diesem Video auf 39:01 vorspulst, dort erkläre ich dir, wie der CSS-Generator funktioniert. Um CSS zu lernen, würde ich dir raten, dich mal auf der w3school-Webseite dich umzuschauen, was du damit alles machen kannst. Als eigentliche Programmiersprache brauchst du dann noch java-script.
Das Problem:
Das Problem, wenn du das so machst wie o.g beschrieben und das ganze dann veröffentlichst, dann hast nur eine klassische homepage, aber noch keine sogenannte Web-App mit einem kleinen Icon, auf das du klicken kannst und das was du programmiert hast, von deinem Handy aus, wie eine Art App zu starten. Du willst doch eine Web-App oder?
Die Lösung des Problems
Du musst hergehen und den Code, der ja aus HTML, der Struktur besteht, dem CSS für das Styling sowie das Java-Script, das für die Funktionen genutzt werden kann, mit einer sogenannten Json verbinden.
Oh je, was heißt das genau?
Schulhof-Programmierung hat dazu natürlich auch ein Video gemacht, falls du hier Schwierigkeiten hast, denn du musst, den HTML, CSS und Java-Script Code mit einer manifest json – Datei verknüpfen. Das machst du auf folgender Firebase-Seite (Web-App- Manifest-Generator)
Bin ich jetzt blöd? – Ich verstehe immer noch nicht, was bedeutet das dann genau`?
In dem Moment, wo du deinen Code mit der Firebase-Seite verbindest, so hat jeder User die Möglichkeit, sich die Webseite als sogenannte Web-App auf sein Handy zu ziehen. Dazu geht der User auf die Webseite, klickt in der Regel auf die 3 Punkte oben rechts auf der Webseite. Dort steht dann „zum Bildschirm“ hinzufügen und schon wird dir als User auf deinem Handy, die gesamte Webseite über ein kleines Browser-Icon angezeigt auf deinem Handy, wenn du die Internet-Adresse über dein Handy eingibst.
Wie kann ich dann aber eine Android-App entwickeln fragt Christine
Antwort von Henry: Das Thema erkläre ich dir demnächst, die gesamte App-Programmierung ist ein großes Thema … -.)
Hilfe ich kann kein HTML und auch kein CSS und schon gar kein Java-Script
Coole Links aus dem Netz, wenn du einsteigen möchtest in diese 3 Techniken
23.10.2023 – Diagramme visualisieren und anzeigen – nur wie eigentlich? ( einfache Erklärung)
Wenn dein Chef mal wieder nervt…
17 – Im Code Diagramme in Sekundenschnelle verändern
Stell dir vor, dein Chef will mal wieder die neuesten Umsatz -Entwicklungs-Zahlen grafisch dargestellt haben. Das ist natürlich blöd, wenn du dann kein Plan hast, wie so etwas gemacht wird..
Diagramme visualisieren und in Sekundenschnelle im Code verändern und anzeigen.
Viele Leute erinnern sich wohl mit großem Unbehagen, an Diagramme, Statistiken, oder ähnliches, die man plötzlich vielleicht zunächst in Excel darstellen muss im schulischen Bereich oder im wilden Studentenleben. Wie sieht es allerdings konkret in der Programmierung aus, Daten visuell darzustellen, oder eine einfache Statistik oder ähnliches darzustellen? In der Programmierung gibt es hier auch verschiedene Ansätze und Techniken in verschiedenen Programmier-Sprachen. Eine davon schauen wir uns hier etwas näher an.
Nämlich Chart.js – Wie installiert man Chart.js ? Video ( deutsch)
Eine andere Möglichkeit ist, Daten zu visualisieren, wenn du mit Python & Plotly arbeitest Video ( Morpheus)
Der Senf
Henry´s Senf-Commentar zu chart.js
Chart.js ist an sich sehr cool. Du kannst in Sekundenschnelle Diagramme erstellen, indem du den Code entsprechend veränderst. Doch wie funktioniert das ganze eigentlich ganau?
Die erste Schwierigkeit für Anfänger – Die Installation
Bist du das erste mal auf der Webseite und willst das ganze einfach downloaden, so ist es gut möglich, dass du möglicherweise an der Installation scheiterst, weil diese etwas aufwendig ist. Auf jeden Fall solltest du im Ablauf keinen Fehler machen, da es sonst natürlich nicht funktioniert. Da es hier keine deutsche Anleitung gab, haben wir auf youtube eine deutsche Anleitung hochgeladen, falls dein technisches Englisch nicht so gut ist. Hast du dann aber die Intallation geschafft, so ist die Seite und wie du die Diagramme im Code in Sekundenschnelle verändern kannst sehr cool. Die technische Anleitung findest du hier auf der Seite, so wie ein Beispiel, falls du das ganze mal ausprobieren willst, um eigene Statistiken zu bauen, oder Diagramme zu schalten.
23.10.2023 – Professor der Informatik
16
Ein spannender Video-Kanal auf youtube gibt es von einem Professor für Informatik, der aus seiner beruflichen Laufbahn erzählt. Wenn dich das interessiert, du findest seinen Kanal hier Video
23.10.2023 Python
15
Stell dir vor, du würdest in deinem Freundeskreis einmal fragen: Welche Programmier-Sprache kennt ihr? Möglicherweise würde die Antwort „Python“ oftmals als erstes genannt werden. Python gilt als sehr beliebt und relativ einfache Einsteiger-Sprache. Doch wie lernt man diese Sprache am besten? Und vor allem, was kann ich damit eigentlich machen?
Was kann man mit Python so machen? Video ( 90 min)
Der Senf
Henry´s Senf - Kommentar zum Thema Python
Python
Python ist sehr beliebt, weil diese Programmiersprache allgemein als sehr einsteigerfreundlich gilt. Doch was braucht man überhaupt, um cool mit Python durchzustarten? Manchmal ist Programmieren wie Kuchen backen. Du brauchst ein Rezept, ein Plan, wie kannst du starten, damit du ein cooles Ergebnis erreichst? Willst du einen Apfelkuchen backen kaufst du dir auch keine Erdbeeren um den Kuchen zu belegen oder? – Ähnlich ist es auch beim Erlernen einer Programmiersprache, du brauchst ein cooles Werkzeug, also eine Umgebung wo du deinen Code auch reinschreiben kannst.
Hilfe wo schreibe ich meinen Python Code rein?
Wenn du mit Python cool durchstarten möchtest, so kannst du dir aus dem Internet „Pycharm“ downloaden. Am besten die Community-Edition, denn diese ist kostenlos. Pycharm, ist die IDE from Python. Mit Python kannst du vieles machen. Ich möchte dir hier ein paar coole Beispiele nennen und nach welchen Techniken du suchen musst, falls du dich hier mal ausprobieren möchtest. Falls du Python erst mal kurz ausprobieren willst, so gibt es auch kostenlose Online-Compiler im Netz, wo du dich einfach mal ausprobieren kannst. Online-Compiler. Das ist ziemlich cool, wenn du mal kurz was testen möchtest. Langfristig würde ich dir allerdings Pycharm schon empfehlen. Eine weitere Möglichkeit Python mal kurz zu testen, hast du auf der Webseite „w3school„. Diese Webseite ist super, weil du dir hier auch viele Beispiele anschauen kannst und selbständig ausprobieren kannst. Die Seite ist aber auf Englisch. Schulhof-Programmierung hat deshalb ein Video gemacht auf Deutsch, so dass du hier keine Probleme hast, es dort auch auszuprobieren, falls dein Englisch noch nicht so gut ist. Das Video findest du unten verlinkt. Sehr hilfreich ist auch, wenn du dir vor der Installation ein youtube-Video anschaust, auf was du bei der Installation von Python alles achten musst. Such einfach auf youtube „Download Pycharm Tutorial „.
Hilfe – Ich blick nicht durch, wie w3 school funktioniert ?
Wenn du erst mal keinen Bock hast irgendwas zu installieren, dann geh auf die Webseite w3schools, dort kannst du Python üben oder auch HTMl üben oder andere Techniken und diese dort ausführen, ohne dass du zunächst etwas installieren musst. Unten findest du ein Video, wie diese Plattform funktioniert, falls du in Englisch nicht so fit bist.
Hilfe, ich habe noch nie im Leben mit w3 schools gearbeitet. Wie funktioniert die Plattform? Video ( Deutsch)
Was kann man mit Python so alles machen?
Zu den einzelnen Techniken und was man mit Python so alles machen kann, wurde auch ein Video angefertigt, das du dir in Ruhe ansehen kannst. Aber hier mal ein paar Beispiele
Python im Backend
Python kann oft genutzt werden im Backend, spannende Techniken sind hier Python and django oder Python and Flask. Eine sehr interessante Technik in Python ist, „Python und Tkinter“. Tkinter ist eine sogenannte „gui“, (graphical-user-interface). Was bedeutet das? Praktisches Beispiel: Wenn du irgend ein Programm öffnest, so hast du eine sogenannte Programm-Oberfläche, zum Beispiel wenn du Word, oder etwas anderes öffnest. Mit Python kannst du „Programm-Oberflächen programmieren“. Eine andere ähnliche Technik ist PyQt5.
Mit Python und „Plotly“ kannst du Diagramme erstellen. In Python kannst du sogar HTML Code ausführen. Die Technik: Pyscript, falls du das mal irgendwo liest. Näheres dazu findest du hier auf der Pyscript Webseite.
Falls du Python lernen möchtest, schau auf youtube, dort findest du endlos viele Videos darüber. Gib einfach in die Suche „Python für Anfänger“ ein und du wirst fündig. Schulhof-Programmierung hat dir hier auch noch ein paar Links zusammengestellt, wenn dich das Thema Python interessiert.
Spezieller Tipp:
Sollte man Python als erste Programmier-Sprache wählen?
Die Antwort… Es kommt darauf an. -.) Wenn du in den Bereich der Web-Programmierung möchtest, ist es eigentlich ratsamer, erst mit Frontend-Techniken einzusteigen und diese zu lernen. Lade dir Visual-Studio-Code runter, und lerne HTML, CSS, Java-Script – später React.Js, oder Vue.js oder Angular. Und danach erst in den Bereich des Backends einzusteigen. ( Zum Beispiel dann gezielt Python and Django zu lernen).
Eine häufige Frage, die in vielen Programmiergruppen gestellt wird, ist sicherlich die Frage: Kann man mit Python auch Spiele programmieren? Die Antwort: Ja, obwohl Python keine klassische Schwerpunkt-Sprache ist für die Spiele-Entwicklung, aber es ist möglich. Schau auf youtube in der Suche einfach nach : Python und Ursina – oder Python und Pygame und du wirst fündig-.) Auf den gesamten Bereich der Spiele-Entwicklung werde ich in einem extra Beitrag eingehn… Viel Spaß mit Python.
22.10.2023 Surf-Tipp – Open- Roberta- Lab
14
Das Fraunhofer – Institut entwickel Open-Roberta-Lab homepage
22.10. 2023 – Ausbildung – als was bewerben?
13
Derzeitig gibt es 4 verschiedene coole Richtungen. Der Klassiker mit Schwerpunkt Programmierung ist sicherlich der Fachinformatiker für Anwendungsentwicklung. Dann gibt es noch den Fachinformatiker für Systemintegration, den Fachinformatiker für Daten-Prozess-Analyse und den Fachinformatiker für digitale Vernetzung. mehr
Wann wird der Prüfungsraum endlich wieder freigeschaltet?
Der Prüfungs-Raum mit alten Code-Klassenarbeiten & Prüfungen wurde zum Üben heute freigeschaltet und neu überarbeitet. Die Programmierhexe Nadja hat sich aus dem Gesamtkonzept verabschiedet. Aber alle Aufgaben von ihr haben wir trotzdem online gelassen, da diese sehr anfängerfreundlich sind. Was ist mit den Programmier-Lösungen? – Keine Bange, die gesamten Video-Lösungen sind natürlich auch geschaltet, falls du nicht weiterkommst. Prüfungsraum
22.10.2023 Programmier-Lernplan erstellen nur wie?
11
Wenn du dir programmieren selber beibringen möchtest, solltest du versuchen dir ein Zeitraster zu setzen und vor allem genügend Zeit einzuplanen. Programmieren zu lernen ist keine Sache, die man mal eben in einem Monat kann. Im englischen wird oft von einer sogenannten “ Roadmap“ gesprochen in der Programmierung, was soviel bedeutet, wie im Kontext: Was soll ich Schritt für Schritt an Techniken lernen?… Die Plattform „Freecodecamp“ mit über 8 Millionen Follower hat heute ein neues Video herausgebracht zum Thema: Was soll man in der Frontend-Entwicklung lernen? ( HTML, CSS, Java-Script) Das Video findest du hier für das Jahr 2024. Video(englisch)
Ein großes Problem ist, dass viele sich nicht genügend Zeit nehmen. Programmieren lernt man nicht mal eben kurz in 1 Monat, sondern eigentlich ist es lebenslanges Lernen. Typische Fehler, die du am Anfang vermeiden solltest
a) Gib niemals auf, auch wenn es hart wird
b) Lerne kontinuierlich und lerne projektbezogen. Ein guter Einstieg ist, wenn du mit HTML, CSS, Java-Script beginnst, später mit React, or Vue.js, or Angular lernst zu arbeiten. Du brauchst dazu einen Quelltext-Editor. Lade dir dazu Visual-Studio-Code runter
c) Ein weiterer Fehler ist, das sogenannte „Programmier-Hopping“. Du fängst mit java-script an, findest das ganze aber zu schwer und bereits nach 3 Wochen fängst du plötzlich an Python zu lernen, nach wieder 1 Monat denkst du: Ach das passt irgendwie nicht, ich glaube die Programmiersprache C ist einfacher zu lernen. Lerne lieber eine Sprache richtig gut und bleib da dran, auch wenn es schwierig wird. Wenn du hergehst und überall etwas ausprobierst, so kannst du am Schluss nur überall ein bißchen was, aber hast letztendlich um es hart zu sagen, von nichts Ahnung.
d) Es ist ratsam, ein Lernplan zu machen. Wenn du noch in der Schule bist oder bereits im Beruf stehst. Die Zeit ist oftmals knapp. In dem kleinen und einfachen Excel-Planer kannst du gezielt einplanen, wann du was lernen willst. Auch kannst du eintragen, wieviel Zeit du benötigst und das beste, am Ende des Monats kannst du in deinem Lernplan sehen, wieviel Zeit du investiert hast und siehst deinen Fortschritte. Beispielsweise kannst du dir vornehmen, dass du in der Woche 15 – Stunden coden lernst und dann gezielt einplanst, wann du das machen möchtest und welche Übungen du machen möchtest. Du kannst dazu auch unsere kostenlosen Prüfungen und Klassenarbeiten versuchen zu lösen. Diese sind alle mit Video-Lösungen, was ein großer Vorteil ist. Du findest diese unter dem Link Prüfungen
e) Was bedeutet projekt-bezogen zu lernen? Ein Projekt ist zum Beispiel das Coden einer kleinen und einfachen Webseite mit HTML, CSS und Java-Script und diese dann zu veröffentlichen, oder eine kleine Web-App zu coden. Vieles findest du auf Youtube, oder schau mal auf die Web-Plattform w3school. Solltest du Schwierigkeiten im Code haben, kannst du auch auf stackoverflow gehen. Es ist ratsam, dein Problem, das du vielleicht hast, auf englisch zu googeln, du gelangst so schneller ans Ziel. In der Programmierung ist eigentlich alles auf Englisch.
f) Vernetz dich in Programmiergruppen auf Facebook, geh in Foren oder gründe eigene Gruppen. Es macht dann einfach noch mehr Spaß. Du kannst auch in sogenannte „Coderdojos“ gehen, das sind lokale Programmier-Gruppen, diese gibt es in vielen Städten in Deutschland. Google einfach mal das Wort „Coderdojos Deutschland“ und du wirst sicherlich fündig.
21.10.2023 Anfänger- Lern-Gruppen : Code austauschen mit Freunden nur wie?
10
Deine Oma oder Mutter zu fragen, ob Sie dir beim Programmieren helfen kann ist oftmals keine gute Idee…
Ein großes Problem für Anfänger ist es , wenn du anfängst zu programmieren, dass viele nicht so richtig wissen, wie Sie Ihre Programmier-Reise eigentlich starten wollen, weil du vielleicht erst mal gar niemand kennst, der deine Programmiersprache, die du gewählt hast beherrscht. Deine Mutter, Oma, oder deine Schwester zu fragen ist oftmals keine gute Idee … -.) Auch einen Programmier-Mentor zu finden, ist nicht einfach. Ideal ist es natürlich wenn du jemand kennst, der in der Software-Branche arbeitet, der deinen Code anschaut und mit seiner Expertise deinen Code korrigiert. Du kannst natürlich in die unzähligen Facebook-Gruppen gehen, die es gibt, aber noch besser ist es oftmals, zusätzlich vielleicht eine eigene Lerngruppe zu schalten. Auch über Github kannst du natürlich Code teilen oder anderen zur Verfügung stellen.
Mit Chips und Cola im stillen Kämmerleincoden?
Wichtigster Punkt, wenn du startest: Vernetz dich unbedingt! Verkriech dich nicht mit Chips und Cola ins stille Kämmerchen, sondern vernetzt dich in Gruppen, Foren, die sich mit Programmierung beschäftigen und tausch dich aus. Schnell wirst du merken, dass andere vielleicht die selben Anfangs-Probleme haben wie du.
2. wichtigste Regel: Bleib unbedingt dran, egal wie hart es wird und gib nie auf!
Hier wurden einige Möglichkeiten erklärt und in den Videos erfasst. Vielleicht helfen diese dir weiter.
Video 4 Wie lege ich ein Github-Repository an, um meinen Code dort hochzuladen?
Tipp: Einstieg in die Web-Entwicklung / Frontend-Entwicklung
Tipps: Lerne HTML-CSS-Java-Script als Einsteiger
Der Senf
Henry´s Senf – Nr. 1 Kommentar
Kommentar: Henry gibt seinen Senf dazu
Henry´s Senf Nr. 1 – Kommentar
Zunächst mal kurz ein Begriff: Was ist Frontend-Entwicklung überhaupt? Einfach erklärt, das Frontend ist das was du siehst auf einer Webseite… Die Bilder, der Text ect… Es gibt auch das Backend, das ist das, was du nicht siehst,. Auch hierfür gibt es spezielle Sprachen.
Für was benötigt man HTML, CSS, Java-Script? – Einfach erklärt. Wenn du z. B. eine coole Webseite coden möchtest, brauchst du zunächst einen sogenenannten Code-Editor, oder Quelltext-Editor. Häufig genutzt wird hier Visual-Studio-Code mit dem Live-Server. In diesem Editor kannst du dein Programm Zeile für Zeile coden. HTML ist eine Markup-Sprache und keine Programmiersprache, sie bildet praktisch die Struktur deiner Webseite. Mit CSS, das ist eine sogenannte Stylesheet-Sprache, hier bestimmst du, wo sollen deine Bilder hin, wie soll der Hintergrund deiner Webseite aussehen etc. Dann hast du als 3. noch Java-Script. Diese Sprache ist dafür da, damit du Funktionen schreiben kannst und sie ist da für das Dynamische, oder wenn du etwas berechnen willst, oder etwas automatisiert mit einer Funktion ausgeben möchtest. Java-Script ist sehr wichtig im gesamten Web und eine der wohl meistgenutzten Sprachen in der Webentwicklung und eigentlich fast auf jeder Webseite irgendwie zu finden. Diese 3 Techniken sind ideal um in die Programmierung einzusteigen.
Schritt 2 Frameworks und Bibliotheken ( im Frontend)
Als Schritt 2 wenn du oben genannte Techniken cool beherrscht, solltest du dich mit speziellen Bibliotheken oder Frameworks auseinandersetzen. Wichtig ist hier sicherlich React.js, ( Bibliothek), Vue.js, or Angular Framework. Frameworks sind sogenannte “ Gerüste“.
Eine wichtige Sache, mit der du dich beschäftigen musst ist, dass du lernen musst, wie man eine Webseite responsive gestaltet. Was zum Teufel heißt das? Wenn du ein Handy hast, oder ein Tablet hast und ein Laptop hast, so ist der Bildschirm natürlich unterschiedlich groß´. Dein Handy steckst du cool in deine Hosentasche, mit deinem Laptop dürfte das schwierig werden-.) Das heißt, durch die unterschiedlichen Bildschirmgrößen musst du lernen deinen Code so zu schreiben, dass er sich an die jeweiligen Geräte anpasst. Hierzu gibt es spezielle Techniken, die du ebenfalls drauf haben solltest.
Beachtest du das nicht, so kann es sein, dass deine homepage vielleicht cool aussieht auf deinem Laptop. Aber wenn dein Kumpel die homepage aufruft auf seinem Handy, oder Tablet, diese völlig verschoben oder schlecht dargestellt wird.
Hier einige Techniken, mit denen du dich ebenfalls beschäftigen solltest: CSS-Grid – CSS-Flexbox, Media-Query- Tailwind / Bootstrap
Zum Schluss noch kurz ein paar Begriffe, die du kennen solltest, wenn du cool starten willst
Frontend – Entwicklung: Ist das was du siehst auf einer Webseite – Häufige Techniken, HTML, CSS, Java-Script – React.js, Vue.js- Angular
Backend ist das was du nicht siehst: zum Beispiel PHP und andere
Achtung!
Was mir auch noch aufgefallen ist, dass in vielen Anfänger-Gruppen Java und Java-Script in ein Suppentopf geschmissen wird.
Lies mich - Klick mich Aufgaben-Stellung - Prüfung vom 19.10.2023
Aufgabe a
Programmieren Sie einen einfachen Wochen-Dienstplan nach der Skizze unten. Es soll das Datum, Schicht, Mitarbeiter-Name, sowie die Stunden automatisiert zusammengerechnet werden. Außerdem sollte der Plan über eine Lösch-Taste oder einer ähnlichen Funktion verfügen, dass wenn sich der User verschreibt, die gesamte Zeile gelöscht werden kann.
Aufgabe b
Ist es möglich, den Code, auch in eine WordPress-Webseite einzufügen. Wenn ja, beschreiben Sie den Vorgang. Wie würden Sie vorgehen, was sollte man beachten?
Aufgabe c
Welche technischen Details müssten Sie zusätzlich im Code anbringen, damit aus der einfachen Webseiten – Anwendung eine sogenannte Web-App wird?
Coden Sie mit HTML- CSS und Java-Script, oder einer anderen Technik Ihrer Wahl.
9 – Special
Prüfung – Screenshot – Wie soll das System ungefähr aussehen?
Alle älteren Prüfungen, Klassenarbeiten und Lösungen findest du natürlich im Prüfungsraum
Vorsicht bei ARRAYS!!
Was dir niemals passieren sollte…
8 – special
Zählst du in einem Array falsch, kassierst du 0 Punkte…
Zählen in java-Script
Der Fall: In der letzten Stunde wurde ein Kurz-Test geschrieben. Die Aufgabe war eine Aufgabe in Java-Script und der Problematik mit einem Array ( begrenzten Bereich), im Code zu arbeiten. Susanne hat alles richtig, sie hat 1,0, weil sie richtig gezählt hat…. Franky hat 5,0, weil er wohl nicht zählen kann? Merke: Beginne in der Programmierung vor allem, wenn es um Arrays geht, immer bei „0“ an zu zählen und nicht bei der Zahl 1, denn sonst hast du alles falsch ! Schulhof-Programmierung hat dazu ein Video erstellt. Die Geisterbahn und die Sache mit dem Array: Video-Geisterbahn (27 Minuten)
Webseiten-Projekt anlegen – nur wie eigentlich? ( VS-Code)
Die unangenehme Situation: – Das Telefonat – Der cholerische Chef
7
Unangenehme Situation – Der Chef schlecht gelaunt
Der Fall: Stell dir vor, du arbeitest in einem kleinen Büro, wo es noch keine Webseite gibt. Dein Chef ruft plötzclich an und sagt: Hey, kannst du nicht mal kurz in Visual-Studio-Code ein Webseiten Projekt anlegen, so dass ich nachher gleich loslegen kann. HTML, CSS und Java-Script. „Du weißt Bescheid“ und ehe du noch ein paar Fragen stellen kannst und ihm erklären willst, dass du davon überhaupt kein Plan hast, legt er einfach auf. Wie also gehst du das ganze an? Eine wichtige Sache im Bereich Coden ist auf jeden Fall, dass du grob wissen solltest, wie man ein Webseitenprojekt anlegt , bzw. ein Webseiten Projekt vorbereitet und die einzelnen Files dazu anlegen kannst und auch schon den Live-Server für deinen Chef schaltest. Und wenn du dies im Schlaf kannst, ist es noch besser-.) Video ( 22 min)
6. Stell dir vor, du willst irgendwo aufgenommen werden, dir wird diese Bootcamp-Aufgabe gestellt:
6
Bootcamp – Wenn du ins Schwitzen kommen könntest … Die Sache mit den Farben…
Wie geht das?
Diese Aufgabe wurde einem Facebook-User gestellt, der in einem Bootcamp aufgenommen werden wollte. Schulhof-Programmierung hat natürlich auch versucht das Ding zu coden. Es war kein Problem, aber ein paar Fallstricke gibt es schon, die du beachten solltest, damit der Code läuft, die Farben alle richtig angezeigt werden und du auf Schwarz in Sekundenschnelle umschalten kannst im Code…. Vielleicht begegnet dir ja mal so eine Aufgabe irgendwo, check das Video und du bist auf jeden Fall uptodate und räumst alle Punkte ab-.)
Viel Spaß beim Testen-.)
Kriegst du das problemlos hin? Bootcamp-Aufgabe Video (35 min)
18.10.2023 Der Fall- Das Autohaus – Fritz Mustermann ( ÜBUNG)
Das krasse Problem – Ein Rabatt-Rechner coden und in eine WordPress-Webseite einfügen
Aufgabe mit Lösungs-Video
5
Klassenarbeit: Die homepage von Fritz-Mustermann.
Der Fall: Fritz Mustermann betreibt ein großes Autohaus mit einem Schrottplatz. Um sein Geschäft etwas anzukurbeln, möchte er auf seiner homepage einen kleinen Rabatt-Rechner eingebaut haben, wo der User, der ein Auto bei ihm kauft, den Preis eingeben kann, die Prozente und dann sofort in Sekundenschnelle der Rabatt ausgerechnet wird. Wie würdest du so eine Aufgabe angehen? Der kleine Rechner soll ungefähr so aussehen, wie in der Mitte dargestellt. Lösung gibt es demnächst, aber versuch es erst mal selber-.)
Die Sache mit dem Komma und dem Punkt und der Code-Schreibweise.
Eine Sache die in unserem Beispiel auch noch nicht gelöst wurde, ist die, dass im Englischen mit einem Punkt statt mit einem Komma gearbeitet wird. Natürlich kannst du es auch so coden, dass man die Zahlen je nach Land, in Komma eingegeben werden, allerdings musst du dies dann direkt im Code verändern.
TECH STACK: HTML- CSS- JAVA-SCRIPT ….. Du kannst es natürlich auch anderst lösen.
Schritt 1: Der User trägt den Preis ein, in unserem Beispiel 20 000 Euro. Er trägt dann 8.5 ein und klickt auf berechnen. Der Rabatt wird automatisiert abgezogen von den 20 000 Euro. Es bleiben also noch 18300 Euro, die er zu bezahlen hätte. Wichtig ist natürlich auch, dass du eine Lösch-Taste mit einbaust im Code, damit er alle Eingaben auch sehr schnell bequem löschen kann.
Screenshot – ungefähres Aussehen des Rabattrechners
In dem 30 Minuten-Lösungs-Video wird dir gezeigt, wie du den Code „im groben“ entwickelst, das Projekt anlegst, welches Tech-Stack genutzt wird und welche Problematiken auftauchen könnten. Im zweiten Teil des Videos zeige ich dir, wie du den selber geschriebenen Code in eine WordPress-Webseite einfügen kannst und was du dabei unbedingt beachten solltest.
Praktisches Beispiel: Du bist Anfänger und im Laufe der Zeit fängst du immer neue kleine Projekte an zu coden. Schnell kannst du da dann die Übersicht verlieren. Auf Github hast du die Möglichkeit ein kleines Repository ( Verzeichnis) anzulegen, wo du all deinen Coden hochladen kannst und so in Sekundschnelle auch zugreifen kannst.
Wie kannst du einfach und schnell in 8 Minuten einen Github-Account anlegen, wo du deinen Code dann hochladen kannst, direkt von Visual-Studio-Code? Video ( 8 Minuten)
Die ersten Fragen mit Lösungen- Hättest du diese gewußt?
Frage 1 Frank behauptet, java ist nur eine Abkürzung von java-Script. Stimmt das?
Antwort: Nein, das ist „grottenfalsch“. Java und Java-Script sind 2 unterschiedliche Programmier-Sprachen.
Frage 2 Auf einer coolen Party lernst du Franky kennen. Er behauptet er ist Frontend-Entwickler. Mit welchen Programmier-Techniken denkst du, wird er sich hauptsächlich beschäftigen?
Wenn du in die Programmierung einsteigen willst, so ist Frontend-Entwicklung sicherlich eine sehr gute Wahl. Franky wird sich möglicherweise mit folgenden Techniken beschäftigen. HTML, (HTML ist keine Programmiersprache, sondern eine Markup-Sprache), das ist für die Struktur zum Beispiel einer Webseite. Er wird auch mit CSS arbeiten, dies ist eine Stylesheet-Sprache. Damit kannst du den Style und das Layout bestimmen einer Webseite. Du bestimmst zum Beispiel, soll das Bild in der Mitte sein, oder wie soll der Hintergrund einer Webseite aussehen. Eine der wichtigsten Sprachen im gesamten Web-Bereich ist sicherlich Java-Script. Damit schreibst du Funktionen. Möglicherweise wird er sich auch mit bestimmten Frameworks / Bibliotheken beschäftigen. Hier gibt es 3 wichtige zu nennen. React.js ( Bibliothek), Vue.js, ( Framework), oder Angular ( Framework). Außerdem wird er sich wohl mit sogenannten responsiven – Web-Techniken beschäftigen müssen. Responsive heißt, dass die Code-Darstellung auf verschiedenen Endgeräten, wie Laptop, Handy, Tablet unterschiedlich aussehen. Das heißt es gibt bestimmte Techniken, so dass deine Webseite eben auch auf dem Handy cool dargestellt wird, oder auf dem Tablet. Hier wären folgende Techniken zu nennen: Tailwind, Bootstrap, Css-grid- Css-flexbox, oder Media-Query-Technik. Du findest alle Techniken, die hier in der Antwort gegeben werden, auf youtube. Schau dir dazu einfach Videos an. Frontend ist das, was du auf der Webseite alles siehst…. also die Bilder, der Text auf der Webseite etc…. Und Backend ist das Gegenteil, das ist das, was du nicht siehst. Es gibt auch spezielle Backend-Techniken ( Server-site) Hier zu nennen ist zum Beispiel PHP / laravel – Python and Django, – Python and Flask, etc…
Frage 3 Auf einer Webseite befindet sich ein Bild mit einem Fisch im Meer. Das Bild ist auf der Linken Seite der Webseite. Du möchtest das Bild aber im Code in der Mitte der Webseite haben. Welche Technik nutzt du, um das Bild in die Mitte zu kriegen?
Die richtige Antwort wäre hier: Das machst du mit der Stylesheet-Sprache CSS
3
Instagram / Sonntags
Falls du auf Instagram bist, kannst du Schulhof-Programmierung natürlich gerne folgen. Sonntag Morgen gibt es seit neuestem immer ca. 2-3 Fragen zum Thema Programmierung, die du versuchen kannst zu lösen. Es sind einfache Fragen für Anfänger. Natürlich gibt es auch, meist ein paar Tage später dann immer die Lösungen, aber versuche diese erst mal selbst zu „knacken“ und zur Lösung zu kommen. Instagram Falls du nicht auf Instagram bist, kannst du natürlich auch die Folgen „Knack die Code-Nuss“ auf youtube anschauen, mit Lösungen und Punkte und schauen, wie gut du dich schon auskennst im Bereich Programmierung.
18.10.2023 Programmier- Sprachen – Wo kann ich den Code ausführen?
Wie gut kennst du dich aus mit Programmiersprachen und wo kannst du den Code eigentlich reinschreiben?
2
Problem: Anfänger- Wo kann ich eigentlich meinen Code reinschreiben?
Hilfe, wo schreibe ich eigentlich den Code rein und wie führe ich ihn aus?
Gestern gab es ein neues Video von Schulhof-Programmierung zum Thema: Programmiersprachen und wo kann ich überhaupt meinen Code reinschreiben? Das Video zeigt dir, welche Entwicklungsumgebung du für welche Sprache benötigst, wie du auch auf Handy Code ausführen kannst und welche Online-Compiler es gibt, um schnell und einfach Code auszuführen. Auch gibt es zwischenzeitlich viele Apps, die du einfach nutzen kannst. Programmier-Sprachen ( 45 min / Video )
Ein Bild einfügen nur wie eigentlich?
Wie fügst du ein Bild in den Code ein? – Das solltest du beachten!
1
Ein Bild in den Code einfügen. Wie geht das genau? Video ( 22 Minuten)
Der Senf
Henry´s Senf Kommentar
Wenn du Anfänger bist und kein Plan davon hast, wie man ein Bild in Visual-Studio-Code einfügt, dann solltest du dir dieses Video unbedingt anschauen. Auch lernst du dort natürlich auch wie du den Live-Server schalten kannst. Den Live-Server brauchst du, um zum Beispiel zu sehen, wie das Bild dann zum Beispiel auf der Webseite aussehen könnte. Hast du ein CSS – File angelegt, so kannst du natürlich zusätzlich auch bestimmen, wo soll denn dein Bild genau hin? In die Mitte, auf die linke oder rechte Seite zum Beispiel.
Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen
Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.
