typelesswriter . com

Writing after the tablet, the laptop, the desktop, and the typewriter.

How Do You View and Edit the Source Code of a Web Page?

with 2 comments

Back away from the Insidious Button.

Don’t immediately read dire intent into interface and product design.

The matter at hand is the viewing of source code. It is tradition in web browsers that there is a button with which one can view the HTML that is the code that made that page possible — well, much of the code. There’s a backend behind the backend that the source code barely hints at.

In the early days of static web pages you could pretty much learn how to program the web just by looking at source code. When I programmed my first efforts on the web, I just pulled up pages I liked and then cut and pasted pieces of code and adapted them as I needed. Slowly the copied code became knowledge, and eventually I could just code without peeking behind someone else’s curtain.

The default browser in the iPad doesn’t have a source-code button. But if you use either of these two bookmarks, you can then view a page’s source code:

http://www.ravelrumba.com/blog/ipad-view-source-bookmarklet/

http://banagale.com/view-source-from-safari-on-ipad.htm

But that is just step one. In my initial experiments with these bookmarks, while you can, indeed, view the code, you cannot copy it, which means you can’t paste it, which means you can’t fiddle with it. So how do you do it?

I joked rhetorically on Twitter that you take a photo and send it through the character recognition software in Evernote. I thought I joked. Then I thought I would try it. Then I found out that the iPad version of Evernote doesn’t seem to have the character recognition tool that the laptop/desktop version does (I hesitate to use the word “computer,” because that would suggest that the iPad isn’t a computer, which is a humorous point of view). So instead I took a screenshot of the part of a page’s source code that intrigued me, I then copied that shot from the iPad’s Photos app into a great free app called PhotoPad, and then I used PhotoPad to edit everything from the image except the exact snippet I wanted to focus on, and then I emailed that image to a website called onlineocr.net, and almost instantaneously it emailed back to me exactly what I wanted: those same characters, but as text, not image.

Yes, it was a bit involved, but that’s sort of the point. The question isn’t Can you do it? The question, in most cases, is How do you do it?

And once you’ve done this once, it’s pretty much second nature from then forward. (A few additional tips: you need to set up an account at that OCR website in order to use it, though it is free, and you need to learn an instruction, “-output:txt” — that is to make sure the results return to you as a text file and not as a Word document, because getting a Word document just starts a whole new set of complications rolling).

 

About these ads

Written by Marc

2011/03/22 at 6:19 pm

Posted in typing

Tagged with , , , ,

2 Responses

Subscribe to comments with RSS.

  1. Why not
    Store web page in dropbox
    Edit it using one of the text editors that use dropbox
    Use goodreader to send it wherever, or just serve it from the dropbox public folder?

    Gregor

    2011/03/29 at 7:27 pm

    • Ah, nice one. I hadn’t thought of storing the web page in Dropbox. Thanks.

      Marc

      2011/03/29 at 7:29 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: