News for the ‘tutorial’ Category

HTML5 Video and Detection for iOS

I recently was tasked with looking into why an HTML5 video player was not working within application browsers on the iOS platform. There is nothing wrong with the HTML5 video player firing up and working in the native web browsing app, Safari. A co-worker wrote a nice snippet to parse the user agent for key words.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.userAgent)

The above code is doing a few things:

  1. regex pattern: /iphone|ipad|ipod/i where the ‘i’ denotes that it is not case sensitive.
  2. .text(); A method that tests for a match in a string, in this case the regex object seen above.
  3. window.navigator.userAgent; grabbing the userAgent from the window{} in the DOM

This alone is great, and works flawlessly. However this breaks when using an embedded web browser with in and iOS application, such as Twitter, Facebook, Pinterest, Reddit, etc.. Here are 3 examples of the user agent strings that are passed in the headers.

  1. Safari App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537.53
  2. Twitter App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 Twitter for iPhone
  3. Facebook App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 [FBAN/FBIOS;FBAV/6.5.1;FBBV/377040;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/7.0.2;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBOP/1]

In the above examples, you will notice some differences. This is a very long string to test against. I have done some research and have seen a few examples of how to properly do iOS detection:

//Another method without using Regular Expressions:
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false ),
    iOSversion = false;

if( iOS ){
    iOSversion = ( !!window.history && !!window.history.pushState ? '4+' : '4-' );
    if( !!window.matchMedia ){ iOSversion = '5+'; }
}


//Similar to what my co-worker did.
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );


All the above work, however they do not work for embedded browsers. I was investigating the navigator object when I saw two that struck out at me:
navigator{}

Navigator {
appCodeName: "Mozilla",
appName: "Netscape",
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
cookieEnabled: true,
doNotTrack: null,
geolocation: Geolocation,
language: "en-US",
mimeTypes: MimeTypeArray,
onLine: true,
platform: "MacIntel",
plugins: PluginArray,
product: "Gecko",
productSub: "20030107",
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
vendor: "Apple Computer, Inc.",
vendorSub: "",
webkitPersistentStorage: StorageQuota,
webkitTemporaryStorage: StorageQuota,
__proto__: Navigator}


The two objects that struck out at me were:

  • vendor: “Apple Computer, Inc.”
  • platform: “MacIntel”

I had to rule vendor out, because that would be the same when using desktop Safari Browser. The platform however, changes and is specific to the device you are using:

  • platform: “MacIntel”
  • platform: “iPad”
  • platform: “iPod”
  • platform: “iPhone”

So the simple elegant solution to resolve the HTML5 video issues in embedded browsers of iOS applications was to run the test against the platform object and not the userAgent.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.platform)

Posted: October 11th, 2013
Categories: 9-5, code, Info, tutorial
Tags: , ,
Comments: No Comments.

Custom Login Screen for WordPress

Quick an dirty plugin to customize your wordpress admin login screen. Simply install the plugin, activate and upload your logo and background image.
Can download it here: Custom Login Plugin

Adding a custom_login() and defining the paths for the CSS.

function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');

Customizing the CSS:

