13. Misc topics (2)

Today's topics

Evolution of computer interface

Markup languages

Managing paper documents

Managing photos

Fine-control slider

Evolution of computer interface

A computer I created using 8008 CPU

In 1976

http://Gyazo.com/078e8c514fec7baf6388b3bc6246423c.png

8008 computer

http://Gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png

Paper tape reader

http://Gyazo.com/3e8612d7427e1e95b93d87c0c71ae5f1.png

Alto

1973 @ PARC

First GUI workstation

Bitmap display

Mouse / window / menu

http://gyazo.com/96bf4fda6bf46b0f862f9d3c68905016.png

Steve Jobs and Alto

https://gyazo.com/d6273198fc881b8b35b1db4b61a1d005

Xerox Star

Introduced in 1981

https://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

JStar

Introduced in 1982

Japanese text handling

https://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Lisa

1983 @ Apple

GUI-based personal computer from Apple

Steve Jobs created this after seeing ALto

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Macintosh

1984 @ Apple

Originally a project by Jef Raskin

Steve Jobs ousted Raskin from the project

NeXT Computer

Founded in 1985 by Steve Jobs

Introduced NeXT Cube in 1988

Mac OSX

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

Evolution of development environment

Evolution of version control systems

SCCS (1972)

RCS (1980)

CVS (1986)

Subversion (2000)

git (2005)

Evolution of build systems

Make (1977)

Rake

ant

sbt

Various IDEs

Interface Builder (1986)

Installed on NeXTstep

Edit GUI objects visually

https://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Xcode

https://gyazo.com/91768f4e2dd5e628bdbb9e09c26372cc.png

Eclipse

https://gyazo.com/6a4ba95d8e00c59eae210573099702d3.png

Evolution of development environment

35 years after Make

25 years after IDE

Almost the same for 20+ years

Why slow evolution?

People like same old way

People cannot adopt to new things

What is "intuitive"

People think something is intuitive when they know something well

e.g. pen operation, pulldown menu, ...

People can use them after long-time practice

Seven cafe by Kashiwa Sato

https://gyazo.com/182a24c8bc2b1322accaabcdfc0d8437.png

The failure of new design

https://gyazo.com/92be5ee1a15f21b8c9b557e0215fe775.png

The failure of new design

https://gyazo.com/b81ff77125b286c600bc609fd19b1421.png

New products do not become popular soon

Most people are very conservative

Markup languages

Add format tags in plain text

TeX, HTML, Markdown, etc.

Specal tag examples

The TeX Book (1984)

http://gyazo.com/84e7403307e75b2f6487c832dc59e14e.png

TeX tag examples

code:sample1.tex

% cat sample1.tex

Hello, world!

\end

% tex sample1.tex

This is TeX, Version 3.141592 (Web2C 7.5.4)

Output written on sample1.dvi (1 page, 228 bytes).

Transcript written on sample1.log.

%

Generated PDF

https://gyazo.com/6308eb57737babf793e9c06f42c2b7d0

Example of macro usage

code:sample2.tex

% cat sample2.tex

\def\name{Masui}

Hello, \name!

\end

% tex sample2.tex

This is TeX, Version 3.141592 (Web2C 7.5.4)

Output written on sample2.dvi (1 page, 224 bytes).

Transcript written on sample2.log.

%

Generated PDF

https://gyazo.com/67c9f11132a18de1ea8823f7ee5b8c6e

LaTeX example

code:sample4.tex

% cat sample4.tex

\documentclass{article}

\begin{document}

\LARGE

abcde

\begin{quotation}

quoted string

\end{quotation}

\end{document}

% latex sample4

This is pdfeTeX, Version 3.141592-1.21a-2.2 (Web2C 7.5.4)

entering extended mode

