Warren Shea - World of Warren

Archive for the ‘HTML5’ Category

Responsive Layout + worldofwarren.com

Wednesday, February 20th, 2013 at 1:04 am

About 5 minutes after my last post, I realize…I can’t really do a fully responsive layout with all my themes. Some of the themes will work with a responsive layout (gmail, google+); some (megaman, naruto) will not. So I’ve decided not to support multiple themes on mobile devices, much to my girlfriend’s dismay (she likes the megaman theme).

As such, I’ve been able to create a responsive layout that will occur upon using the Google+ Theme (which is the default theme).

Going to my site on a variety of resolutions will now show different results. Breakpoints are:
1000px, 768px, 480px.

It looks like:

Click the picture for a bigger one.

It was pretty easy. While it’s not the proper 16-grid responsive layout that I originally wanted to do, this custom responsive layout serves its purpose. If not for my multiple themes, I’d definitely want to properly do this. Not sure if I should be doing it for my warrenshea.com site. Its current layout is so much a part of the site…I don’t know if I can/want to mobilize it.

Anyways, feel free to check out this site on your iPhone or Android! I’m very happy with the results. Having the navigation in a dropdown; having the search at the top will really make going to my site on those drunken nights at the bar when I bring up something from my life easier. That’s the main purpose for this responsive layout, to make my site more usable when i’m drunktarded.

Also – two resources I found useful to do a responsive layout:

Responsify.it – a good place for a responsive template. Rather than use some person’s template, I found (and asked around) that it was better to create your own to understand and eliminate bloat.
Viewport Resizer – The best thing ever! Saves a bookmark to your bookmarks which, when clicked, adds a small viewport toolbar to change the viewports of your webpage but stay on the same page. You have to see it/use it to believe/understand it. But this thing is AWESOME.

Posted in All Posts, Development, Google+, HTML5, New Technologies, Site Updates, Web Design, Web Development, worldofwarren.com | No Comments »

Site Updates: warrenshea.com & IE8

Thursday, April 26th, 2012 at 2:02 pm

warrenshea.com uses HTML5, which isn’t supported by IE8. Which is unfortunate because IE8 is used pretty frequently.

I didn’t wanna do another stylesheet/javascript and update both…so I used one of my favorite things: my proxy.php file

This is my default.php for warrenshea.com. Unfortunately, I did have to do a big IF statement but that’s okay because this code never changes. So what it does is check it it’s IE8 (ie. doesn’t support HTML5), and then changes some of the tags: <header> to <div id=”header”>. I’ll likely change the IF statement to something better later…but that’s not the point of this post.

<?php

$srvr_http_user_agent = $_SERVER[‘HTTP_USER_AGENT’];

if ((stristr($srvr_http_user_agent,”MSIE 6.0″) == true) ||

  (stristr($srvr_http_user_agent,”MSIE 7.0″) == true) ||

  (stristr($srvr_http_user_agent,”MSIE 8.0″) == true)) {?>

<!doctype html>

<html>

  <head>

    <link rel=”stylesheet” href=”common/proxy.php?url=stylesheet.css&type=css”>

  </head>

  <body>

    <div id=”header”>

      <div id=”nav”>

        <ul id=”nav-text”></ul>

        <ul id=”nav-background”></ul>

      </div>

      .

      .

    <script src=”common/proxy.php?url=scripts.js&type=js”></script>

  </body>

</html><?php } else { ?><!doctype html>

<html lang=”en-us”>

  <head>

    <link rel=”stylesheet” href=”common/stylesheet.css”>

  </head>

  <body>

    <header>

      <nav>

        <ul id=”nav-text”></ul>

        <ul id=”nav-background”></ul>

      </nav>

    .

    .

    <script src=”common/scripts.js”></script>

  </body>

</html><?php } ?>

Doing this gets rid of some HTML5 tags but the CSS and JavaScript/jQuery still reference the HTML5 tags. So I like to use my proxy.php, which loads a URL, and gives me the option to manipulate it.
FYI – For XML, I use it for my twitter XML (I used to have it done through JavaScript but I found that it hindered load time).

<?php header(“Expires:Mon, 31 Dec 2010 05:00:00 GMT”); ?>

<?php

$page_contents = file_get_contents($_GET[“url”]);

