Difference between revisions of "Text And Code: Alice's Adventures in Computerland"

From Publication Station
Line 16: Line 16:
# CSS grid
# CSS grid


'''Groups'''
'''Setup'''


During the first class we work in groups of 3. You will start with some pre-made files. Divide the tasks below.
During the first class we work in groups of 3.  
 
We will work in Visual Studio Code. [Download https://code.visualstudio.com/] and install Visual Studio Code.
 
To help you out with this project we have created some starter files.
# Go to the [https://gitlab.com/wdk-academy/text-and-code/ files]
# Click "Clone"
# Select "Visual Studio Code (SSH)"
# This will open the files in Visual Studio Code


'''Tasks'''
'''Tasks'''

Revision as of 12:10, 2 September 2022

Welcome to the course Text and Code.

In this series of classes from the Publication Station you will use code to load and layout large bodies of text on the web. The visitor of your online publication will be given the option to display the text in several ways.

We will also make the publication interactive, allowing the user to find, filter and highlight the text. As a final touch you will create animated SVG’s exported from Illustrator.

Screenshot website Alice's Adventures in the Undergound

Program

Class 1

Demos

  1. HTML/CSS/JavaScript
  2. WebScraper, CSV and JSON
  3. CSS grid

Setup

During the first class we work in groups of 3.

We will work in Visual Studio Code. [Download https://code.visualstudio.com/] and install Visual Studio Code.

To help you out with this project we have created some starter files.

  1. Go to the files
  2. Click "Clone"
  3. Select "Visual Studio Code (SSH)"
  4. This will open the files in Visual Studio Code

Tasks

1. Use the WebScraper.io extension to scrape Alice in Wonderland or any other book you like.

2. Add a CSS grid

3. Creating and adding images

  • Create images with Dall-E Mini
  • Add images via the `JSON` files

Class 2

Demos:

  1. Loading of fonts
    1. Using Google Fonts
    2. FontMap
  2. CSS filters and animations
  3. Adding content filters with JavaScript
  4. Adding a search

Class 3

Demos:

  1. Analyzing text
  2. Adding an index

Class 4

...

Class 5

...

Tools overview

Explore

- Tropy - Open-AI

Used during classes

- WebScraper - CSV2JSON - CSS Grid Garden - Dall-E Mini