WebTeam http://hgfx.com/wt Links and tips for web development classes at Mt. Ararat Wed, 09 May 2012 21:53:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 HTML 9 framework with javascript http://hgfx.com/wt/?p=1979&utm_source=rss&utm_medium=rss&utm_campaign=html-9-framework-with-javascript http://hgfx.com/wt/?p=1979#comments Wed, 09 May 2012 21:51:33 +0000 mtaweb http://hgfx.com/wt/?p=1979

Finally. It’s here.

]]> http://hgfx.com/wt/?feed=rss2&p=1979 0 Flipboard style, without an iPad http://hgfx.com/wt/?p=1977&utm_source=rss&utm_medium=rss&utm_campaign=flipboard-style-without-an-ipad http://hgfx.com/wt/?p=1977#comments Wed, 09 May 2012 21:11:59 +0000 mtaweb http://hgfx.com/wt/?p=1977

This looks like serious fun.

]]> http://hgfx.com/wt/?feed=rss2&p=1977 0 Simple way to style a Google form — and add a custom redirect http://hgfx.com/wt/?p=1969&utm_source=rss&utm_medium=rss&utm_campaign=simple-way-to-style-a-google-form-and-add-a-custom-redirect http://hgfx.com/wt/?p=1969#comments Wed, 02 May 2012 18:34:55 +0000 mtaweb http://hgfx.com/wt/?p=1969

Immersion Media tells you how. (Lots of web sites teach this concept, in varying ways.) And you can use jquery to perform simple validations.

]]> http://hgfx.com/wt/?feed=rss2&p=1969 0 Jquery slabText http://hgfx.com/wt/?p=1966&utm_source=rss&utm_medium=rss&utm_campaign=jquery-slabtext http://hgfx.com/wt/?p=1966#comments Fri, 13 Apr 2012 16:16:34 +0000 mtaweb http://hgfx.com/wt/?p=1966

Check it out here (the download includes everything ready-to-go — css, html, js file).

]]> http://hgfx.com/wt/?feed=rss2&p=1966 0 Google web fonts http://hgfx.com/wt/?p=1958&utm_source=rss&utm_medium=rss&utm_campaign=google-web-fonts http://hgfx.com/wt/?p=1958#comments Wed, 11 Apr 2012 17:37:36 +0000 mtaweb http://hgfx.com/wt/?p=1958

See if you can get one working.

Or use the plug-in.


]]> http://hgfx.com/wt/?feed=rss2&p=1958 0 Quarter 3 self-evaluation http://hgfx.com/wt/?p=636&utm_source=rss&utm_medium=rss&utm_campaign=quarter-1-self-evaluation-2 http://hgfx.com/wt/?p=636#comments Sun, 08 Apr 2012 06:23:31 +0000 mtaweb http://hgfx.com/wt/?p=636

Describe and evaluate your work and learning this quarter in a Google Docs form.

(Don’t fill it in, though, till we’re done with presentations.)

]]> http://hgfx.com/wt/?feed=rss2&p=636 0 Chrome 18: you need it http://hgfx.com/wt/?p=1946&utm_source=rss&utm_medium=rss&utm_campaign=chrome-18-you-need-it http://hgfx.com/wt/?p=1946#comments Fri, 30 Mar 2012 15:55:18 +0000 mtaweb http://hgfx.com/wt/?p=1946

Full hardware acceleration (even on our MLTI laptops) and a new version of Flash. Go to chrome://gpu/ to see specs specific to your machine (older Macs and PCs don’t have the GPU horsepower to use the accelerator).

How to get it? Chrome > About Google Chrome > Update Now.

Then go to Morphing Cubes to see some sort of astonishing real-time rendering without Flash. Note that the numbers are text, not graphics — you can select them and they enlarge when you goose up the font size. Stripped of the javascript that toggles the shape, this is the whole code, all CSS3:


 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
            Morphing Power Cubes
        </title>
