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

From Publication Station
Line 45: Line 45:
## [http://fontmap.ideo.com/ FontMap]
## [http://fontmap.ideo.com/ FontMap]
# CSS filters and animations
# CSS filters and animations
## Read the [filters documentation https://developer.mozilla.org/en-US/docs/Web/CSS/filter]
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/filter filters documentation]
## Read the [animation documentation https://developer.mozilla.org/en-US/docs/Web/CSS/animation]
## Read the [https://developer.mozilla.org/en-US/docs/Web/CSS/animation animation documentation]
## Add an animation to your own project
## Add an animation to your own project
# Adding content filters with JavaScript
# Adding content filters with JavaScript

Revision as of 07:53, 6 September 2022

Welcome to the course Text and Code.

In this series of classes from the Publication Station we 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 we work on creating animated SVG’s exported from Illustrator.

Screenshot website Alice's Adventures in the Undergound

Program

Class 1

Demos

  1. HTML/CSS/JavaScript
  2. CSS grid

Setup

During the classes we will work in groups of 3.

We will work in Visual Studio Code. Download 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
  5. Select a folder to place the files in

Tasks

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

  • Follow instructions on web scraping
  • Place the JSON into your web project

2. Add a CSS grid

  • Read the introduction on CSS_Grid and apply to your own website

3. Creating and adding images

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

Class 2

  1. Loading of fonts
    1. Using Google Fonts
    2. FontMap
  2. CSS filters and animations
    1. Read the filters documentation
    2. Read the animation documentation
    3. Add an animation to your own project
  3. Adding content filters with JavaScript
    1. Check out the example code and see how you can add this to your own project
  4. Optional: Adding a search
    1. Check out the example code and see how you can add this to your own project

Class 3

Demos:

  1. Analyzing text
  2. Adding an index

Class 4

...

Class 5

...

Tools overview

Explore

Used during classes

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Text_And_Code:_Alice%27s_Adventures_in_Computerland&oldid=8579’