User:Bnstlv/prototyping: Difference between revisions

From XPUB & Lens-Based wiki
Line 108: Line 108:
[https://pad.xpub.nl/p/SI19-prototyping-4 Pad: HTML/CSS 2.0: flex]<br>
[https://pad.xpub.nl/p/SI19-prototyping-4 Pad: HTML/CSS 2.0: flex]<br>


Our fourth prototyping session explored the HTML and CSS in more detail. We talked a lot about styling and what CSS can do for us. It was enjoyable to see how [https://devdocs.io/css/animation animations] and [https://devdocs.io/css/transition transitions] are happening and look at some very cool examples.


=== <span style="color: white; font-family: Monaco; color: white; background-color: black;> Prototyping 05 </span>===
=== <span style="color: white; font-family: Monaco; color: white; background-color: black;> Prototyping 05 </span>===

Revision as of 12:50, 28 October 2022

back to home

Prototyping 01

Pad: Hello, world!

Breadcube.png


Our server was born on Sep 20, 2022! We called it breadcube. During our first Prototyping session, we talked a lot about Sandbox, Debian, and Unix-like systems, and went through some of the basic terms, commands, and syntax, like Shell Cheat Sheet:

- bo@breadcube:~$ whoami
- bo@breadcube:~$ cd ..
- bo@breadcube:/$ ls
- bo@breadcube:/var/www/html$ nano bo.html and more


Manetta and Joak also showed us some figlet art. :)

                    _     
- __  ___ __  _   _| |__  
- \ \/ / '_ \| | | | '_ \ 
-  >  <| |_) | |_| | |_) |
- /_/\_\ .__/ \__,_|_.__/ 
-      |_|                
-  _                        _            _          
- | |__  _ __ ___  __ _  __| | ___ _   _| |__   ___ 
- | '_ \| '__/ _ \/ _` |/ _` |/ __| | | | '_ \ / _ \
- | |_) | | |  __/ (_| | (_| | (__| |_| | |_) |  __/
- |_.__/|_|  \___|\__,_|\__,_|\___|\__,_|_.__/ \___|
                                                 

Prototyping 02

Pad: the internet, the web, mark up that text

Hello, World!.png


During our second Prototyping session, we invited our breadcube to join the XPUB HUB. To do that we used Tinc, and followed all steps described here XPUB HUB New Nodes. Breadcube is on the HUB!


TIL:

  1. Pads are private and can be used for private notes. Wiki Pages are public (-ish);
  2. XPUB HUB is the only server that could be accessed freely via the internet;
  3. Up arrow - to go back to previous commands, history of commands;
  4. the $ is for Bash language;
  5. the # is for commands to the root;
  6. they both ($ and #) indicate to us that are waiting for our command;
  7. the "man" command stands for "manual" and gives us detailed instructions on how and what the specific command can do for us (ex: man cat; mac ls; etc.);
  8. the /root folder is a secured folder with restricted access, so only people with the right rights can change it;
  9. our folders are not protected, each one of us can access, change and even delete (lol) them;
  10. bashrc - to go back to the home folder
  11. sudo is a permission group; a group of people like all of us from xpub1
  12. drwxr-xr-x
    1. rwx = user
    2. rdw = group
    3. rwx = others

Prototyping 03

Pad: Jupyter - HTML - CSS


During the first half of the day, we explored the Jupyter Notebook app, its interface, functions and capabilities. Later, we dug into the world of HTML and CSS.

-“Technology is packaging and conventions.” "iPhone is not technology, but packaging and conventions." - by Ted Nelson


Links mentioned during class:

  1. Documentation by Mozilla
  2. Guerilla Open Access Manifesto by Aaron Swartz
  3. FROM New art form based on the Internet technology. 1997. Project by Alexei Shulgin.
  4. Hyperworld (the 2022 edition) Hyperlinking done by XPUB1
Full text of "Guerilla Open Access Manifesto".png


TIL: Jupyter Notebook

  1. Notebook - a specific space where you can write both code and text
  2. Text files - to turn them into HTML files just rename the file by adding .HTML at the end
  3. Under "Other" there are several options to choose from: open a Text file, open the Terminal, and more.
  4. Navigating inside the File browser:
    1. choose “+” sign to open a new Launcher tab
    2. choose “folder+” sign to create a new folder inside the directory where you are
    3. choose “up arrow” to upload files inside the folder we are working
  5. “shared” folder -> folder on our server used to share content (our pages on the breadcube)
    1. on shared/html - is where the breadcube page is located;
    2. /index.html - is our homepage.
  6. Shift + Enter to execute a command
  7. Shutting down Jupyter - it runs in the background even if our tab is closed. So to shit it completely we need to go to the "Running Terminals and Kernels" (the circle with a square inside) and select Shut Down All and Close All.


TIPS:

  1. use the "man" (manual) command to find out what a specific command can do, a guide on how to use it and type in the Terminal or on Jupyter
  2. put always borders with strong colors around the elements to see better the changes you are making
Screenshot 2022-10-04 at 12.41.55.png


TIL: HTML

  1. <!DOCTYPE html> - convention; tries to render the page even if there are small errors (like missing special character encoding), unlike python. It will load the page and automatically try to fix the errors.
  2. css - always goes into the <head>
  3. head - here we put everything regarding the structure of the content
  4. body - here we put the content itself, like text, images, embedded videos, etc.


FUN STUFF TO CLICK ON (AND EXERCISE):

Prototyping 04

Pad: HTML/CSS 2.0: flex

Our fourth prototyping session explored the HTML and CSS in more detail. We talked a lot about styling and what CSS can do for us. It was enjoyable to see how animations and transitions are happening and look at some very cool examples.

Prototyping 05

Pad: Hi, Python!

Built-in Modules

Trying out Python for the first time - A house of plants - messing up with lists of words inside the .py file, replacing words, and making new sentences. I went for the garden theme. Here is one of the randomly generated results:

 FERMENTING
     MEANS WAVING
           BY USING MUSHROOMS
                 DONE BY WARRIORS, BUGS AND OTHER INSECTS.

Making Cards