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

From Publication Station
Line 72: Line 72:
## Inspect and find the "NLP" wrapper elements
## Inspect and find the "NLP" wrapper elements
## Change the CSS styling by using the weights in text
## Change the CSS styling by using the weights in text
# Check the Compromise JS llibrary
# Study NLP
## Read https://lizrush.gitbooks.io/algorithms-for-webdevs-ebook/content/index.html
### Write down in your own words what the algorithms can do
## Read the documentation at https://github.com/spencermountain/compromis
## Read the documentation at https://github.com/spencermountain/compromis
## Write down in your own words what this library can do
### Write down in your own words what this library can do
# Design your own project
# Design your own project
## Start sketching out your own projects
## Start sketching out your own projects

Revision as of 07:57, 20 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
  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 the arrow pointing downwards
    Gitlab-download-button.png
  3. Select "zip"
  4. This will download the files
  5. Unzip the files
  6. Open the folder in Visual Studio Code

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

This class you will practice the art of reading documentation by adding fonts, filters and animations. Next to this we practice reading and stealing code by adding filters (and a search) to your project.

  1. Add highlight functionality AND/OR a search
    1. Check out the example code in the /final folder
    2. Add highlight buttons AND/OR search field to your own project
    3. Create a nice looking menu with CSS Grid
  2. Make the grid responsive
    1. Check out the example code in the /final folder
    2. Change the CSS grid so that it is responsive
  3. Loading of fonts
    1. Pick some nice Google Fonts
    2. You can also use FontMap to explore Google fonts
    3. Read this documentation on implementation
    4. Add the fonts to your project
  4. Bonus: CSS filters and animations
    1. Read the filters documentation
    2. Read the animation documentation
    3. Add an animation to your own project

Class 3

Demos

  1. NLP
  2. Demo new code and how to use it

Tasks

  1. Use the newly created weights to show importance
    1. Inspect and find the "NLP" wrapper elements
    2. Change the CSS styling by using the weights in text
  2. Study NLP
    1. Read https://lizrush.gitbooks.io/algorithms-for-webdevs-ebook/content/index.html
      1. Write down in your own words what the algorithms can do
    2. Read the documentation at https://github.com/spencermountain/compromis
      1. Write down in your own words what this library can do
  3. Design your own project
    1. Start sketching out your own projects
    2. Discuss with Vincent and Gijs how to accomplish your idea

Class 4

...

Class 5

...

Tools overview

Explore

Used during classes