About admin

This author has not yet filled in any details.
So far admin has created 222 blog entries.

How to autoplay a video using HTML 5 in Chrome


Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you're trying to do.  For example, they added a feature that won't play a video on a website if the sound is enabled.  It will block it because it doesn't want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this: <video controls autoplay loop> <source src="movie.mp4" type="video/mp4"> </video> The issue with this is Chrome [...]

How to autoplay a video using HTML 5 in Chrome2019-09-05T15:16:49-04:00

How to apply CSS to XML


Sometimes there will be times when you'll need to take a body of XML information and apply CSS styles to it.  Luckily, it's not too hard to do.  Let's say you have an XML document that looks like this (the content about the movie is not accurate): <?xml version="1.0" encoding="utf-8" standalone="yes"?> <movie> <title>Monty Python and the Holy Grail</title> <rating>PG-13</rating> <reviews> <rotten>100%</rotten> <metacritic>100%</metacritic> </reviews> <director compensation="$100,000,000">Some really funny guy</director> <boxoffice>$1,000,000,000,000</boxoffice> </movie> If I wanted to style the title, rating, director, and the other tags I would need to apply CSS to this file.  To do that you would need this line of [...]

How to apply CSS to XML2019-09-05T15:20:15-04:00

How to fade in content using HTML, CSS, and JavaScript


Sometimes we want our content to make a cool entrance on a webpage.  Luckily, using CSS and HTML, we can do just that by easily fading something onto the page.  First thing we'll need to do is create a HTML page like so: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title </head> <body> <div id="fademe">Fade me in!</div> </body> </html> This is your typical HTML page that has a div with an id of fademe.  We will be fading the div in later with the text "Fade me in!".  The first thing we'll need to do is create the CSS inside the [...]

How to fade in content using HTML, CSS, and JavaScript2019-09-05T15:22:19-04:00

Create unselectable instructions in a HTML select drop down menu


Today we are talking about how to create unselectable instructions in a HTML select drop down menu.  In HTML, when you create a drop down menu using the <select> tag, there will be times when you'll want to give the user instructions inside the menu itself but not allow them to select the instruction option.  For example, let's say we want to give the user the ability to select what shipping they want for an item they are ordering.  Our select tag would look something like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title> </head> <body> <select> <option>USPS</option> <option>UPS</option> <option>FedEx</option> [...]

Create unselectable instructions in a HTML select drop down menu2019-09-05T15:26:16-04:00

Camtasia SmartFocus Editing Dimensions Error Fix


In Camtasia 9, there is a feature that has been around for a while called "Smart Focus."  What it tries to do is read the video and zoom in and out when Camtasia feels it's necessary.  For example, let's say you were making a screen recording about creating a new folder on your desktop.   When you right click on the screen and the menu pops up, Camtasia's SmartFocus would hopefully recognize that as a time where it needs to zoom in on the video so the user could more easily see what's on the screen. It's not perfect but if you [...]

Camtasia SmartFocus Editing Dimensions Error Fix2019-09-05T15:29:00-04:00

Microsoft Access Keyboard Shortcuts


SkillForge SkillSheet Microsoft Access 2010/13/16 Keyboard Shortcuts Click here to download the PDF version. Frequently Used Shortcuts   In order to… Press Select the active tab of the ribbon and activate KeyTips Alt or F10  (to move to a different tab, use KeyTips or the arrow keys) Open the Home tab Alt+H Open the Tell me box on the ribbon Alt+Q, then enter the search term Display the shortcut menu for the selected item Shift+F10 Move the focus to a different pane of the window F6 Open an existing database Ctrl+O or Ctrl+F12 Show or hide the Navigation Pane F11 Show [...]

Microsoft Access Keyboard Shortcuts2018-12-24T12:17:15-05:00

How to create a database using phpMyAdmin and XAMPP


Video version of this blogpost: When working on a website that is either hosted or local on your computer, sometimes you'll need a database for it.  Back in the day, you would need to know SQL and how to run those commands in some sort of prompt.  Nowadays, we have phpMyAdmin which is a graphical user interface for SQL.  You can click, type in text boxes, and after a while, you'll have a database created along with tables, columns, user permissions, etc. To use phpMyAdmin, you'll need to either install hosting software on your computer such as XAMPP, MAMP, LAMP, or WAMP.  Or, you [...]

