Themen: Was bedeutet HTML? Was ist eine Programmiersprache? Wie mache ich meine eigene Webseite? Der zweistündige Workshop mit der Programmiererin Sophia Petrova bietet eine Einführung in Theorie und Praxis des Programmierens. In der ersten Stunde werden die Grundelemente der Web-Entwicklung vorgestellt und es geht darum, welche Funktionen am wichtigsten für den Bau einer Website sind. In der zweiten Stunde führt Sophia Petrova die Workshop-Teilnehmer:innen durch den Prozess des Bauens und Veröffentlichens einer eigenen Website. Anschließend gibt sie Tipps, wo man sich weiter über HTML und CSS, über Web-Entwicklung und Programmiersprachen informieren kann, welche Online-Kurse sich lohnen und wo es Arbeitsgruppen und Workshops zum Thema Programmieren gibt.

Sophia Petrova ist Softwareentwicklerin mit fünf Jahren Erfahrung im Bereich der Webentwicklung. Eine Vollzeit-Enthusiastin, angetrieben von Neugier und der Leidenschaft nützliche Produkte zu schaffen. Hat an einer Vielzahl von Projekten in verschiedenen Feldern mitgearbeitet, sowohl festangestellt als auch freiberuflich. Im Theater hat Sophia Petrova bei der Programmierung des Interface für die interaktive Hybrid-Produktion "Under Pressure" von Henrike Iglesias (September 2020, Sophiensaele Berlin) mitgewirkt.

// IN ENGLISH:

What is HTML? What is a programming language? How do I make my own website? The two-hour workshop with programmer Sophia Petrova offers an introduction to the theory and practice of programming. The first hour introduces the basic elements of web development and focuses on what features are most important for building a website. In the second hour, Sophia Petrova guides workshop participants through the process of building and publishing their own website. In the end, she offers further Resources to explore HTML & CSS, Web Development, Programming Languages such as Ruby and System Administration, tips for online courses, analog workshop programmes, study groups and events.

Sophia Petrova is a software developer with 5 years of experience in the area of web development. A full-time enthusiast driven by curiosity with a passion to create useful products. Worked on a wide range of projects in different domains as part of a company and as a freelance developer. In theatre, Sophia Petrova was part of the team programming an interface for the interactive, hybrid production "Under Pressure" by Henrike Iglesias (Sep. 2020, Sophiensaele Berlin).

Video-Aufzeichnung des englischsprachigen Workshops:

Sophia Petrovas Workshop-Präsentation mit Stichpunkten, Grafiken und vielen weiterführenden Links findet sich hier.

Timeline:

(4:00) Introduction

(11:00 )Sophia Petrova introduces herself

(15:00) Things to have in mind when you start programming

(20:00) Programming in theory

• 23:00 What is a programming language?
• 26:10 What is code?
• 27:30 Programming languages and their uses
• 34:00 Different types of applications
• 37:30 Web development dictionary
• 42:30 Types of websites (static / dynamic)

(45:30) Preparation for practical part of the workshop

• 45:30 Text documents vs. Text editors
• 48:00 How to make file extensions visible if they are not
• 49:30 The building blocks of a web page (HTML / CSS / Java Script)
  (Demonstration of how the components work by disabling them on a website – CSS provides all the styles, Java Script provides the buttons and functions)
• 55:40 HTML (HTML is not a programming language!)
• 58:30 CSS (Demonstration of how CSS influences the styling of a page – CSS Zen Garden, one page in different styles)

(59:30) Practical Part

• Create an html document in text editor (Sublime)
• Save it on your desktop and name it index.html
• Type „Hello World“ in it
• Click twice on it, it should be opened by your browser automatically
• You should see the words „Hello World“ in your browser
• Style the word „World“ as italic by adding the tags <i> before and </i> after in your document
• Refresh your browser, it should look like this now: Hello World
• In a new line in the Sublime doc, add a sentence introducing yourself: My name is …
• Refresh browser – where in the doc, you added a new line, in the browser, the two phrases are in one line
• Add a tag for the browser to recognize that you want to put the second phrase in a new line. <p> </p> Also, add a header tag to the first phrase <h1> </h1> Add the closing tag for the header after the closing tag for the italic style for „World“ </i>!
• Save, refresh browser. You should see two lines, the first one bold and in bigger letters
• Next step: the page gets a head and a body. Head: important invisible details (like title in the browser tab). Body: visible content (what we have created until now)
• Also, add an html tag: <html> before <head>, </html> after </body>
• In order to have a completely valid file, we need one more element on top of the opening <html>: <!DOCTYPE html> denotes the version of html we are using
• Next, we add style: CSS has marks for selector and attributes. Selector denotes the passage you want to add a style to, attributes denote the style you want to add
• We add CSS by copy & paste from the presentation (https://introduction-to-programming.herokuapp.com/ → go to contents (below left → site „Let's add CSS … finally“)
• The sentence "My name is ..." should be padded in a yellow colour field now
• Now we will put your page online. If you haven't already created a Github account, do so now. Go to github.com/new. Enter your user name.github.io in the field „Repository name“. Click the boxes public and Readmefile. Create the repository. Upload your Sublime doc (Add files → upload file)
• Enter the address yourusername.github.io in the address field of your browser. Your website should be visible and you can share it with your friends.

(01:42:30) Q&A and introduction to further resources (see presentation)

Hier geht es zur Übersicht aller Beiträge der Dokumentation des Zoom in Festivals