Home Contact RSS

StomperNet’s Stomper Universe | Interactive Flash Site Map

StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.

So go check out the StomperNet Universe now!

Stompernet universe thumbnail

Tags: , , , , , , , , ,

Going Natural 3.0 at StomperNet

Here’s a new site and series from StomperNet called Going Natural 3!
It’s a bit of free videos made and released to showcase the talents and business of what StomperNet is about and what they do for their clients. They’re ‘moving the freeline’ so to speak…

The first video series begins with Dan Thies talking about his ‘Crazy Theory’ for AdWords.

On signing in there are a couple BONUS videos for you as well. So go check them out as well!
Watch Going Natural 3 - Adwords Triangulation Method and more

This site contains the latest flash video player built by yours truly. I also did the design of the site: involving html, css, php, javascript and dealing with drupal too!

Tags: , , , , , , , , , , , ,

New Theme for Circlecube

I went for the basic and popular Qwilm 0.3

Theme hardly based on huddletogether.
This theme was designed by Lokesh and destriped and built by Oriol Sanchez

Over the next while I’ll be massaging the look and feel (mostly CSS) to fit my needs.

Please let me know if you see anything odd or broken, or if you have any other comments, thanks!

Update: Color Scheme adjusted and some minor layout changes. A little PHP tweaking, but mostly CSS.

Tags: , , , ,

About.StomperNet.com

About dot Stompernet dot Com (about.stompernet.com) is the new public (free) website from StomperNet. I helped implement this design and had to learn all about themes in Drupal. It’s still in beta, but it’s well on it’s way. It is an agglomeration site, where all the StomperNet Faculty’s feeds can be found and various other free content, like video in the Squambido player, and the Scrutinizer software.

about stompernet screenshot

Tags: , , , , , , , , ,

theMullins.blogspot.com

Google Blogger site Blogspot - blog for my family.
My wife, Krista had the idea to make an individual blog for each of us in the family.
So there’s a seperate page for me her, our son and our dog; and also a hub for the entire family’s posts!

Blogger Logo

Tags: , ,

StomperNet Scrutinizer

StomperNet releases Scrutinizer, software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built in conjunction with Nitobi using Adobe AIR and Flex. I had the chance to do the skinning of the browser in flex! I really hope to have a good excuse to play more with flex.

Scrutinizer Thumbnail

Anyways, check out the free software (master-minded by Andy Edmonds), this ‘Click Fu’ video created to explain it, and the many uses of Scrutinizer.

Tags: , , , , , , , , ,

PHP Menu Include function to reuse an html block on multiple pages

Overview:
When making websites frequently we want a navigation bar or menu to show on every page. Rather than repeating the code on every single page, which is virtually impossible to update and maintain, or worse, using frames, use PHP to automate this and build each page dynamically. PHP will just paste in the navigation or whatever you’d want represented on every page. To do this we use the php include function. You can use include() to show headers, footers, or any elements that you’d reuse on multiple pages. The include() function takes all the text in a specified file and copies it into the file that calls the include function. This is great for scalability and updating- instead of changing multiple files, only change one!
Here’s what a php include function looks like:
<?php include(”nav.php”); ?>

Steps:
1. Make the actual nav you want.

2. Put it into a php file (or any type of file, html, txt, as long as it’s formatted as html)

3. Place the php in your page to ‘print’ the desired file into your final html page before the browser renders the page using the include function. This spits out html. The viewer’s only see html, as that’s all it is, the php created the html file- That’s why it’s called PHP: Hypertext Preprocessor.

Example:
The nav.php file:

  1. <p id="fromMenuPhpFile"> <a href="home.php">Home</a> |
  2. <a href="about.php">About Us</a> |
  3. <a href="portfolio.php">Portfolio</a> |
  4. <a href="contact.php">Contact Us</a>