(./sample4.tex

...

Output written on sample4.dvi (1 page, 292 bytes).

Transcript written on sample4.log.

%

Generated PDF

https://gyazo.com/33a42df4f5acd1804843ca8b7970205c

Other markup languages

Scribe

roff

RTF

HTML

MarkDown

Mainly used at Carnegie Mellon University

Almost extinct

http://gyazo.com/6febaa039e718d9d3cf4941c73d7909b.png

Scribe notations

http://gyazo.com/2e9f49c5d0530b4d33576a9b1dfb4e12.png

Scribe notations

http://gyazo.com/038e5a90cac8236632cb23f5cee3f15f.png

Remnant of Scribe

BibTeX notation

code:sample.bibtex

@BOOK{Lamport:LaTeX,

AUTHOR = "Leslie Lamport",

TITLE = "LaTeX User's Guide and Document Reference Manual",

PUBLISHER = "Addison-Wesley Publishing Company",

ADDRESS = "Reading, Massachusetts",

YEAR = "1986" }

Roff / Runoff

Standard markup language on Unix

Manualページで現在も利用

nroff, troff

/usr/share/man/man1/man.1

code:man.1

.SH DESCRIPTION

.B man

formats and displays the on-line manual pages. If you specify

.IR section ,

.B man

only looks in that section of the manual.

.I name

is normally the name of the manual page, which is typically the name

of a command, function, or file.

However, if

.I name

contains a slash

.RB ( / )

then

.B man

interprets it as a file specification, so that you can do

.B "man ./foo.5"

or even

.B "man /cd/foo/bar.1.gz\fR.\fP"

.PP

Trof output

% groff -man man.1 > man.ps

http://gyazo.com/32cab038afc431a0ea7f65af650f06a2.png

RTF (Rich Text Format)

Markup for Microsoft Word

Not human-readable

code:sample.rtf

{\rtf1\ansi\ansicpg932\cocoartf949\cocoasubrtf430

{\fonttbl\f0\fswiss\fcharset0 Helvetica;}

{\colortbl;\red255\green255\blue255;}

\paperw11900\paperh16840\margl1440\margr1440\vieww9000\viewh8400\viewkind0

\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102

\tx5669\tx6236\tx6803\ql\qnatural\pardirnatural

\f0\i\fs50 \cf0 abc}

HTML

HyperText Markup Language

Most widely used markup language

Baed on SGML

Markdown

Simpler HTML notation

Used by many engineers

Available on GitHub

Link tags and image tags are not concise

Scrapbox

Simple markups

No title notation, etc.

Managing personal information

Information management in the ubicomp age

https://gyazo.com/b98a1f196c2f8ecfd690f7faee7bbfe7.png

「情報処理」の特集 (2005)

Getting Things Done (GTD)

BTronベースの各種ツールなど

紙Copiなど

なんでもひとつのテキストファイルにする

Canon CATの話が書いてある

ChangeLogで情報管理

iTunesなどを利用

https://www.amazon.co.jp/dp/4121011597 https://gyazo.com/072a9731f2692821f1ddb454158510fb

Paper document management method by Yukio Noguchi

"Extrude filing"

Yukio Noguchi

https://gyazo.com/c99d995807b9b802340081e905253888.png

Extrude filing method

Put a paper document in an A4 envelope

Put the envelope at the leftmost position in the shelf

Frequently-used envelopes are found the left portion of the shelf

https://gyazo.com/a47c5fc9ed036c992348dcd23b2040be

Problems of Noguchi method

Title should be written on each envelope

Can't see the inside of envelopes

Takes time to find old files

May create duplicated emvelope

Clear folder file management

https://gyazo.com/6bb855c423f1cf288a224fe60ccb46de

Use numbered transparent file folders

Sort the files by number

Write the content descriptions in a text file

List of folders

Merits

Don't have to write tags on folders

Easily check the contents

Find the contents by text search

Easily put into a A4 box / shelf

Fils can be found easily because sorted

Many addributes can be specified

Photo management on Scrapbox

Various photo magement systems

Flickr?

Picasa?

Google Photos?

Instagram?

Pinterest?

FxCamera?

写真.app?

Omoide-bako

PhotoBank

There's no popular photo magement system

Manage photos on Scrapbox and Gyazo

Appload all photos on Gyazo

Create a Scrapbox for each photo

Use the timestamp as the title

Add comments, etc. on the Scrapbox page

List related photos in a date page

Example

Photo hierarchy

https://gyazo.com/074a01fc0718b7acd19a8963e516b061

特長

Folder names not needed

Various photos are linked via tags

Zoom-based browsing

Photos can be found from a map

Active reading

「Scrapbook」

Problems of Kindle

Can't write memos

Can't edit contents

Can't add links to Web pages

Can't bookmark the page and line

Merits of using Scrapbox for books

Quickly publish and put on sale

Readers can edit the contents

Adding links, comments

Readers can add links

All the lines have URLs

No restriction on the size

Tiny books, huge books

5ページでも10000ページでもOK

No TOC and index required

Memos can be linked together

Sound / video available

Demerits

Nothing

Scrapbook examples

Controling fine values

Coarse control

Jump to sectioni top

Setting the clock to 12:00

Fine control

Precise control

Setting the clock to 12:34:56

Difficult on YouTube

Alphaslider

https://gyazo.com/85ad1717df860f839c46bef01c6bbbb6.png

Fine-control slider + coarse-control slider

Fine control on iPhone

指をスライダから離すと遅くなる

https://gyazo.com/da0c82b3358f2b4508f05fa1d4c4130c

Snapping

"Snap" objects to grids and existing objects

Snap and Go

http://www.patrickbaudisch.com/projects/snapandgo/images/snapandgo.gif

SmoothSnap

Snapping + fine control

http://www.pitecan.com/SmoothSnap/rclock.html http://gyazo.com/b79eab994c7642d6ee8966ccc5558553.gif

Snapping scroll

https://www.youtube.com/watch?v=E8gctaXJK9o

Fine-tune slider

http://www.pitecan.com/SmoothSnap/ http://gyazo.com/61e99f79300f0bb8e919a5023bb52922.png

Version4

http://www.pitecan.com/SmoothSnap/clock4.html https://gyazo.com/ddd804941eb6707e0a60b78433254b9a

Version5

http://www.pitecan.com/SmoothSnap/clock5.html https://gyazo.com/a3c3f8d8312406e86dbf42ffa364fd34

Version7

http://www.pitecan.com/SmoothSnap/clock7.html https://gyazo.com/9e619f3990cc3bcd3d327361c82623d8

Slide rule

http://www.pitecan.com/SmoothSnap/clock10.html https://gyazo.com/38ce213de68934fdbbba10eb02d3a661