How to create a database using phpMyAdmin and XAMPP2019-09-05T15:32:20-04:00

What does the DOCTYPE do in HTML?


What is the DOCTYPE?  When coding in HTML you will see this really weird looking line up there at the top.  It usually looks like this: <!DOCTYPE html> Simply enough, this line tells the browser what version of HTML is being used to create the website.  Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ""> Depending on if you wanted the language to be [...]

What does the DOCTYPE do in HTML?2019-09-05T15:34:00-04:00

Why using document.write is a bad idea in JavaScript


Why is using document.write a bad idea in JavaScript?  Well, document.write is great for debugging or helping you know what a variable is equal to at a certain part in your code.  It's not a good idea to use on an actual web page especially if you're not careful.  The reason is it can erase your whole web page.  Here's an example when document.write can be destructive: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Destroyed by document.write</title> </head> <body> Hello<br> <button id="click">Erase the Doc!</button> </body> <script> var btn = document.getElementById("click"); btn.addEventListener("click",function(){ document.write("Be gone!"); }) </script> </html> We have a button with the [...]

Why using document.write is a bad idea in JavaScript2019-09-05T15:36:28-04:00

How To Run External JavaScript After the HTML Has Loaded


When using JavaScript, sometimes you will run into errors because the external code being used is placed above the HTML it is calling/manipulating.  For this example, we have a HTML file that looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Run JavaScript After HTML Loads</title> <script src="external.js"></script> </head> <body> <div id="changeMe"></div> </body> </html> In that code we can see that it's calling an external JavaScript file called external.js that has this code in it: document.getElementById("changeMe").innerHTML = "I've been changed!"; This is going out to the div with the id of changeMe and is going to switch out the text to [...]

How To Run External JavaScript After the HTML Has Loaded2019-09-05T15:38:47-04:00

JavaScript console.log vs console.dir


So what is the difference between console.log and console.dir in JavaScript?  Well, let's take a look!  If we were to take this code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>console.log vs console.dir</title> </head> <body> <script> console.log("Why, hello!"); console.dir("Why, hello!"); </script> </body> </html> then put it in a text editor, then run it in a browser we would get a blank page.  That is because when we use these commands, they are only viewable in the console itself.  So to see what these commands actually do we need to right-click the page in Chrome or Firefox and choose the inspect option then the [...]

JavaScript console.log vs console.dir2019-09-05T15:41:04-04:00

How To Center Content in a Div Horizontally and Vertically


This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it's actually quite easy.  First, we'll create a simple HTML skeleton with a div that has a class called "centerMe" inside the body tag: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Center Content Horizontally and Vertically</title> </head> <body> <div class="centerMe"> I will be centered in the div horizontally and vertically </div> </body> </html> Now that we have the starting HTML, we can add the CSS inside [...]

How To Center Content in a Div Horizontally and Vertically2019-09-05T15:43:53-04:00

innerHTML vs textContent – The Difference Between These JavaScript Properties


innerHTML vs. textContent, what is the difference between these JavaScript properties and which one should you use?  They do the same thing, right?  No, they actually do not.  The difference between the .innerHTML and .textContent properties is all about the HTML my friends!  textContent renders text and only text, and innerHTML renders text with any HTML applied to it.  To illustrate, here's a quick example you can try in your chosen text editor (just copy and paste it in if you want): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML vs textContent</title> </head> <body> <h2>textContent:</h2> <!--Div that will hold the textContent text--> [...]

innerHTML vs textContent – The Difference Between These JavaScript Properties2019-09-05T15:46:46-04:00

HTML5 Basics – How to create a basic HTML5 document


Video of this tutorial: Hello everyone!  In this post today I'll be showing how to create a basic HTML file using my favorite text editor Brackets.  Brackets is great because it's free, cross-platform, and has some really nice features when using HTML5.  Here is what their home page looks like:   Click here to download Brackets The first thing you'll want to do is download and install Brackets or whatever editor you want to use.  If you really wanted to, you could use good ol' Notepad in Windows and that would work fine.  Once it's finished installing, open it [...]

HTML5 Basics – How to create a basic HTML5 document2019-09-05T15:48:32-04:00

How to Colorize a Black and White Photo in Photoshop