if ($_GET[“type”] == “css”) {

  header(“Content-type: text/css”);

  $page_contents = str_replace(“header”,”#header”,$page_contents);

  $page_contents = str_replace(“##header”,”#header”,$page_contents);

  $page_contents = str_replace(“footer”,”#footer”,$page_contents);

  $page_contents = str_replace(“##footer”,”#footer”,$page_contents);

  $page_contents = str_replace(“content-#footer”,”content-footer”,$page_contents);

  $page_contents = str_replace(“nav”,”#nav”,$page_contents);

  $page_contents = str_replace(“##nav-text”,”#nav-text”,$page_contents);

  $page_contents = str_replace(“##nav-background”,”#nav-background”,$page_contents);  

} else if ($_GET[“type”] == “js”) {

  header(“Content-type: application/javascript”);

  $page_contents = str_replace(‘$(“header”)’,’$(“#header”)’,$page_contents);

  $page_contents = str_replace(‘$(“nav”)’,’$(“#nav”)’,$page_contents);

  $page_contents = str_replace(‘$(“footer”)’,’$(“#footer”)’,$page_contents);

} else if ($_GET[“type”] = “xml”) {

  header(“Content-type: text/xml”);

}

echo $page_contents;

?>

Yes, it’s very hacky and likely not efficient but it does the job.
It changes:
http://warrenshea.com/common/stylesheet.css (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=stylesheet.css&type=css (HTML5 bad)
and
http://warrenshea.com/common/scripts.js (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=scripts.js&type=js (HTML5 bad)
but I only have to edit one file and it’ll make the non-HTML5 version automatically. Sweet.

Anyways, I thought this was worth sharing. Someone might find this technique useful.

Posted in All Posts, Browsers, Development, HTML5, PHP, Tutorials, warrenshea.com | No Comments »

Tutorial: CSS3 DIV Shadow

Tuesday, January 17th, 2012 at 2:36 pm

Purpose of this tutorial
To put a nice, subtle shadow just below a DIV. This shadow fades out to the background and is alpha transparent.

What you need to know
HTML and CSS

Note
While this generally works on any website, it doesn’t work too well with my themes, other than Google+ theme. I suggest you use that theme to properly see this.

Example

Code

Explanation
The key things are
.box_example’s position:relative
and…all of .box_example:after‘s CSS.
I guess playing around with the CSS to get the shadow you want. There’s not much else to discuss…lol worst tutorial ever :)

My ramblings
I just found this out through a co-worker and I’m using it everywhere. I think it’s a very simple, subtle way to make an item pop out a little more. FYI he first saw it on LinkedIn, here developer.linkedin.com

Posted in All Posts, CSS, HTML5, Tutorials | No Comments »

My Personal (Developer) Resolve

Wednesday, January 12th, 2011 at 1:31 pm

Resolve
To be awesome at (almost) all aspects in the limited stage of the web.

*The following is a list on all the web-related items that I already know, would like to learn, and have no interest in learning (despite being related to the web). Some points may not seem to make sense, that is because my knowledge in the area is so terrible that I don’t know what I’m writing >_<

This Resolve includes:

The ability to develop proficiently in various development languages, frameworks, and techniques including:
- ASP.NET 4.0 C#
- ASP 3.0 VB (Classic)
- HTML5
- PHP 5
- XHTML 1.0/HTML 4.01
- JavaScript
- MS SQL (and mySQL)
- Ruby (on Rails) (maybe…)
- CSS2
- CSS3
- SASS
- OOP
- AJAX
- JSON
- XML
- XSL/XSLT
- DOM
- DHTML
- jQuery
- Prototype (and script.aculo.us)
- MooTools
- Google Chart API
- Facebook API
- Twitter API
- Google Search Appliance API
The ability to develop for major browsers including Chrome, Firefox, Internet Explorer, Safari and (maybe) Opera
Familiarity with Web Accessibility standards including:
- WCAG 2.0 standards
- CNIB (The Canadian National Institute for the Blind) Priority Level 2
Understanding of fundamental SEO principles and Analytic tools including:
- Google Analytics
- Google Search Appliance
Knowledge of various Content Management System and Web Publishing tools including:
- Drupal 7 and Drupal
- WordPress and Blogger
- Vignette 7 and Vignette 6
Proficiency in various graphic programs including:
- Photoshop
- Fireworks

This Resolve does not include:

Mobile development (although this may change in the future)
Email development
Development of non-web languages including:
- C
- C++
- Java
- Visual Basic
- Perl
- Python
Development of non-web languages that are fundamentally from the list above including:
- JSP (Java) (although this may change in the future)
- Mason (Perl)
- Django/Zope (Python)
Development of supporting web languages:
- ActionScript
Proficiency in web-related tools including:
- Flash, Premiere, Illustrator
- Silverlight (although this may change in the future)

Posted in All Posts, ASP.NET, Browsers, CSS, Development, HTML5, JavaScript / Java Frameworks, My Life, New Technologies, PHP, Web Developer, XHTML | 3 Comments »

What to learn? HTML5 or ASP.NET?

Monday, January 10th, 2011 at 4:00 pm

The CSS book that I’m currently reading is 350 pages. I’m currently on 230, having gone through 100 on Saturday…and the other 130 in the 2 weeks before -_-; I can accomplish so much in one night if I focus! :S

As I close in on the final 120 pages, which I hope to finish very soon, I’m wondering what to study next?

I decided that for my EPIC SITE, I may as well do it in ASP.NET 3.5/4 AND HTML 5 (not XHTML 1.0).

While the ASP.NET code would compile and render to XHTML 1.0, would that be HTML5 valid? I mean, if I built my site in HTML5, I would like it…y’know, in all HTML5, not HTML5 + ASP.NET compiled XHTML1.0/HTML 4.01.

I really like the look of <br />….<br > just looks wrong to me. It’s how I used to develop…but gave that up to be XHTML valid. Now, <br> is valid again in HTML5 so why do <br />? <br> is 2 characters smaller as well as just as easy to read as <br />

I really (and I wouldn’t be surprised if you thought this too) have a bad habit of procrastinating my ASP.NET learning. Like, did I really need to read a CSS book before ASP.NET? Should I really be reading a HTML5 book before studying a multiple-year resolve of studying ASP.NET?

I’m trying to learn both for my EPIC SITE but I imagine that the learning curve for ASP.NET is much higher than HTML5, with the exception of the canvas tag, which seems very daunting. Like learning ActionScript….bleh.

There’s so much to learn! Not that I’m under a strict time limit, everything is self-imposed…but it seems like if you don’t study frequently, it’s so easy to fall behind in technology. I’m already behind with my current skills…but at least I’m attempting to catch up. That’s leaps and bounds better than the progress from my recent, WoW years.

Posted in All Posts, ASP.NET, CSS, Development, Epic Site (yet to be named), HTML5, New Technologies, Web Developer | 1 Comment »