http://www.mycfmx.com/index.php/site/index/ en ijwebsites@comcast.net Copyright 2012 2012-03-04T20:17:53+00:00 http://www.mycfmx.com/index.php/site/windows-8-consumer-preview/ http://www.mycfmx.com/index.php/site/windows-8-consumer-preview/#When:20:17:53Z I’ll give you some quick tips on navigating around Windows8 Consumer Preview. Load a program You see the large tiles on the Start screen, click those and they load the program. Easy. Close a program Put the mouse at the top of the screen, left click and hold, drag down to the bottom of the screen, release the mouse button. The program is closed. Switching between programs Say you have the Photos, Mail, Messaging and Weather Apps open at the same time.  Switch between the apps is quite easy and there are 2 ways to do it.  Put your mouse in the upper left corner and you’ll see a thumbnail of the app appear. Click there and it will switch to that app.  Easy and quick. The next way is to put your mouse pointer at the top left corner and slide down along the left edge.  This will show you a list of all available apps that are currently running, just click the one you want to get too and you are there. Quick and easy.  See more windows8 tips here: PC WORLD - A guide to getting around the windows 8 beta with a mouse.  Windows8 2012-03-04T20:17:53+00:00 http://www.mycfmx.com/index.php/site/responsive-web-design-and-using-media-queries/ http://www.mycfmx.com/index.php/site/responsive-web-design-and-using-media-queries/#When:22:05:38Z Taken mostly from an article found on reigndesign.com entitled how-to-not-have-your-new-site-look-awful-on-phones. It used media queries to target multiple devices from smartphones to tablets to desktop. And even a special tag to target the kindle fire. I have rewritten all of the authors media queries with the more optimal way to use them in a webpage. <link rel="stylesheet" href="css/globals.css" /><!--[if lt IE 9]><link rel="stylesheet" href="css/iefix.css" media="all" /><![endif]--><link rel="stylesheet" href="css/3000.css?v=1" media="only screen and (max-width: 3000px)"><link rel="stylesheet" href="css/1600.css?v=1" media="only screen and (max-width: 1600px)"><link rel="stylesheet" href="css/1280.css?v=1" media="only screen and (max-width: 1280px)"><link rel="stylesheet" href="css/1024.css?v=1" media="only screen and (max-width: 1024px)"><link rel="stylesheet" href="css/800.css?v=1" media="only screen and (max-width: 800px)"><link rel="stylesheet" href="css/480.css?v=1" media="only screen and (max-width: 480px)"><link rel="stylesheet" href="css/320.css?v=1" media="only screen and (max-width: 320px)"><!-- Special Style Sheet for special devices --><!-- iPads (landscape) --><link href="css/ipad-landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)"><!-- iPads (portrait) --><link href="css/ipad-portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)"><!-- iPhone4 --><link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio: 1.5)"><!-- Kindle Fire --><link href="css/kindle.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio : 1.5), and (min-device-width : 600px)"><!-- Custom Icon for iPhones/iPads --><link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">  Place the above inside the head tag. Also add the following meta tag: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />  HTML5 2012-01-18T22:05:38+00:00 http://www.mycfmx.com/index.php/site/easiest-to-make-two-columns-in-wordpress/ http://www.mycfmx.com/index.php/site/easiest-to-make-two-columns-in-wordpress/#When:16:37:06Z Searching around on the internet I found a few solutions to the problem I faced, but I felt they were more complicated then they needed to be. The problem was I had a list of posts and i wanted to display them in two columns in alphabetical order. Here was my solution. First thing i did was I made variable called $rowcount outside of the wordpress loop, like this: 1. $rowcount = 0; Secondly, I add a div for my left column outside of the loop. 2. <div style=“float:left; width:40%;”> Thirdly, inside of the loop I incremented the $rowcount variable like this: 3. $rowcount++; // incrememnt rowcount var Fourth, a simple if statement looking for rowcount 17 and close the initial div and open a new div. 4. if ($rowcount == 17 ) { echo "</div><div style='float:left; width:40%;'>"; } 5. Fifth, I output the content i wanted from the posts. 6. I closed up the loop. 7. I close the div outside of the loop. Probably the easiest way to make 2 columns. Wordpress 2011-12-06T16:37:06+00:00 http://www.mycfmx.com/index.php/site/interesting-websites-i-found/ http://www.mycfmx.com/index.php/site/interesting-websites-i-found/#When:01:51:27Z List of useful links that I recently found…lots of timesavers! Get the latest version of some common scripts http://scriptsrc.net/ Tech Blog - Stemkoski http://www.stemkoski.com/ Holy Shit - CSS3 for IE6,7,8. http://fetchak.com/ie-css3/ Publish a podcast the easy way - I’m give this one a test drive tonight. http://podcastgen.sourceforge.net/index.php?lang=en — How to limit the number of posts on the homepage of your wordpress blog (Along with website, I also run a few wordpress blogs and I’ve built a few websites for clients using Wordpress.  Where limiting the number of blog entries in EE is as simple as added limit=“5” to your expression engine entry tag, in Wordpress its different, but also quite simple, if you know the code.) http://wordpress.org/support/topic/limit-number-of-posts-on-home-page-to-one-the-latest — Wordpress has alot of frameworks out there to aid in making amazing templates.  I found two today that look very promising: 1) Genesis Framework for Wordpress - http://www.studiopress.com/ 2) iThemes - Build Websites Easily - http://ithemes.com/ The second framework looks sick. Easily build pretty elaborate layouts and then style it with CSS.  I’m totally looking forward to playing around with this one. Its only $97 and you can use it on as many sites as you want. Pretty impressive. Blogging, News 2011-05-12T01:51:27+00:00 http://www.mycfmx.com/index.php/site/cfx_gzip-compress-and-decompress-gz-libraries-with-coldfusion/ http://www.mycfmx.com/index.php/site/cfx_gzip-compress-and-decompress-gz-libraries-with-coldfusion/#When:22:15:28Z CFX_GZIP is custom tag written in C++ as a DLL for the Windows Platform.  I recently needed a way to decompress some .gz files on my server and this did the trick for sure.  This article is about how to install it because the documentation does not include this part.  Installing CFX Tags is very easy as you will soon find out. Step 1.  Go to the Coldfusion Exchange on adobe.com, here. Step 2. Download the zip file. (You may have to login with your adobe username/password. This extension is free.) Step 3. Extract the contents of the zip file. (You should have 1 .DLL file and 1 index.cfm file.) Step 4. Next you’ll need to place the .DLL file on your server. Either use remote desktop or ftp to upload it.  I used Remote Desktop and dropped the .DLL into the C:ColdFusion8cfx folder on my server. Step 5. You’ll need to access the Coldfusion Administrator, Click the Extension, Click CFX tags. Step 6. Click Register C++ CFX. Step 7: In the Tag Name field type “cfx_gzip”. Step 8. In the Server Library .dll field, copy and paste the path to the DLL file. My path was C:ColdFusion8cfxCFX_GZIP.DLL. Step 9. I opted to note mess with Procedure or Description and i kept the checkbox “checked”. Step 10. Press Submit.  And you’re all set to start using the tag. Coldfusion 2011-04-01T22:15:28+00:00 http://www.mycfmx.com/index.php/site/google-chrome-to-phone/ http://www.mycfmx.com/index.php/site/google-chrome-to-phone/#When:18:30:57Z Google has an app in the android market called “Google Chrome to Phone”. They also have an extension for the Google Chrome web browser called “Google Chrome to Phone” – You need both pieces installed. You install the Google Chrome extension in your web browser. You install the Android App on your phone. So what does it do? It adds a button to Google Chrome that lets you send links to your phone. So, I just visited http://www.sitepoint.com, I click the Google Chrome to Phone button and my phone opens the website in the browser on the phone. Neat. Blogging 2010-08-23T18:30:57+00:00 http://www.mycfmx.com/index.php/site/day-1-html-5/ http://www.mycfmx.com/index.php/site/day-1-html-5/#When:15:33:29Z The project I'm working on involves taking a video heavy website and converting it into a HTML5 / CSS3 / Javascript / jQuery powered mobile website. The current site runs HTML4, Flash (of course!), CSS, and javascript. There are many events that occur in the flash file so its not going to be easy to convert this to HTML5. Not to mention, there are cookies being set and the page checks for there existance and actually changes what occurs on the page. Along the way, I'm going to ask the question, "Which is better for a developer? Flash or HTML5/CSS/Javascript?" I'm not an Apple fan and because I've used Flash for about 10 years and I've whipped up flash animations in no time, i don't see how html5 / css / js could possibly be better for a developer. I hope Adobe makes Flash Player 10 run really nice on the Android phones. I'm looking forward to it. I'm also interested to see how "painful" of a process it is to make a non-flash version of my site work across all browsers. For starters, I'm mainly concerned with Chrome and Safari because these are the two browsers found on the iPhone and Android devices. I have more research to do for RIM Blackberry phones. The first step was taking one of the videos and getting it to the right format. I found a free open source program called HandBrake. So, I took a short video on my Android phone (I have the Droid) and I copied it to my computer and then I converted it to MP4 (H.264) format using HandBrake (just to see if it would work). I was then able to copy it to my cel phone and easily play it in the Android Gallery. Next test for video: Copy it to iPod Touch (oh boy, i have to use stupid iTunes to copy files to the iPod Touch. I can NOT just drag and drop files to the iPod Touch like i do with my Droid. Basically when i plug my Droid into the computer and hit the USB Mount button the phone shows up like another other external hard drive or USB Drive). Not being able to do this on the iPod Touch sucks! Everything goes through iTunes.). The next thing i wanted to do was create a single HTML5 page and embed the video into the page using the HTML5 video tag to see what the player looked like. For now I'm mainly concerned with Safari and Chrome. I foresee, having to convert my files to OGG format too (can anyone suggest a free converter for this format too?) as well (This part is kind of sucks. Firefox won't adopt H.264 support because they fear sometime in the future that the license will be mighty expensive for H.264 have only promised free use of it since 2016. Then your guess is as good as mine. From what I've read, OGG sucks. Google will be coming out with the open source VP8 codec. I'm looking forward to this because it will be something that likely all browsers will adopt (hopefully Apple will even embrace it.). My page was pretty simple and so far i am impressed with the ease-of-use of the video tag. Seems to do exactly what one would expect and it does it very well. However i did notice that in Safari on PC when i went to fullscreen and then exited out of full screen the background color of my webpage changed from white to black. I think that is a bug. This bug might only appear if no background color is set, we will see during day 2 testing. Here's my source code from my very first HTML 5 page. Untitled Document $("document").ready( function () { // do nothing }); Your browser does not support the video tag. Some quick things to point out. Notice the DOCTYPE at the top of the page. It's much shorter and cleaner then typical HTML4 DOCTYPEs. Kudos to HTML 5 for making that shorter and simple and backward compatible for older browsers. The next few lines are basically the same as HTML4. The next line is the HTML5 video tag. Nice! and it works as expected too. woot! Note the line of text that says "Your browser does not support the video tag." In Internet Explorer, this message will display, so what this also means (i think) is that you could have a fall back Flash player for IE / Firefox and it will just work without any additional programming, so thats pretty cool (BUT, also very dumb at the same time. Apple, Google, and Microsoft have all adopted H.264. Firefox and Opera aren't interested in H.264. They use OGG. I'm thinking maybe a mp4 as the primary video, then a OGG files for Firefox / Opera, and then for older versions of browsers using Flash player OR maybe MP4 for Safari, Chrome, IE9, and Flash player for everyone else. So this kind of sucks now because no matter what way we go, we will still have to make multiple versions of the same video shit. Honestly, this is bullshit!!! The purpose of having these standards is should be so that everyone can use it and it be available for free. This makes me think that H.264 is NOT the best choices because its eventually going to require a license (2016 - prepare to pay up). VP8 should replace the H.264 because it is open source, owned by Google, and is a very good video codec (According to the specs, i have not actually used it yet). At least then, we can have just 1 video file instead of multiple versions for each device.) The dream is one universal, free, video codec for everyone ... That points to VP8 as the solution, not H.264. Ideally, I'd like to see one video format that will work with both HTML5 and Flash. So, i think the video playing in HTML5 seems to be very easy and i like it. The next few steps are going to be, well, painful, I am sure. Let's see what Day 2 brings us. HTML5 2010-07-01T15:33:29+00:00 http://www.mycfmx.com/index.php/site/notice-something-different-about-my-website/ http://www.mycfmx.com/index.php/site/notice-something-different-about-my-website/#When:04:30:02Z Google Fonts people! Check out the google fonts preview page. Fantastic implementation! Ok so obviously the fonts i selected aren’t the best for this site. I mainly just wanted to make it very extreme so you could see the different fonts. Pretty amazing. This is the first time I’ve been able to use something other then Arial on my site simply by adding css style for the font specifiying the color, size, all the typical styles for a font and also another line of code that just sits in your header attack above your css. Google has a format for it, it does require a query string (come on, you’ve seen them before…they look like this somepage.html?QueryString=IsMe) - The query string is everything after the Question mark. The question tells the browser, hey! a query string is starting!  Basically, 1 line + 1 block of css = Google Fonts. I’m sure they plan to add a whole host of other popular fonts. Here is the google font preview page: http://code.google.com/webfonts/preview Blogging, CSS 2010-05-21T04:30:02+00:00 http://www.mycfmx.com/index.php/site/css-article-css-hacks-for-ie/ http://www.mycfmx.com/index.php/site/css-article-css-hacks-for-ie/#When:19:59:00Z Click here I’ll write more later on this. CSS 2010-04-21T19:59:00+00:00 http://www.mycfmx.com/index.php/site/another-great-article/ http://www.mycfmx.com/index.php/site/another-great-article/#When:22:20:36Z i was having this problem today and this fixed it for me. Editting a css file and getting the height to work across all browser was proving to be difficult. This fixed it. http://www.dustindiaz.com/min-height-fast-hack/ CSS 2010-04-15T22:20:36+00:00