Zukunftstag 28.04.2016 – HTML – Die Sprache des Internets

View Github Repository Open presentation in a new window

subugoe-girlsday

See all presentation from subugoe-girlsday

Zukunftstag 28.04.2016 – HTML – Die Sprache des Internets

0 0

2016

On Github subugoe-girlsday / 2016

Zukunftstag 28.04.2016

  • HTML, die Sprache der Webseiten
  • CSS, ihr Make-Up
  • Javascript, ihr Motor
  • jQuery, coole Moves
  • Das Spiel

HTML

Die Sprache des Internets

  • Alle Seiten im Internet sind in HTML geschrieben.
  • HTML ist eine Auszeichnungssprache.
  • Ein Text besteht aus verschiedenen Bestandteilen wie z.B.
    • Seitenkopf
    • Seitenkörper, z.B. mit
      • Titel
      • Paragraph mit Text
      • Bild

Das HTML Grundgerüst

<!DOCTYPE html><html lang=de>  <head>    <title> Hier kommt Admin-Kram hin: Seitentitel, Scripte, CSS </title>  </head>  <body>      Hier kommt das Zeug hin was man später auf der Webseite sieht  </body>

Das HTML für unser Spiel

<!DOCTYPE html><html lang=de>    <head>      <meta charset="utf-8">      <title>Mein erstes sebstgeschriebenes Spiel</title>      <script src="jquery.min.js"> <!-- hier kommt Javascript und jQuery hin --> </script>      <style> <!-- hier kommt CSS hin --> </style>    </head>    <body>      <img id="snake" src="snake.svg">    </body></html>

Ein paar Tags zum Rumspielen

<p>Eigener TextText für den Abschnitt (Paragraphen)<p><ul>   <li>Listenelement 1   <li>Listenelement 2   </ul><img src="bildname.jpg">

CSS

Das Make-Up des Internets

HTML ist nur eine Auszeichnungssprache, das heißt es erzählt dem Browser nur "das ist eine Überschrift", und "das ist ein Text". Aber es sagt nicht wie diese Elemente auszusehen haben.

Diesen Part übernimmt CSS.

Mit CSS kann man sich die HTML-Tags schnappen und ändern

z.B. den Hintergrund der Seite einfärben:

body {
background-color: lightblue;
}

Oder den Hintergrund des divs mit der id="snake"

#snake {
background-color: red; 
}

Wo schreibt man das css hin?

css kann zum Beispiel auf der Webseite stehen, eingeschlossen in die <style>-Tags: 

<style>
    body {
    background-color: lightblue;
    }
    #snake {
    background-color: palegreen;
    }
</style>

Etwas CSS zum rumspielen

// Alle p-Tagsp  {  background-color: red;  font-style: italic;  font-weight: bold;}// das p-Tag mit der ID "besonders" (<p id="besonders">Besonderer Text</p>) #besonders  {  font-size: 70%;  color: blue;}

JavaScript

Der Motor des Internets

Mit JavaScript können sich die (Web)Seiten verändern während man sie anschaut.

JavaScript schreibt man innerhalb des<script></script> Tags.

Funktionen einbinden

Meist benutzt man eine sogenannte Library - eine Sammlung von Funktionen in einer Datei. Wenn man diese Datei in die eigene Webseite einbindet kann man deren Funktionen nutzen.

jQuery Einbinden

jQuery ist eine der populärsten JavaScript-Libraries. Nachdem man die jQuery-Datei aus dem Internet heruntergeladen hat kann man sie im Header seiner Webseite einbinden.<script src="jquery.min.js "></script>

Das Wichtigste beim Programmieren

Computer sind total pingelig!!! Leerzeichen an der falschen Stelle oder ein Groß- statt eines Kleinbuchstaben kann das Programm kaputt machen

Ein guter Teil der Zeit beim Programmieren geht mit Debugging drauf

Debugging bei der Webprogrammierung

Im Firefox-Menü unter "Entwicklerwerkzeuge" "Webkonsole" aufrufen.

Dann erscheint ein Fenster unter der Webseite in der man mit der Webseite interagiern (sprechen) kann.

Das Handwerkzeugs von jQuery (und den meisten anderen Sprachen)

  • Werte können in Variablen gespeichert und verändert werden
  • Dinge passieren in Schleifen
  • Es können entweder/oder Abfragen gemacht werden
  • Es gibt vordefinierte Funktionen
  • Mehrere Schritte können in eigenen Funktionen zusammengefasst werden

Vordefinierte Funktionen

alert("Hallo Welt");

1+3;

Variable

var ergebnis = 3;alert(ergebnis); ergebnis = 5;alert(ergebnis);

Schleife

for (var i = 0; i < 3; i++) {  alert("Hallo, ich nerve jetzt ein bischen");}

Abfrage

var ergebnis = 1;if (ergebnis == 1) {  alert("Stimmt!");} else {  alert("Stimmt nicht!");}

Funktion

var meldeDich = function () {  var ergebnis = 1+3;  alert(ergebnis);} meldeDich();

jQuery

Stellt eine ganze Reihe nützlicher Funktionen zur Verfügung

Vor allem zum Verändern von Seitenelementen

Spezielle jQuery Funktionen

$("p").css("background-color","blue"); $("p").html("hallo Leute"); $("p").append("

Und hier kommt noch mehr Text

");

Ausführen nachdem alle Elemente geladen sind

<script src="jquery.min.js">   $(function() {     // Das hier wird getan nachdem die Seite geladen ist   }</script>

Beschreibung

  • Ein Ding, z.B. eine Schlange erscheint irgendwo auf dem Bildschirm.
  • Wenn es in einer bestimmten Zeit angeklickt wird erscheint woanders wieder und das Spiel geht weiter
  • Wenn es nicht rechtzeitig angeklickt wird ist das Spiel aus
  • Zum Beispiel so:

Was brauchen wir?

  • Das Bild
  • Checken, ob es innerhalb der Zeit angeklickt wurde
  • Wenn ja:
    • Bild versetzen
    • Zeit neu starten
  • Wenn nein, Spiel zuende

Das Bild (mit HTML):

<img src="bilddatei.src" id="snake">

An bestimmten Ort setzen (so würde man es mit css machen:)

.schlange {
position: absolute;
top: 100px;
left: 100px;
}

aber wir wollen die Posizion ja ändern können+

die setzen wir also mit jQuery

$("#snake").css("top","100px").css("left","100px");

Halt! Es soll ja ein zufälliger Ort auf dem Bildschirm sein!

x-Wert: Math.random()*window.innerWidth/2
y-Wert: Math.random()*window.innerHeight/2

und jetzt alles zusammen:

$("#snake").css("top",Math.random()*window.innerHeight/2).css("left",innerWidth/2);

Das Spiel

  • Das Bild einer Schlange an einem zufälligen Ort
  • Verschwindet, wenn angeklickt
  • Wenn angeklickt war nach einer Sekunde woanders anzeigen

Bild an zufälligem Ort