Original work: http://xkcd.com/1461/

XKCD example page from 2014-dec-17

[ prev | up | next ]

[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. Hover image: is there a title=”” popup? If so, note as fr0001

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

    4. label point elements (“speech line”)

  7. 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

  8. 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

  9. Erase all textual and speech bubble elements

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

  11. File | export … | export | export

  12. Close gimp

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

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

  15. 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. Change attribution

    5. Change date at bottom

      1. change code to handle particular number of elements

        1. comment out xkcdShow()

        2. comment out xkcdShowLines()

      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

  16. Tie in this page to any indexing pages

  17. 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

  18. Adjust co-ords to suit

  19. These cribs

    1. Edit in word processor

    2. save as html

    3. view as html

      rowscut and paste source html into index.html