In this tutorial, you will learn how to colorize a black and white photo in Photoshop. Want to learn more about Photoshop? Visit our Photoshop Training Classes page to enroll in one of our live, instructor-led Photoshop classes. You'll learn about Photoshop from an experienced instructor while being able to ask questions and discuss projects you are working on.

How to Colorize a Black and White Photo in Photoshop2018-07-17T13:58:55-04:00

Tableau Training Classes from SkillForge


Announcing Our New Tableau Training Classes Companies around the world are collecting more data than ever - about their customers, their sales and many other aspects of their business. With all of this data, though, the problem becomes how to analyze, make sense of it - and more importantly - make sound business decisions based on it. Business Intelligence tools have increased in popularity in the last few years to help companies do just that. One of the tools that is particularly popular currently is Tableau. Tableau offers five products currently: Tableau Desktop (both Personal and Professional Editions), Tableau Server, Tableau [...]

Tableau Training Classes from SkillForge2018-03-20T18:43:50-04:00

Microsoft Project: Formatting a Gantt Chart for Summary Task


Recently a student posed a question during a Microsoft Project class. How does one format the bars of a Gantt chart to look the same for each unique summary task? Something that may look like this. It begins with creating a custom flag field for each summary task. In Microsoft Project a flag field is a basic Boolean value. A simple yes/no field to identify further action. They are created using the Custom Fields button on the Format tab within the Gantt Chart Tools of the ribbon. The Custom Fields button opens a separate dialog box with many options. Our first [...]

Microsoft Project: Formatting a Gantt Chart for Summary Task2017-01-20T16:08:56-05:00

Access 2013: Creating a Calculated Field


Often times the information you need isn’t stored as a field within a database. As a matter of fact, certain fields make more sense to calculate whenever they are needed instead of storing the value in a table. Microsoft Access 2013 makes this very easy. To create a calculated you will need a query in Design View. Select the Create tab and in the Queries group click Query Design button. The QBE (Query by Example) window opens and the Show Table dialog box is ready for you to add the table or tables you need. Once the table / tables are [...]

Access 2013: Creating a Calculated Field2016-12-31T23:10:35-05:00

Access 2013: Saving a Filter as a Query


You find yourself working in an Access table filtering out some unnecessary data and it dawns on you this filtering is something you’ll end up doing frequently. It would make sense to store this process as a query in the database. Okay, so now I have to switch over to the Create tab and design a new query based on the filter I just applied. Or do I? You can actually save the filter you just applied as a query. The process is simple. Go to the File tab and choose Save As > Save Object As > Save As. Once [...]

Access 2013: Saving a Filter as a Query2016-12-31T22:18:39-05:00

HTML: A Brief History


Long ago in the far off land of Switzerland something very interesting began, and Al Gore wasn’t there. 1989 Tim Berners-Lee proposes an Internet based hypertext system for sharing documents between disparate operating systems while working as a contractor at CERN (European Organization for Nuclear Research). If you’re interested CERN is derived from Conseil Européen pour la Recherche Nucléaire. 1991 The first publicly available description of HTML. It consisted of 18 elements greatly influenced by SGML (Standard Generalized Markup Language). 1993 First proposal of HTML as a specification to the IETF (Internet Engineering Task Force). At the same time Dave Raggett [...]

HTML: A Brief History2016-12-30T12:14:23-05:00

New Templates in Adobe Photoshop CC 2017

2016-12-29T15:48:45-05:00 In this free tutorial, you'll learn about the new templates that come with Adobe Photoshop CC 2017 that can make starting a web, photo or print project easier and faster. For more Photoshop training visit our Photoshop Training page.

New Templates in Adobe Photoshop CC 20172016-12-29T15:48:45-05:00

Changing Microsoft Projects Default Task Duration


In a recent Microsoft Project class a question arose concerning the default task duration, which is set in days. This student had recently been working on a deployment project and the default duration was too broad. It needed to focus on a smaller time-frame and it made perfect sense to set the task duration to hours. An excellent question and the answer couldn’t be easier. To change the default duration for the tasks in a project we need to use the backstage options Microsoft Project makes available. By choosing the File tab and selection Options we are taken to the Project [...]

Changing Microsoft Projects Default Task Duration2016-12-28T10:29:53-05:00