/* Custom Login Styles */
.background-cover{
        background:url('/wp-content/themes/custom-login/background.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover; 
        position:fixed; 
        top:0; 
        left:0; 
        z-index:10; 
        overflow: hidden; 
        width: 100%; 
        height:100%;
} 
#login{ z-index:9999; position:relative; }
.login form { box-shadow: 0px 0px 0px 0px !important; border-radius: 10px;}
.login h1 a { background:url('/wp-content/themes/custom-login/logo.png') no-repeat center top !important; display: inline-block; width:130px;} 
input.button-primary, button.button-primary, a.button-primary{ 
        border-radius: 3px !important;
        background:url('/wp-content/themes/custom-login/img/button.jpg'); 
                border:none !important;
                font-weight:normal !important;
                text-shadow:none !important;
        }

.button:active, .submit input:active, .button-secondary:active {
        background:#386CB4 !important; 
        text-shadow: none !important;
        text-decoration: underline !important;
}
input.button-primary, button.button-primary, a.button-primary{ border-color: #ccc;font-weight: bold;color: white;background: #386CB4}
.login #nav a, .login #backtoblog a {
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover{
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav, .login #backtoblog{
        text-shadow: none !important;
}
Posted: December 17th, 2012
Categories: code, Design, tutorial
Tags:
Comments: No Comments.

Encoding your files at the server level for faster pages

Have you ever found your self waiting for a web page to load? Often times reminiscent of your AOL dial-up days? If so, look no further. Some simple .htaccess or server modification will allow your site to zip along and load +30% faster!

# DEFLATE by type - html, text, css, xml
AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml
 
# DEFLATE by type - javascript
AddOutputFilterByType DEFLATE application/x-javascript application/javascript text/javascript text/x-js text/x-javascript
 
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml

source:beerpla.net/

Posted: November 26th, 2012
Categories: code, tutorial
Tags: ,
Comments: 1 Comment.

Microdata and Microformating

SEO is taking on a whole new dimension. Sure you can semantically mark up a webpage using proper HTML elements, but how can you semanctically markup the content of a page? Enter Microdata. This is nothing new, but with Google, Bing and Yahoo! collaborating and backing schema.org, advances are starting to be made.

Here is an excerpt straight from their documentation:
Let’s start with a concrete example. Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

To begin, identify the section of the page that is “about” the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

By adding itemscope, you are specifying that the HTML contained in the <div>…</div> block is about a particular item.

But it’s not all that helpful to specify that there is an item being discussed without specifying what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.

Posted: October 31st, 2011
Categories: code, Info, tutorial
Tags:
Comments: No Comments.

@font-face CSS3

While creating my site, I decided to implement my own font, one that is not a generic browser or system font. To achieve this, I decided to use the new CSS3 @font-face property. The simple syntax is as follows:

@font-face {
font-family: 'elanio';
src: url('elanio.eot?') format('tryetype'),

This is great syntax, but I was not done yet. While this will work, it is not ironclad cross browser compliant. Each browser will only recognize certain font types, so you much create backup syntax and fall backs. Take a look at the following:

@font-face {
  font-family: 'Elanio Bro';
  src: url('ElanioBro.eot?') format('eot'), url('ElanioBro.woff') format('woff'), url('ElanioBro.ttf') format('truetype');
}

Let’s take a look at what is going on here: src: url(‘ElanioBro.eot?’) this question mark ‘?’ at the end simply forces a no 404 page in IE. With out it, IE would request the source file as such: …elaniobro.eot’)%20format(‘… which would result in a 404.

This method is credited to the same guy behind font squirrel and via Paul Irish’s blog

Posted: May 31st, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

Google maps longitude & latitude coordinates

While working on my site, I decided to incorporate Google maps into my biography page to enhance the appearance as well as to provide a little bit of interactivity. I wanted to customize the appearance, i.e. the markers and the the accompanying popout.

To achieve this I had to first figure out the longitude and latitude in which to input into the map function that is called by the Google API. To do this, I simply went to www.maps.google.com searched for a location I wished to plot and put the following in the URL address bar and hit enter. This created a JavaScript alert with the longitudinal coordinates I needed to place markers on the map.


javascript:void(prompt('',gApplication.getMap().getCenter()));

Posted: February 19th, 2011
Categories: tutorial
Tags:
Comments: No Comments.

Overriding inline CSS

While working on the MLS (Major League Soccer) redesign, I came across an instance where I needed to override an inline style. I did not think this was possible at first, but after doing some research and googling, I came up with this solution. It uses CSS selectors which are very powerful and allow you to target specific elements on a page regardless of an ‘id’ or ‘class’.

Here is an example of inline styles being applied to an element on the page:

<div class="example-page">
    <div class="example-content">
        <div id="picture" style="position:absolute; margin:100px">
            <img src="/img/example.png" height="100" width="100"/>
        </div>
    </div>
</div>


Here is how you can override the inline style:

#picture[style]
{
    position:relative;
    margin:0;
}

Posted: February 2nd, 2011
Categories: code, tutorial
Tags:
Comments: No Comments.

IE7 not displaying CSS background image

I ran into a problem while working on a site for a client, where the background image was not displaying in IE7 at all. I was pouring over forums and looking for a fix. I came across multiple “solutions”, but none of them worked.

After re-reading my code, I noticed a ‘typo’, if you will, in my code.

Original CSS code:


body {
background: #ccc url('../../img/bg.gif')repeat-x top;
}


The above code worked perfectly in all browsers EXCEPT IE. I noticed that there was no space following the img path declaration. I inserted a space and voila!
Working CSS code:


body {
background: #ccc url('../../img/bg.gif') repeat-x top;
}


Hope this helps some of you who have been stuck.

Posted: October 19th, 2010
Categories: code, tutorial
Tags: ,
Comments: No Comments.

HTML e-blasts

Over my career, I have been tasked with testing, designing and building e-newsletters. When doing such, there are a some key points you should keep in mind.

  1. simplicity
  2. e-mail clients
  3. coding practice
  4. trial & error

I will go through and describe each key point in detail.

1: SIMPLICITY
This is possibly the most overlook feature when working with e-newsletters. I say simplicity for many reasons. Most importantly is design. When working with HTML e-newsletters, you have to get out of the habit of trying to push the envelope. The reason for this, is simple. You can’t over design a news letter without running of the risk of losing the importance of the content.

2: E-MAIL CLIENTS
If you work with e-newsletters, I know you’ve crossed the bridge. Imagine the IE6 frustration level and magnify this by as many e-mail clients your subscription list has. Each e-mail client renders the HTML code used to create the e-newsletter differently. Whether it’s G-mail, Yahoo!, MS Outlook, Excite, Earthlink, etc. You will run into issues where will render completely differently in each client. The main reason for this leads to the next topic.

3: CODING PRACTICE
I know many of you are quite savvy with CSS and all the incredible and nifty things you can accomplish with this. Floats, z-index, repeats, etc.. However, due to the nature of how e-mail clients render the code differently, you are better off sticking with HTML and coding with tables. Try and limit CSS as much as possible. If you can code it in HTML do so rather then CSS. Ex:
Hello

Hello

 <span style="font: italic small-caps 900 18px arial">Hello</span>


You should do this:
Hello



Hello


<font face="Arial, Helvetica, sans-serif" size="+1" style="font-variant:small-caps;">
<em>
<b>Hello</b>
</em>
</font>

4.TRIAL & ERROR
While many e-mail clients do allow CSS, most do not. However, due to the nature of Moore’s Law, you should continually use trial & error to see what does and does not work.

Posted: September 19th, 2010
Categories: tutorial
Tags: ,
Comments: No Comments.

Convert MS Excel to valid XML markup

Hey everyone. I just wanted to share some knowledge that I learned in the past few days that I think may help many others in their quest for a quick simple solution for exporting a Microsoft Excel document to XML.

I was tasked with creating an HTML page that had to display a Microsoft excel document with some 4,500 entries. My boss also wanted it to be XML for quick and easy changes/updates/etc.. There was no way I was going to sit down, and hand code some 12,500 lines of code and spell check it by Friday.

So I figured out how to export the Excel document into XML. and boy did it save me time. I scoured the internet for hours and found little documentation on this, and Microsoft Help was not that explicit in their explanation.

******************This is for Microsoft Excel 2003******************

So Here is my mini tutorial:

  1. Create an XML schema to be used as a map inside Microsoft Excel
    Ex:

    • –Must Use Multiple instances of the Tags if you want
    • –Excel to create multiple Tags ( is created twice for Repetition)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-------------------------------------------------------------------- --Must Use Multiple instances of the Tags if you want --Excel to create multiple Tags ( is created twice for Repetition) --------------------------------------------------------------------!-->
<CATALOG> <USER> <ID></ID> <COUNTRY></COUNTRY> </USER> <USER> <ID></ID> <COUNTRY></COUNTRY> </USER> </CATALOG>

Once you have your map saved, and named logically such as “myexceldocumentname”_map.xml you are ready to open up Excel.

Once inside Excel open up your spreadsheet that you want converted to XML for use to display in HTML.

  1. Click Data/XML/XML Source from the menu
  2. The XML Source window should open. Click XML Maps on the bottom
  3. Navigate to the .xml file we created and saved earlier
  4. Click OK OK OK to get out of the prompt and back to your document.
  5. Inside the XML source window you will now see a schema/tree diagram of the .xml document we created earlier.
  6. Click and drag the corresponding tags to the correct column/row that has the info associated with it.
  7. Click Data/XML/Export
  8. You should now have an .xml document with the correct values inside of the tags that corresponds with your Microsoft excel document.

I later had to Style the .xml with .xsl to display in a web browser, but .xsl is a beast in and of itself.

Cheers!

Posted: July 8th, 2010
Categories: tutorial
Tags:
Comments: No Comments.