Sometimes I have to put text on a path

Sunday, July 3, 2011

Hello-guestbook with Google App Engine and webapp

This post is the second part of the post http://ex-ample.blogspot.com/2011/07/first-steps-google-appengine-mac.html (a tutorial for "dummies v0.0.0.1alpha").
    The  7 steps of this tutorial (D,E,F,G,H,I,J):
    • Creating a Simple Request Handler and the Configuration File
    • Using the webapp Framework
    • Using the Users Service
    • Handling Forms With webapp
    • Using the Datastore
    • Using Templates
    • Using Static Files
    corresponds to:
    1. http://code.google.com/appengine/docs/python/gettingstarted/helloworld.html
    2. http://code.google.com/appengine/docs/python/gettingstarted/usingwebapp.html
    3. http://code.google.com/appengine/docs/python/gettingstarted/usingusers.html
    4. http://code.google.com/appengine/docs/python/gettingstarted/handlingforms.html
    5. http://code.google.com/appengine/docs/python/gettingstarted/usingdatastore.html
      (Note: If you built your application using an earlier version of this Getting Started Guide, please note that the sample application has changed. You can still find the sample code for the original Guestbook application, which does not use ancestor queries, in the demos directory of the SDK)
    6. http://code.google.com/appengine/docs/python/gettingstarted/templates.html
    7. http://code.google.com/appengine/docs/python/gettingstarted/staticfiles.html
    --D----part D--- "Simple Request Handler and the Configuration File"
    http://code.google.com/appengine/docs/python/gettingstarted/helloworld.html
    your appspot.com=just a message.
    --E----part E--- webapp:
    In this above part-D, we have used the Common Gateway Interface (CGI) which is a standard (RFC 3875: CGI Version 1.1) that defines how web server software can delegate the generation of web pages to a stand-alone application or an executable file. Such applications, known as CGI scripts, can be written in any programming language, although scripting languages are often used.
    Now we will use the webapp Framework far better than the simple CGI.
    http://code.google.com/appengine/docs/python/gettingstarted/usingwebapp.html

    The CGI standard is simple, but it would be cumbersome to write all of the code that uses it by hand. Web application frameworks handle these details for you, so you can focus your development efforts on your application's features. Google App Engine supports any framework written in pure Python that speaks CGI (and any WSGI-compliant framework using a CGI adaptor), including:
     DjangoCherryPyPylonsweb.py, and web2py.

    You can bundle a framework of your choosing with your application code by copying its code into your application directory.
    App Engine includes a simple web application framework of its own, called webapp. The webapp framework is already installed in the App Engine environment and in the SDK, so you do not need to bundle it with your application code to use it. We will use webapp for the rest of this tutorial.
    A webapp application has 3 parts:
    • one or more RequestHandler classes that process requests and build responses
    • a WSGIApplication instance that routes incoming requests to handlers based on the URL
    • a main routine that runs the WSGIApplication using a CGI adaptor.
    Let's rewrite our friendly greeting (see the guestbook.py) as a webapp application.
    Edit guestbook.py and replace its contents with some lines of code posted at : http://code.google.com/appengine/docs/python/gettingstarted/usingwebapp.html:

    at this step, your appspot.com=just a message. See the source of the page:

    --F----part F---  the Users Service:
    the user gets a log-in window just an email.

    --G----part G--- Handling Forms With webapp:
    http://code.google.com/appengine/docs/python/gettingstarted/usingwebapp.html
    --H----part H--- Datastore:

    This latest version mixes HTML content with the code for the MainPage handler. This will make it difficult to change the appearance of the application, especially as our application gets bigger and more complex. Let's use templates to manage the appearance, and introduce static files for a CSS stylesheet.
    Continue to Using Templates.

    --I----part I--- the Templates:
    HTML embedded in code is messy and difficult to maintain. It's better to use a templating system, where the HTML is kept in a separate file. This separate file has a special syntax to indicate where the data from the application appears. There are many templating systems for Python:
     EZTCheetahClearSilverQuixoteDjango...
    You can use your template engine of choice by bundling it with your application code.

    The webapp module includes Django's templating engine. Versions 1.2 and 0.96 are included with the SDK and are part of App Engine, so you do not need to bundle Django yourself to use it.
    See the Django section of Third-party libraries for information on using supported Django versions:
    http://code.google.com/appengine/docs/python/tools/libraries.html#Django

    For the guestbook.py file, you have to :
    http://code.google.com/appengine/docs/python/gettingstarted/templates.html
    1)Add 2 lines of import statements at the top,
    2)Replace the MainPage handler with 10lines and this 2 lines:

    path = os.path.join(os.path.dirname(__file__), 'index.html')
            self.response.out.write(template.render(path, template_values))


    Finally, create a new file in the guestbook directory named "index.html".

    template.render(path, template_values) takes a file path to the template file and a dictionary of values, and returns the rendered text.
    The template uses Django templating syntax to access and iterate over the values, and can refer to properties of those values. In many cases, you can pass datastore model objects directly as values, and access their properties from templates.
    Tip: An App Engine application has read-only access to all of the files uploaded with the project, the library modules, and no other files. The current working directory is the application root directory, so the path to index.html is simply "index.html".



    --J----part J---the Static Files, example CSS file:
    Every web application returns dynamically generated HTML from the application code, via templates or some other mechanism. Most web applications also need to serve static content, such as images, CSS stylesheets, or JavaScript files. For efficiency, App Engine treats static files differently from application source and data files. You can use App Engine's static files feature to serve a CSS stylesheet for this application.


    Unlike a traditional web hosting environment, Google App Engine does not serve files directly out of your application's source directory unless configured to do so. We named our template file index.html, but this does not automatically make the file available at the URL /index.html.
    But there are many cases where you want to serve static files directly to the web browser. Images, CSS stylesheets, JavaScript code, movies and Flash animations are all typically stored with a web application and served directly to the browser. You can tell App Engine to serve specific files directly without your having to code your own handler.


    http://code.google.com/appengine/docs/python/gettingstarted/staticfiles.html



    1) Edit app.yaml and add:

    handlers:
    - url: /stylesheets
      static_dir: stylesheets
    --------
    The new handlers section defines two handlers for URLs. When App Engine receives a request with a URL beginning with /stylesheets, it maps the remainder of the path to files in the stylesheets directory and, if an appropriate file is found, the contents of the file are returned to the client. All other URLs match the / path, and are handled by the helloworld.py script.
    By default, App Engine serves static files using a MIME type based on the filename extension (http://en.wikipedia.org/wiki/MIME). For example, a file with a name ending in .css will be served with a MIME type of text/css. You can configure explicit MIME types with additional options.

    URL handler path patterns are tested in the order they appear in app.yaml, from top to bottom. In this case, the /stylesheets pattern will match before the /.* pattern will for the appropriate paths. For more information on URL mapping and other options you can specify in app.yaml, see the app.yaml reference:

    2) Create the directory guestbook/stylesheets and in this new directory, create a new file named "main.css"


    3) Finally, edit guestbook/index.html and insert 3 lines : 2  head tags and a CSS line.

    Saturday, July 2, 2011

    first steps for dummies: google-appengine-mac-launcher; Google App Engine SDK for Python

    This post is a tutorial for "dummies v0.0.0.1".
    you will learn:
    • Google-appengine-mac-launcher - the Mac Launcher for Google App Engine  
    • Google Project Hosting.
    • the full steps from a code to your "NameApplication.appspot.com"
    Download-----------------------------------------
    Download the Google App Engine SDK for Python:
    http://code.google.com/appengine/downloads.html
    http://googleappengine.googlecode.com/files/GoogleAppEngineLauncher-1.5.1.dmg
    (version 1.5.1 - 2011-06-20)

    GoogleAppEngineLauncher-1.5.1.dmg is an image disk of 12.3 MB (on your local disk;) ).
    GoogleAppEngineLauncher is a Mac application (60MB on your local disk).
    Google App Engine Launcher helps you develop and deploy web applications for Google App Engine using your Macintosh computer. Using the Launcher, you can create a new project, launch your editor to write code and change configuration, test your application, and upload your application to App Engine. The Launcher includes the complete App Engine software development kit, so it's all you need to get started.

    --A) for the first use of this desktop program,  you get this message:
    -------A-1
    "The Google App Engine SDK contains command-line programs used by GoogleAppEngineLauncher.app.  Would you like symbolic links for these programs, such as dev_appserver.py, to be made in /usr/local/bin?
    This action will replace links which may currently exist."
    --------click OK
    and 
    ----------A-2
    "Symbolic links in /usr/local/bin have been created for the following commands:
    appcfg.py bulkload_client.py bulkloader.py dev_appserver.py gen_protorpc.py remote_api_shell.py 
    In addition, /usr/local/google_appengine points to the SDK."
    ---------------click OK

    --B)-----------a brief overview of this stand-alone  application  before diving:
     At this URL (http://code.google.com/p/google-appengine-mac-launcher/), you can see the Launcher window with three projects. The first project is currently running locally on port 8080. The second project, selected, is running on port 8081. The Log Console for this project is also open. You can stop it, navigate to the local application in a browser, deploy it to appspot.com, and see the project dashboard. The last project is not running.

    --C)------ In the help menu, select "demos" item  and "guestbook".
    Google App Engine Launcher includes a fully functional demo application (hello-guestBook) that you can create, run and modify (for this demo application with Go (and not Python): see http://ex-ample.blogspot.com/2011/06/account-google-app-engine.html).


    ---D---------Hello-guestbook
    --D)-1)---The Python SDK includes a web server application that simulates the App Engine environment, including a local version of the datastore, Google Accounts, and the ability to fetch URLs and send email directly from your computer using the App Engine APIs. The Python SDK runs on any computer with Python 2.5, and versions are available for Windows, Mac OS X and Linux. (The Python SDK is not compatible with Python 3.)
    The Python SDK (for Windows and Mac) includes Google App Engine Launcher, an application that runs on your computer and provides a graphical interface that simplifies many common App Engine development tasks.

    Python App Engine applications communicate with the web server using the CGI standard. When the server receives a request for your application, it runs the application with the request data in environment variables and on the standard input stream (for POST data). To respond, the application writes the response to the standard output stream, including HTTP headers and content.
    Let's begin by implementing a tiny application (hello) that displays a short message.

    --D-2)---first steps "run"
     a)click on the menu item "demo" (Google App Engine Launcher):

    b) click "run" and click "logs",
    c) The local app server starts, and the green "running" icon appears next to the project in the project list.
    Click the "Browse" button. A web browser window (chrome) opens with the demo application's home page:

    d)Test the application: In the browser window, select the text box on the page, enter some text (i.e. "first ex-ample", then click the "Sign Guestbook" button:

    The application responds by adding the message to the page:

    Try again with another message:


    --D-3)---first steps :To modify the demo application. "Iterative Development"
    a) In the Launcher window, click the "Edit" button (or select Edit -- Open in External Editor)
    A text editor (application "text edit") opens with the files for the project (app.yaml).


    The directory "guestbook" contains 2 files:

    In the text editor, open the file named "guestbook.py" (. Find the line containing "An anonymous person wrote:". Change the phrase to "ex-ample(anonymous) wrote:", or another phrase of your choosing 
    Tip: You do not need to restart the local app server for most changes to application source files. If the server is still running from a previous step, you can leave it running.

    Select the browser window, then reload the page. Previously entered messages are displayed, but with the new phrase ("ex-ample(anonymous) wrote:").

    To view the log data for a project running under the local app server:
    click the "Logs" button.

    --D--4)----To deploy a project to Google App Engine:
    If you have not already done so, sign in or register with Google App Engine (https://appengine.google.com/), then create an application ID for the application (see below).
    Edit the project's app.yaml file to have the correct application ID (see the pictures below)
    (YAML is a language: http://en.wikipedia.org/wiki/Yaml).


    ------------
    Select the project in the project list.

    Click the "Deploy" button (graphic UI of the google-appengine-mac-launcher; or use appcfg to upload and deploy your application code).

    Account google app engine window:
    An application ID = a name unique to this application. 
    If you elect to use the free appspot.com domain name, the full URL for the application will be http://application-id.appspot.com/.

    http://code.google.com/appengine/docs/python/gettingstarted/uploading.html

    more : http://code.google.com/appengine/docs/python/tools/uploadinganapp.html
    (Uploading, Downloading, and Managing a Python App: the App Engine Python SDK includes a command for interacting with App Engine named appcfg.py. You can use this command to upload new versions of the code, configuration and static files for your app to App Engine. You can also use the command to manage datastore indexes and download log data).

    --D--5)----logs:

    Starting update of app: hello-javascript, version: 1
    Scanning files on local disk.
    2011-07-03 18:12:17,212 WARNING appengine_rpc.py:435 ssl module not found.
    Without the ssl module, the identity of the remote host cannot be verified, and
    connections may NOT be secure. To fix this, please install the ssl module from
    http://pypi.python.org/pypi/ssl .
    To learn more, see http://code.google.com/appengine/kb/general.html#rpcssl . 
    Password for xxxxx@gmail.com: Cloning 3 application files.
    Uploading 2 files and blobs.
    Uploaded 2 files and blobs
    Compilation starting.
    Compilation completed.
    Starting deployment.
    Checking if deployment succeeded.
    Will check again in 1 seconds.
    Checking if deployment succeeded.
    Will check again in 2 seconds.
    Checking if deployment succeeded.
    Deployment successful.
    Checking if updated app version is serving.
    Completed update of app: hello-javascript, version: 1
    If deploy fails you might need to 'rollback' manually.
    The "Make Symlinks..." menu option can help with command-line work.
    *** appcfg.py has finished with exit code 0 ***

    You succeed!!!!
    Your first "web application" is http://hello-javascript.appspot.com/

    Try the "Dashboard" button:
    You can manage and monitor applications running on Google App Engine using the Admin Console from your web browser. You can open the Admin Console directly from the Launcher.
    With the project selected in the project list (google-appengine-mac-launcher),
    click the "Dashboard" button.
    A web browser window opens with the Google App Engine Admin Console for the selected project.
    I get this:
    https://appengine.google.com/dashboard?app_id=hello-javascript
    Some remarks:
    • 3 paths were created: 1) a favicon was not added (err 404) but its path was created, 2) the path "/" and 3) the path "/sign".
    • go to "application settings": 1) Cookie Expiration: 1 day (App Engine uses a cookie to keep users logged in to your application); 2) you can select the Authentication Options: google account API or Federated login (openId); 3) YOU CAN DISABLE or DELETE YOUR APPLICATION HERE (http://code.google.com/appengine/kb/adminconsole.html#delete_app)
    --D--6)---------now you can modify the demo application:
    Sometimes if you modify the "guestbook.py"
    you MUST modify "app.yaml" (for example if you want to add static file as image saved in your local  directory "/image"):
    http://code.google.com/appengine/docs/python/config/appconfig.html


    --D--7)------shut down the local web server
    To shut down the web server, make sure the terminal window is active, then press Control-C (or the appropriate "break" key for your console), or click Stop in Google App Engine Launcher.
    You can leave the web server running for the rest of this tutorial. If you need to stop it, you can restart it again by running the command above.


    --E------- 
    in fact, this demo partially corresponds to  the hello-guestbook step by step "getting started":

    1. http://code.google.com/appengine/docs/python/gettingstarted/helloworld.html
    2. http://code.google.com/appengine/docs/python/gettingstarted/usingwebapp.html
    3. http://code.google.com/appengine/docs/python/gettingstarted/usingusers.html
    4. http://code.google.com/appengine/docs/python/gettingstarted/handlingforms.html
    5. http://code.google.com/appengine/docs/python/gettingstarted/usingdatastore.html
      (Note: If you built your application using an earlier version of this Getting Started Guide, please note that the sample application has changed. You can still find the sample code for the original Guestbook application, which does not use ancestor queries, in the demos directory of the SDK)
    6. http://code.google.com/appengine/docs/python/gettingstarted/templates.html
    7. http://code.google.com/appengine/docs/python/gettingstarted/staticfiles.html


    --F--------To add an other existing Google App Engine project to the launcher in 3 clicks:

          1----Select the menu option File -- Add an Existing Project...(or: Press Shift-Command-N).
          2----The "Add Existing Application" dialog opens. Click the "Browse..." button next to the field "Path" to select the existing application root directory.
    The application root directory is the directory containing the application's app.yaml file.

    (Optional) Change the port number to use when running the local app server for this project. By default, a port number is selected that doesn't conflict with any other project in the Launcher.

          3---Click the "Add" button. The project is added to the Launcher project list.

    ---------------end

    Developer's Guide to Prerendering in Chrome

    Web Developer's Guide to Prerendering in Chrome - Google Chrome - Google Code:
    http://code.google.com/chrome/whitepapers/prerender.html

    Prefetching is a feature that is currently implemented in Firefox. Prerendering is an experimental feature in Chrome (versions 13 and up) that can take hints from a site’s author to speed up the browsing experience of users. A site author includes an element in HTML that instructs Chrome to fetch and render an additional page in advance of the user actually clicking on it.
    The concept of prefetching is included in the HTML5 spec.

    test :
    http://prerender-test.appspot.com/

    storage HTML5Demo.com is a Collection of hacks and demos showing capability of HTML5 apps: Storage

    HTML5 Demo: Storage
    http://html5demos.com/storage
    (The keyup event is sent to an element when the user releases a key on the keyboard).
    http://html5demos.com/storage#view-source

    https://github.com/remy/html5demos

    Collection of hacks and demos showing capability of HTML5 apps

    Web font HTML5; Add a line of code to your pages and choose from hundreds of web fonts:Typekit

    http://typekit.com/
    alexa 8500 (@july 2011)

    Add a line of code to your pages and choose from hundreds of web fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

    Your fonts will be served from a robust global network built with hundreds of servers.

    The Kit Editor lets you apply your fonts to CSS classes, IDs, or any HTML tag in your markup.

    Typekit fonts support a dozen languages.


    free:

    max 25,000 Pageviews/month
    Trial Library access
    1 Website
    2 Fonts per site
    Typekit badge required

    javascript tips: project.mahemoff.com

    http://project.mahemoff.com/
    list of projects (javascript)
    1) /anaclock; click "clock.html"; (appcache play)

    2) timer: http://project.mahemoff.com/timer/timer.html

    3) http://project.mahemoff.com/josh/

    4) http://project.mahemoff.com/pdf.js/test.html

    5) http://project.mahemoff.com/hn/

    CSS3.0 Maker;CSS3.0 Generator;css menu;


    CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator:
    http://www.css3maker.com/

    online css3.0 generator:
    http://www.onlycssmenu.com/

    CSS3.0 based Menu

    • Horizontal DropDown Menu
    • Horizontal Menu
    • Pagination Menu
    • Step by Step Navigation
    • Vertical Menu
    • Vista Style Css Menu

    Monocubed, galactic-inbox, HTML5 game,

    Monocubed | Paul Truong:

    HTML5 game implemented with processing.js (http://processingjs.org/). Like all the other doodles on this blog, it’s a personal project for learning purposes (read: the code is not pretty).

    deviantART

    DeviantART:
    http://muro.deviantart.com/

    • HTML5 on line application
    • 100 million original works of art.


    alexa: 122 @july 2011.

    see a snapshot:

    site optimization: HTML5 Boilerplate.

    HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.
    http://html5boilerplate.com/