Controlling Eye Settings using Face-Aware Liquify in Photoshop CC 2017

2016-12-14T10:46:47-05:00 In this free tutorial, you'll learn about the new settings to control individual (left/right) eyes using the Face-Aware Liquify tool in Adobe Photoshop CC 2017. Learn more about Photoshop in our Photoshop training courses.

Controlling Eye Settings using Face-Aware Liquify in Photoshop CC 20172016-12-14T10:46:47-05:00

Photoshop CC 2017 Emoji Font Additions


This is just a quick note to add to the others articles on Photoshop’s recent 2017 Release. The Type Tool has a new addition. Wait for it… The Type Tool now offers access to Emoji’s.   I know…  

Photoshop CC 2017 Emoji Font Additions2016-11-30T19:29:14-05:00

Photoshop CC 2017 Property Panel Update


November of 2016 has seen an update to the Adobe Creative Cloud Suite which includes Photoshop. I have already posted one article on the changes to the New Document window and another article on the updates to the Liquify Filter. The focus of this article will be on the changes to the Properties Panel in Photoshop CC 2017. The last couple of updates have seen improvements to the Property Panel, but this by far is the biggest change. Take a look at this screen capture of the 2015.5 Property Panel in use. The Properties Panel contains absolutely no information about the [...]

Photoshop CC 2017 Property Panel Update2016-11-30T18:52:40-05:00

Photoshop CC 2017 Face-Aware Liquify Update


If you remember the last update to Photoshop (Summer 2016) we shared a post about the new Liquify Filters Face-Aware feature. It turned out to be a wonderful addition. The filter addition would naturally recognize the facial region and let you modify eyes, nose, mouth, and face shape. Working on a face or multiple faces became much easier. But there was a drawback…there was only one set of adjustment tools for the eyes. Which meant the changes would be applied equally to both eyes. Photoshop CC 2017 has addressed this issue and has fixed it. The Liquify Filters Face-Aware settings include [...]

Photoshop CC 2017 Face-Aware Liquify Update2016-11-29T00:03:13-05:00

Photoshop CC 2017 New Document Window


Sometimes the changes to an application are subtle, sometimes not so much. Last year’s Start Workspace in Photoshop was one of those not so subtle changes. Just a few weeks back Adobe’s Creative Cloud application suite updated to its 2017 version and Photoshop has added another one of those not so subtle changes. Selecting File > New in the menu bar or the New button within the Start Workspace has resulted in dialog box similar to this for a number of years. If you expanded the Document Type menu you were presented with several choices including; Clipboard, Default Photoshop Size, U.S. [...]

Photoshop CC 2017 New Document Window2016-11-27T22:55:23-05:00

The HTML q Tag


Somewhere in the neighborhood of 18 to 20 years ago I sat down one weekend with a book, a computer, and a few images and put together my first basic website. It was about artists from the Impressionist movement and was not anything to brag about with one exception, I built it myself, using Notepad. That was the era of HTML 3.2 moving toward HTML 4.0. Netscape was my browser of choice and most pages used tables for layout. A lot has changed in the following years but one thing remains…most people don’t know that HTML has a q tag to [...]

The HTML q Tag2016-10-31T16:06:10-04:00

HTML5 Form Date Attribute


Getting corporate America to make the move to HTML5 seemed to take longer than any other transition we’ve seen in the past. In part I’m sure due to the long development process. From first working draft in January of 2008 to stable recommendation in October of 2014, that’s almost 7 years. There are many compelling reasons to make the change but the one we will focus on today deals with forms and an easier way of inputting a date. Early on the primary means of capturing a date was supplying a simple textbox and a visual example of the formatting. It [...]

HTML5 Form Date Attribute2016-10-31T12:18:30-04:00

Adding Power View to the Excel Ribbon


In recent years Microsoft has included several add-ins to boost Excels usage in the world of Business Intelligence. They include Power Map, Power Query, Power Pivot, and our topic of discussion today, Power View for Excel 2013. Each of these ship with the Professional Edition of Excel 2013 but need to be added through the Options Panel. After going through this process I was more than surprised to find Power View was still unavailable. So this posting will help those of you experiencing the same dilemma I faced recently. First things first. This is what my Insert tab looked like after [...]

Adding Power View to the Excel Ribbon2016-10-30T15:19:21-04:00