The homepage.php:

  1. &lt;?php include("nav.php"); ?&gt;
  2. <h1>Welcome to my home page</h1>
  3. home page text lorem ipsum

And here’s a sample site with a nav bar containing 4 pages included through php for Home, About, Portfolio and Contact.

Download:
phpNav.zip

Tags: , , , , ,

NavBar Menu List with CSS

The Overview:

An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! As shown here! The css will tell the browser to display this special unordered list as the menu. This utilizes a technique to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you hover, the images is displaced to show only the hover state, and likewise for the active and then returns to the normal state. This is compatible in all the browsers I have checked so far, let me know if you find any issues [thanks].
Vertical Nav Menu

The Steps:

1. First make the html. An <ul> full of <li> elements.

2. Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.

3. The CSS to attach the two together

The Example:

verticalMenuCSS.html

As you can see this is a simple html unordered list with list items.

  1. <ul>
  2. <li class="top">My Site</li>
  3. <li class="middle">Home</li>
  4. <li class="middle">About</li>
  5. <li class="middle">Biography</li>
  6. <li class="middle">Portfolio</li>
  7. <li class="bottom">Contact</li>
  8. </ul>

Here’s the magic.

  1. /*vertical Menu CSS style sheet*/
  2.  
  3. *{
  4. list-style:none;
  5. margin:0px;
  6. padding:0px;
  7. font-family: Arial, Helvetica, sans-serif;
  8. font-size: 1em;
  9. }
  10.  
  11. .sidemenu {
  12. width: 150px;
  13. border: none;
  14. }
  15. .sidemenu li a {
  16. height: 18px;
  17. text-decoration: none;
  18. }
  19. /*Top sidemenu Item (Header and rounded corners)*/
  20. .sidemenu li.top a:link, .sidemenu li.top a:visited {
  21. color: #828282;
  22. display: block;
  23. background: url(images/menuTop.png);
  24. background-repeat:no-repeat;
  25. padding: 1px 0 1px 0;
  26. font-size: 1em;
  27. font-weight: bold;
  28. text-align: center;
  29. }
  30. /* Uncomment this if you want the header to be an interactive link
  31. .sidemenu li.top a:hover {
  32. color: #828282;
  33. background: url(images/menuTop.png) 0 -22px;
  34. }
  35. .sidemenu li.top a:active {
  36. color: #26370A;
  37. background: url(images/menuTop.png) 0 -44px;
  38. }*/
  39.  
  40. /*sidemenu Item Middle*/
  41. .sidemenu li.middle a:link, .sidemenu li.middle a:visited {
  42. color: #5E7830;
  43. display: block;
  44. background: url(images/menuMiddle.png);
  45. background-repeat:no-repeat;
  46. padding: 1px 0 1px 20px;
  47. font-size: 0.8em;
  48. }
  49. .sidemenu li.middle a:hover {
  50. color: #FFFFFF;
  51. background: url(images/menuMiddle.png) 0 -22px;
  52. }
  53. .sidemenu li.middle a:active {
  54. color: #FFFFFF;
  55. background: url(images/menuMiddle.png) 0 -44px;
  56. }
  57.  
  58. /*Bottom sidemenu Item (rounded corners)*/
  59. .sidemenu li.bottom a:link, .sidemenu li.bottom a:visited {
  60. color: #5E7830;
  61. display: block;
  62. background: url(images/menuBottom.png);
  63. background-repeat:no-repeat;
  64. padding: 1px 0 1px 20px;
  65. font-size: 0.8em;
  66. }
  67. .sidemenu li.bottom a:hover {
  68. color: #FFFFFF;
  69. background: url(images/menuBottom.png) 0 -22px;
  70. }
  71. .sidemenu li.bottom a:active {
  72. color: #FFFFFF;
  73. background: url(images/menuBottom.png) 0 -44px;
  74. }

verticalMenuCSS.html

The Download:

verticalMenuCSS.zip

Tags: , , , , , , ,
Next entries »