Difference between revisions of "Text And Code: Alice's Adventures in Computerland"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
| Line 7: | Line 7: | ||
=== Class 1 === | === Class 1 === | ||
'''Demos | '''Demos''' | ||
# Intro HTML/CSS/Javascript | # Intro HTML/CSS/Javascript | ||
# WebScraper, CSV and JSON | # WebScraper, CSV and JSON | ||
| Line 13: | Line 13: | ||
'''Groups''' | '''Groups''' | ||
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. You will start with some pre-made files. Divide the tasks below. | ||
'''Tasks''' | '''Tasks''' | ||
# Use the [https://www.webscraper.io/ WebScraper.io] extension to scrape [https://www.gutenberg.org/files/11/11-h/11-h.htm Alice in Wonderland] or any other book you like. | # Use the [https://www.webscraper.io/ WebScraper.io] extension to scrape [https://www.gutenberg.org/files/11/11-h/11-h.htm Alice in Wonderland] or any other book you like. | ||
## [[Web_scraping:Export from WebScraper to CSV]] | |||
## Transform `CSV` to `JSON` with [CSV2JSON](https://csvjson.com/csv2json) | |||
- CSS grid | - CSS grid | ||
- Add CSS grid and create a layout | - Add CSS grid and create a layout | ||
Revision as of 11:28, 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.
Program
Class 1
Demos
- Intro HTML/CSS/Javascript
- WebScraper, CSV and JSON
- CSS grid
Groups
During the first class we work in groups of 3. You will start with some pre-made files. Divide the tasks below.
Tasks
- Use the WebScraper.io extension to scrape Alice in Wonderland or any other book you like.
- Web_scraping:Export from WebScraper to CSV
- Transform `CSV` to `JSON` with [CSV2JSON](https://csvjson.com/csv2json)
- CSS grid
- Add CSS grid and create a layout - Play [CSS Grid Garden](https://cssgridgarden.com/)
- Creating and adding images
- Create images with [Dall-E Mini](https://huggingface.co/spaces/dalle-mini/dalle-mini) - Add images via the `JSON` files
Class 2
Demos: 1. Loading of fonts
1. [Using Google Fonts](https://fonts.google.com) 2. [FontMap](http://fontmap.ideo.com/)
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](https://tropy.org/) - [Open-AI](https://openai.com/)
Used during classes
- [WebScraper](https://www.webscraper.io/) - [CSV2JSON](https://csvjson.com/csv2json) - [CSS Grid Garden](https://cssgridgarden.com/) - [Dall-E Mini](https://huggingface.co/spaces/dalle-mini/dalle-mini)
