Original work: http://xkcd.com/1460/
[ prev | up | next ]

XKCD example page from 2014-dec-16

[Click here to upload your own]







  1. Visit https://xkcd.com/

  2. Right-click image | save image as | xkcd-orig-<title>.png | save

  3. Open GIMP

  4. File | open | xkcd-orig-<title>.png | open

  5. file | save as | xkcd-orig-<title>.xcf | save

  6. print the image

    1. title the image

    2. label the textual elements (“fr0104” etc)

    3. label point elements (“speech line”)

  7. Hover image: is there a title=”” popup? If so, note as fr0001

  8. Title two tables

    1. textual

      1. one row per textual elements

      2. cols: corner; w, x,y

    2. point elements

      1. one row per two points (“pt1, pt2”)

      2. Cols: xy->xy

  9. Co-ords:

    1. For each textual element

      1. determine where the corner should go (just tl, tr, bl, br for now)

      2. determine max width of bubble

      3. Get pixel co-ords for textual element and point elements

  10. Erase all textual and speech bubble elements

  11. File | save as | xkcd-notext-<title>.xcf

  12. File | export … | export | export

  13. Close gimp

  14. At www.csi18n.com, mkdir -p ~/csi18n/xkcd/<title> //title should use underscore not spaces

  15. scp ~/Worklife/mpsvr.com/csi18n/xkcd-notext-<title>.png al@www.csi18n.com:~/csi18n/xkcd/<title>

  16. At www.csi18n.com

    1. cd ~/csi18n/xkcd/<title>

    2. cp ../20141201/index.php . (or whichever is most recent version)

    3. cp ../20141201/index.html .

    4. Edit index.html

      1. search/replace previous title with new

      2. IMG SRC to uploaded image

      3. Change attribution

    5. Change date at bottom

      1. change code to handle particular number of elements

        1. handler_X()

        2. if ($el == 'X'

        3. localstorage.setItem

        4. d.innerHTMLs

        5. comment out xkcdShow()

        6. comment out xkcdShowLines()

        7. <div id=”X

      2. Data for xkcdShow() for BT, TL etc, co-ords and widths

      3. Data for xkcdShowLines() for speech lines

      4. See through PNG

        1. Work up each z-index

        2. Add second area map because closer z-index of see through PNG means can't click text behind. A better solution: divide PNG into four around unused center

      5. hidden image title?

        1. Uncomment hideWhatWasImgTitle

        2. hideWhatWasImgTitle, showWhatWasImgTitle correct element

        3. Correct image-map via http://www.image-maps.com/

          1. Use the first <area … tag in the html code

      6. Comment forms to suit

  17. Tie in this page to any indexing pages

  18. At site: add English text as available translation

    1. For each “undefined”

      1. Click

      2. Offer Another

      3. Add original English

      4. Anonymous

      5. Submit

    2. Make text a bit larger/smaller to suit

  19. Adjust co-ords to suit

  20. These cribs

    1. Edit in word processor

    2. save as html

    3. view as html

      rowscut and paste source html into index.html

Next time
1. query string in visitsid and lang