frango

Antic, Carta, Fanton, Frasson, Tangredi - 3^CSA

1 / 29

il sito è disponibile su frangogamesinc.netlify.app

2 / 29

Come abbiamo fatto?

Tramite github ed netlify.

3 / 29

Cos'è github?

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.

wikipedia.org

4 / 29

Git vs. Github

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

wikipedia.org

5 / 29

Cos'è netlify?

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites.

wikipedia.org

6 / 29

la struttura del sitolive demo!7 / 29

com'è resa graficamente questa presentazione?

tramite remark. seguono due slide prese da lì...

8 / 29

What is it?

A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

Markdown formatting, with smart extensions
Presenter mode, with cloned slideshow view
Syntax highlighting, supporting a range of languages
Slide scaling, thus similar appearance on all devices / resolutions
Touch support for smart phones and pads, i.e. swipe to navigate slides

9 / 29

Why use it?

As the slideshow is expressed using Markdown, you may:

Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where As the slideshow is actually an HTML document, you may:
Display it in any decent browser
Style it using regular CSS, just like any other HTML content
Use it offline! As the slideshow is contained in a plain file, you may:
Store it wherever you like; on your computer, hosted from your Dropbox, hosted on Github Pages alongside the stuff you're presenting...
Easily collaborate with others, keeping track of changes using your favourite SCM tool, like Git or Mercurial

10 / 29

Etica del sito

il sito è costruito sul rifiuto del copyright, favorendo il free use, la pirateria etica e l’open source

11 / 29

HTML

12 / 29

CSS

13 / 29

14 / 29

15 / 29

16 / 29

17 / 29

Javascript

18 / 29

19 / 29

20 / 29

Javascript

21 / 29

Html segna punti

In queste slide verrà spiegata la realizzazione del codice per tenere i punti partita dopo partita.

contengono la scritta e il contatore del punteggio

22 / 29

CSS segna vittorie

id si da lo stile con #.

position absolute fa si che la loro posizione non vada a modificare quella di altri elementi. font family font testo

font size dimensioni testo

margin left dice che la scritta si trova al 45% della larghezza dello schermo (a partire da sinistra )

margin top 13% dell'altezza dello schermo a partire dall'alto

23 / 29

JS segna vittorie

Dichiaro due variabili per contare il numero di vittorie delle X o dei O.

Prendo altre due variabili e gli assegno un elemento dell’html con getElementById

24 / 29

Alla fine del codice aggiunto questo if, dove la variabile circleTurn può essere vera o falsa

se è vera allora hanno vinto le O: aumento di 1 il numero di vittorie e lo scrivo aggiungendolo al testo dell'html
se circleTurn è falsa allora hanno vinto le X, ripeto lo stesso procedimento fatto per le O.

25 / 29

Sound design26 / 29

Sound design

Ableton 😃

27 / 29

Live demo!!28 / 29

Grazie per l'attenzione! :329 / 29

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

frango

Come abbiamo fatto?

Cos'è github?

Git vs. Github

Cos'è netlify?

la struttura del sito

live demo!

com'è resa graficamente questa presentazione?

What is it?

Why use it?

Etica del sito

HTML

CSS

Javascript

Javascript

Html segna punti

CSS segna vittorie

JS segna vittorie

Sound design

Sound design

Live demo!!

Grazie per l'attenzione! :3

Help