<style type="text/css" media="screen">
    body {
      background-color: black;
      color: white;
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
      background-image: -webkit-gradient(radial,
                            50% 500, 1,
                            50% 500, 400,
                            from(rgba(255, 255, 255, 0.3)),
                            to(rgba(255, 255, 255, 0)));
     background-repeat: no-repeat;
    }

    #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
    
    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
    
    .plane {
      position: absolute;
      height: 200px;
      width: 200px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }
    
    #shape {
      -webkit-animation: spin 8s infinite linear;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }

    /* ---------- cube styles ------------- */
    .cube > .one {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }

    .cube > .two {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }

    .cube > .three {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }

    .cube > .four {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }

    .cube > .five {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }

    .cube > .six {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
    }

    .cube > .seven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
    }

    .cube > .eight {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }

    .cube > .nine {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
    }

    .cube > .ten {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
    }

    .cube > .eleven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
    }

    .cube > .twelve {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
    }

    /* ---------- ring styles ------------- */
    .ring > .one {
      -webkit-transform: translateZ(380px);
    }

    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
    }

    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
    }

    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
    }

    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
    }

    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }

    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }

    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }

    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }

    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }

    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }

    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }

    .controls {
      width: 80%;
      margin: 0 auto;
      padding: 5px 20px;
      -webkit-border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .controls > div {
      margin: 10px;
    }
  </style> 
    </head>
    <body>
        <div class="controls">
            <h1>
                Animations, Transitions and 3D Transforms
            </h1>
            <div>
                <button onclick="toggleShape()">
                    Toggle Shape
                </button>
            </div>
            <div>
                <input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked>
                <label for="backfaces">
                    Backfaces visible</label>
            </div>
        </div>
        <div id="container">
            <div id="stage">
                <div id="shape" class="cube backfaces">
                    <div class="plane one">
                        1
                    </div>
                    <div class="plane two">
                        2
                    </div>
                    <div class="plane three">
                        3
                    </div>
                    <div class="plane four">
                        4
                    </div>
                    <div class="plane five">
                        5
                    </div>
                    <div class="plane six">
                        6
                    </div>
                    <div class="plane seven">
                        7
                    </div>
                    <div class="plane eight">
                        8
                    </div>
                    <div class="plane nine">
                        9
                    </div>
                    <div class="plane ten">
                        10
                    </div>
                    <div class="plane eleven">
                        11
                    </div>
                    <div class="plane twelve">
                        12
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


]]> http://hgfx.com/wt/?feed=rss2&p=1946 0 Prototype in Keynote? http://hgfx.com/wt/?p=1943&utm_source=rss&utm_medium=rss&utm_campaign=prototype-in-keynote http://hgfx.com/wt/?p=1943#comments Thu, 29 Mar 2012 14:02:18 +0000 mtaweb http://hgfx.com/wt/?p=1943

Quickly gives you a clean, modern look.

]]> http://hgfx.com/wt/?feed=rss2&p=1943 0 EOQ 3 http://hgfx.com/wt/?p=1940&utm_source=rss&utm_medium=rss&utm_campaign=eoq-3 http://hgfx.com/wt/?p=1940#comments Wed, 28 Mar 2012 16:38:26 +0000 mtaweb http://hgfx.com/wt/?p=1940

The list for an A:

  • a 000webhost-based WordPress install
  • a link to this site from your WebTeam home page
  • at least 5 posts that show you know how to whip WordPress around six ways from Sunday (all sorts of formatting, images, videos, links, etc.)
  • at least 3 majorly-different themes installed, some with navbars, some without
    • for each theme, a link to the demo of each theme, so folks can see what it looked like before
  • some sort of theme switcher or a page (not a post) that has nicely-formatted Theme Test Drive links to all your themes
  • at east one theme has all major graphic elements swapped out/changed
  • a page for each theme that you “diddled with” (technical term for messing around/changing stuff), describing what you did — “swapped out these graphics, changed this code in this php file, changed the css for this so that it would do this,” etc
  • a backup of your WordPress site as a Tools  >Export
  • an ftp-ed backup of your entire 000webhost world

OR, if you are pursuing a different independent goal:

  • complete and rich web-based documentation of all you have done this quarter, on your WebTeam site

 

]]> http://hgfx.com/wt/?feed=rss2&p=1940 0 WordPress theme from scratch, kind of http://hgfx.com/wt/?p=1934&utm_source=rss&utm_medium=rss&utm_campaign=wp-from-scratch-kind-of http://hgfx.com/wt/?p=1934#comments Wed, 07 Mar 2012 17:26:42 +0000 mtaweb http://hgfx.com/wt/?p=1934

Basic instructions — and a theme template — for building a WP theme from scratch. Good for those of you who are not much interested in graphics and would like to understand div-based layout.

]]> http://hgfx.com/wt/?feed=rss2&p=1934 0