BlogBlog
Boilerplate: Web design and development ain’t as easy as it used to be – it’s easier!
NOTE: This look at Boilerplate is part of an upcoming look at the Roots WordPress Theme and, as such, it focuses mostly on v2. Keep in mind that Boilerplate is under constant development (v3 was released in February). In fact, you could think of the Boilerplate changelog as the pulse of HTML5 development. Stay tuned for a look at some fascinating changes in v3.
Ah.…life used to be so much simpler.
In 1998 I picked up a book called ‘Teach yourself HTML 4 in 24 hours’. A couple of days and 350 pages later I had designed, coded and validated my first site.
Of course, that site didn’t do very much or even look very good by today’s standards.
All of this can be overwhelming and the good news has been that there is an incredible community of developers furiously creating fantastic (and free!) tools to make all of this easier.
But this leads to another problem – which tools do I use and trust?
For example, hop into a front-end developer discussion group or forum and ask what HTML5 framework you should use and see how many different recommendations you get..whew..!!
So, what if you wanted a default template for your development that already had all the tried-and-true, up-to-date tools installed and ready to be adapted to your project’s needs – a tool-kit, if you will.
Well, we have those too.
And probably the most popular right now is called HTML5 Boilerplate.
HTML5 Boilerplate (H5BP) is the brain-child of superstar developers Paul Irish and Divya Manian.
I won’t go into all of H5BP’s features (that is covered much better here) but the bottom-line is H5BP is like having a team of developers work for several years to give you an HTML5 template with all the best practices learned the hard way baked in.
H5BP seems especially suited for designers with deadlines who want to focus on presentation and not have to monkey around with a lot of project set-up. Just dump the H5BP files into your project and get to work. Depending on which version you’re using – 1,2, or (new as of February) 3 – here’s what you’ll be starting with:
- Reset CSS with normalized fonts (Eric Meyer’s reset reloaded with HTML5 Baseline and YUI CSS fonts) or Nicolas Gallagher’s Normalize.css.
- Basic print and mobile styles
- .htaccess and other server config files (full of really clever snippets), empty crossdomain policy file for flash, robots.txt, favicon, apple-touch-icon, and 404 files
- HTML5-ready. H5BP uses a tool called Modernizr that includes another tool called the HTML5 Shim (among other things like feature detection) to make sure your HTML5 code looks fine across all browsers including IE6
- jQuery loaded from the Google CDN or locally if the user is offline.
- ddbelated png for an IE6 png fix
- yui profiling
- Optimized Google Analytics script
- Cool little things like a fixes to avoid console.log errors in IE & a fix for document.write issues etc.
The latest H5BP is version 3 and over the past couple of years the development team has grown and the product has been continuously improved. Recently the focus has been on web site performance. To this end, Paul and the crew have developed the H5BP ‘Build Script’. This is something that you run when you’ve finished your design/development work that handles optimizing and minification to make your site a lean and mean web machine.
Ultimately we live in a world of paradox. While the world of web design and development is more complex than ever, there has also never been a better time to work in this field thanks to well thought-out and free tools like HTML5 Boilerplate.
Want to learn more?
Check out this is a video where Paul Irish walks through the entire Boilerplate template and is a great resource.
or
At RealEyes we’ve found it is absolutely crucial that Adobe Connect buyers understand the available licensing structure or have a resource on hand that can be used to answer questions that may come up. In some cases, we’ve found that the licensing parameters were never properly explained in pre-purchase discussions, and the resulting deployment may not be as beneficial to the end user as they initially thought. Because there is no documentation available that goes in-depth about the licensing models (how they work, limitations, advantages, etc.), please consider this post as a reference point.
What we will not cover in this post however is pricing. Since the pricing is dependent on which vertical you fall into (Commercial, Education, Government, Non-Profit, etc.). Pricing is something that should be discussed with your vendor. Please feel free to contact us if you have question about pricing.
First and foremost, it is important to point out that Connect is available in a few different flavors:
- On-Premise (Enterprise) – This deployment is typically hosted on your server(s), and behind your firewall. Since it is a server platform product, it is subject to perpetual licensing. This means that the server software itself and all licensing must be purchased initially, but thereafter (year 2, year 3, etc.) only the Maintenance & Support is required to be purchased annually. M&S is required at time of purchase, and is normally 20% of the total Connect product purchase. In some cases, special exceptions and/or agreements, contracts, etc. have been established and agreed upon by the end user(s) and Adobe, so they may differ. Please visit the Adobe Platinum Maintenance & Support homepage for further details. Please also note that On-Premise deployments can also be a Managed Service offering; meaning that the deployment is an On-Premise installation that is managed by another company. Adobe Systems; as well as other 3rd party companies have various managed service offerings.
- Hosted (SaaS) – This works is also known and referred to as a Software as a Service (SaaS) model. In this case, your Adobe Connect deployment is hosted on Adobe’s reserved server clusters. That being said, you are behind Adobe’s firewalls. In some cases, having your account Hosted may or may not be the best solution. It is always best to first check with your IT Dept., Systems Admin, etc. to see what may or may not be a requirement. Since there may be several compliance regulations that your institution may need to adhere to, or if you may need full integration with other pre-existing server based products, Adobe’s servers may be able to suffice, but those kinds of questions cannot be answered here and now, as the scenarios tend to vary greatly. Hosted account purchases through resellers typically include baseline standard Adobe Connect Help and Support.
Next, are the available Modules for Connect and their correlating licensing models.
Training Module
- Concurrent Learner – These licenses are indicative of the Training Module within Connect, and therefore will enable it. With this licensing model, it enables Connect to deploy Curriculums and/or Courses on the system. Any enrolled users will have their results tracked via the lightweight LMS that Connect offers. The concurrency portion translates to having the ability to have up to the total amount of licenses purchased online at any given time having their results tracked systematically. For instance, if you purchase 100 Concurrent Learner licenses, you have the ability to have up to, but no more than, 100 enrollees online concurrently having their results tracked. Unlimited Curriculums and/or Courses can be created, and you can enroll an unlimited amount of users, but you are capped at how many concurrent licenses you have. So if you have 1,000 enrollees and only 100 licenses, only 100 enrollees can be tracked at any given time, and the remaining enrollees will have their results tracked once the first enrollees have completed the training and logged out of the system.
Meeting Module
- Concurrent User: These licenses are indicative of the Meeting Module within Connect, and therefore will enable it. With this licensing, the total number of licenses you purchase will be the total number of users that can be online in a live meeting at any given time, either hosting or attending a meeting. These licenses do not have to be assigned or applied to named individuals, they can be generalized. However, the concurrency principal described above is still relevant in this case. This model works as a “licensing pool” per se.
- Named Host: These licenses are also indicative of the Meeting Module within Connect, and therefore will enable it. With this licensing, a Named Host can host a Connect Meeting at any given time of up to 100 attendees. The licensing model itself refers to a named, specific user (cannot be a general login) that is in the Meeting Hosts System Group. For instance, if you purchase 15 Named Host licenses, you have the ability to place up to 15 people in the Meeting Hosts System Group. Each of the people in that group can have up to 100 attendees (internal users and/or external users, etc.) in any Meeting Room that they’ve created. This licensing model is best used for frequent usage in Meeting Rooms, or also very adequate for webinars that will not exceed 100 attendees. This is currently the most popular licensing model.
Note: Named Host and Concurrent User cannot co-exist on any Connect deployment, as they are both representative of the Meeting Module
Content Module
- Content Publish: Also known as Author licenses. These licenses are indicative of Content Module within Connect, and therefore will enable it. This will give anyone placed in the Authors System Group the ability to publish Content to Adobe Connect for on-demand access. For instance, if you purchase 15 Content Publish licenses, you have the ability to place up to 15 people in the Authors System Group.
Note: Content Publish licenses are not applicable in On-Premise Connect deployments, as the Content Module is automatically enabled because the Content will be directly published to your server*
Available add-on Modules for Adobe Connect.
- Seminar Rooms: Typically used for webinars, large meetings, etc. A Seminar Room compared to a Meeting Room is like an auditorium compared to a classroom. Seminar Rooms are meant to handle a higher amount of connections. They are priced on a per seat basis. For Hosted deployments, there is a minimum of 200 seats, and a maximum of 1,500 seats. Further, a 30 Day Seminar Room can also be purchased and added for a “one off” event(s), and will be valid for 30 days after implementation. The same seating rules (200 minimum, 1,500 maximum) apply for 30 Day Seminar Rooms.
For On-Premise deployments, it is a minimum of 200 seats as well, and there is no set maximum. It is very important to note that the maximum amount of connections into one Adobe Connect Server is 500. If a higher number is needed, an additional Connect Server (or servers, depending on the account’s capabilities, additional licensing, etc.) is recommended for load balancing.
- Events Module: Also known as Adobe Connect for webinars. The Events Module will give the ability to create custom landing pages tied to any Meeting Rooms, Seminar Rooms, or Virtual Classrooms. When enabled and configured, the Events Module will automatically register and track all attendees that register for the event itself, and report the data into Connect. The data can then be downloaded for future follow-ups, etc.
- WebCast: This is another available licensing model/add-on that is for large events (up to 80,000 attendees). Purchasing and enabling this add-on is also for “one off” event(s), and has set pricing for all verticals. WebCast has the ability to manage all facets of large events, from registration, to post-event follow up and all tracking capability. For further information and pricing, please contact your reseller directly.
Feel free to check out the Adobe Connect 8 FAQ’s homepage, it is a great resource when you have questions about Connect.
If you have immediate questions contact us directly.
What is it?
Using JavaScript with CSS selectors, particularly Classes has traditionally been a little awkward. You end up needing dozens of lines of code with fun stuff like regular expressions to do something simple like toggle a Class. Looking for a better way to do this is how many of us got introduced to jQuery and it’s easy access to the DOM.
The JavaScript API has showed up to the party by implementing the W3C Selectors API.
What does it look like?
It looks a lot like jQuery.
The following example would select all p elements in the document that have a class of either “error” or “warning”.
var alerts = document.querySelectorAll("p.warning, p.error");
(Example above taken from the API Examples)
I’ve created a demo that shows this example in action. It uses the classList property so don’t try this in IE. 
In addition to querySelectorAll, we can use querySelector which returns only the first descendant element. Also, querySelector is not restricted to CSS IDs and Classes – you can use this with HTML5 elements as well:
document.querySelector(‘footer’);
Um…What About Browser Support?
QuerySelector and querySelectorAll are supported by all the major browsers from IE8 and up. Of course you need to be careful which CSS selectors you are querying because not all browser versions recognize all selectors.
Should I care?
Poke around inside jQuery and you’ll find references to querySelector – looks like jQuery is using this native API too (when it can). So, if you’re already using jQuery in your project and you’re more comfortable with jQuery selectors this new API isn’t going to rock your world. If you’re not using jQuery, are not worried about old pre-IE8 browsers and are trying to keep your project super-lightweight then these new selectors will make your coding much easier. So it looks like it is up to you and your situation.
When should I use Presenter and when should I use Captivate?
That is a great question. But, the answer isn’t very clear. However there are some clear differences between the tools that we can use to isolate the best use case, and hopefully get building projects, instead of scratching your head.
Presenter:
Let’s start with Presenter, it is a simpler tool.
What is Adobe Presenter?
It is a plug-in to PowerPoint (2003-2010) that allows you to and add audio, video, flash and quiz functionality to a Power Point presentation. It will then output the presentation to a web-ready format to be delivered delivered with Adobe Connect or a web server. There are also additional output format – a PDF file, which displays the interactive portion in a single page PDF.
OK, great Captivate can do that too right? Yes and no.
Captivate can add audio, video, flash and quiz functionality to a Power Point, but some control and quality is lost.. Because Presenter is a plugin and work inside of PowerPoint, you can maintain control of the slides and changes, update and modifications are simple. Updates in captivate are a little more involved.
Presenter Point #1 : If your content is in PowerPoint, or can be easily created in PowerPoint, then use Presenter.
Think simple, don’t over-complicate the process. If the above statement applies to your eLearning project, then stick with Presenter, no if’s, and’s or but’s about it.
Presenter Point #2: Use simplicity to your advantage.
You can build text and image based presentations in Captivate, and I know groups that have walked away from PPT/Presenter to use Captivate exclusively so they only deal with one software application, but, honestly, it is easier in PPT and Presenter. Simplicity is Presenter’s main attraction to me.
Captivate
Captivate is a wonderful and powerful tool for producing eLearning content. Captivate is a screen/workflow capture application that allows you to create interactive or non-interactive eLearning projects. This is where people can get themselves in trouble. Captivate can tempt users down a road of over-complication and update-nightmares. To simplify the concept - Captivate’s bread and butter functionality is the workflow capture.
Captivate Point #1: Do you need to show or simulate software? Yes? Use Captivate.
Sure, you could do it in PPT and Presenter. Think about all the screen shots and text you’d have to write and arrange. What could take you days in Presenter/PPT will take a few minutes in Captivate.
Captivate Point #2: Looking for more advanced animations, widgets, or branched scenarios? Use Captivate.
If you are looking for more robust animations, better video support, the ability to use widgets, or any of the many additional features that Captivate offers, don’t fight with Presenter, use Captivate.
Now, Presenter vs. Captivate isn’t the best way to think about these two tools. Using the tools together can enhance your eLearning content and make your life easier. Use both tools to save time, and create some top-notch content.
Are you interested in learning more? Do you need help creating content with these tools?
We provide expert training for both Presenter and Captivate or we can create your content for you.
In today’s economy, it seems that many organizations have sacrificed customer service as a way to reduce their overhead. Many groups now use overseas support and may not have any actual staff to help with customer issues. Proudly, we have kept our customer-centric focus here at RealEyes Media.
What has this meant for us and our customers? It means that our clients have purchased from us with the confidence that they are getting the right tools the first time. They also have access to our team of experts who use the tools we sell. Finally, they have access to our certified trainers for official Adobe Authorized training, or custom application development and training as needed.
How does this make your experience better? Think about the last time you purchased software from a company that sells every software application you could want (SHI, CDW, BestBuy, etc.).
How much did your sales rep know about the software you were purchasing? More than what was on the back of the box?
Did you ever try calling them back with a question about using the software? I would guess that you didn’t find much help. This is just the tip of the iceberg of how customer support can make a better experience for purchasing and using software.
Why are the benefits of using a company focused on the software you’re interested in? Companies that focus on specific products are going to be better suited to assess whether the tools are right for you, and what licensing will best suit your specific needs. They can then help you assess and track your usage and help identify where you can make things more efficient or where you can expand to grow your business, not to mention help with adoption of new tools or versions.
Keep this in mind as your organization looks at purchasing software. It is worth the extra effort. You get better support, and someone else “in your corner”.
All of us here at RealEyes are 100% committed to our client’s success and growth with the tools and services we provide, and we look forward to working with all our clients, new and old.
What is Sencha Animator?
Sencha Animator is a new tool that makes it easy to create CSS3 transformation-based animations. So easy that you don’t even need a whiff of CSS3 skills!
Actually, working with Animator will look very familiar to anyone who’s used the Flash IDE (or any tool that uses timelines) to create animations.
Let’s walk through a simple Sencha Animator project.
Our finished project will look like this.
First, you’ll need to download and install Animator – get it here.
1. Set Up Your Project
Once you get it up and running you’ll select File–>New Project and set the size (ours is 600×320). Next, save your project (File –> Save) where you can find it again.
2. Add Images
For our project we’ll be fading in each of the four elements of our logo. Assuming we’ve already separated the logo into PNGs, the first step is to place the images onto the Canvas.
Select the Image Tool and then click anywhere on the Canvas.
Now we have a placeholder graphic on the Canvas. Let’s link this to our image. Click the button next to the default image name in the General Object panel and browse to your image.
While in the Object Panel with your image selected you’ll also want to set the image Name and Position.
Repeat these steps with the additional images. You should now have 3 layers in your Object Tree. You can rearrange these so that the layers are stacked correctly.
3. Well, that’s great – LET’S ANIMATE!
Set the Playhead between 0s and 1s and double-click in the timeline of the bottom layer (ours is called ‘LeftThing’).
This will create a white Keyframe and the Properties for this Keyframe will be displayed.
Under Properties, change the Easing to ‘Linear’. This will connect the Keyframe to another Keyframe at 0s.
Select the Keyframe at 0s and change the Opacity to 0% so that this element will appear to fade in to the scene.
(You can scrub the playhead to watch it fading in — ooohhh, aaahhh!)
Repeat this process with the other two images so that each element fades-in on top of each other. Your timeline should look similar to this.
4. Add Some Text
Let’s create some text and fade that in too.
Select the Text Tool and click on the Canvas.
Just like with the Image Tool, we need to adjust the properties of our new Text Element.
See the screenshot below to see the settings that we used.
To simulate our logo, we duplicated the text layer (Ctrl-D) and changed the Content to a left parenthesis and then repeated to create a right parenthesis. We then positioned and changed the Fill Color of these new text layers to match our RealEyes logo.
Next we’ll animate these layers to fade-in like the previous layers.
5. Add Interactivity
Excellent. Now we have a logo whose various elements fade-in and then the animation stops.
So, how hard would it be to add some interactivity and make the animation repeat if the user clicked on the logo?
Easy!
Here’s how.
Select the top-most image layer (‘Yellow Thing’ in our example) and open the Actions panel. You’ll notice several interactions to choose from.
Select ‘click’ and then ‘Go to next scene’ from the drop-down menu.
6. Export the Project
Almost done! Lastly, we need to select File–>Export Project and then FTP this to our favorite web-server or simply open the html file that Animator creates as it exports the project.
Viola – you have some snappy animation that looks a whole lot like Flash – but isn’t!
Conclusion:
With browser support for CSS3 animation growing everyday, designers and developers have been turning to frameworks, libraries and plugins like transform.js, paper.js, move.js and JSAnim to simplify their workflow. However, making convincing animations with pure code can be a frustrating and ultimately disappointing process. Because successful animation depends on nuance and timing, creating them with some kind of IDE or GUI has always been the natural solution (Flash owes a lot of it’s success to it’s easy to use and powerful timeline controls).
Without getting into advanced easing, multiple scenes, z-axis rotations, etc.., we’re really just scratching the surface of what this tool is capable of. While Sencha Animator is still a work in progress and will never be able to offer the power of the Flash IDE, we’ve seen that Animator is intuitive, easy to learn and offers a time-saving GUI for modifying CSS properties over time.
Another plus – the version that we used (1.2) seemed very stable.
Interested in learning more about the power of Sencha or their tools?
RealEyes is participating in Doors Open Denver 2012 this April 14th & 15th.
Doors Open Denver (DOD) is a FREE, annual, two-day event celebrating architecture, and design. Over 70 sites are open to the public.
The RealEyes Media office building A.K.A. the Campbell House or Cook House was built in 1886. The building was designed by Ernest Phillip Varian also know for projects such as the Denver Athletic Club, University Club and Cavalry Baptist Church. The Campbell House resides is in the Quality Hill historic district, and is one of only six historic landmarks within the district and was added to the historical register in 1974 as registry number 55.
Check out the DOD web site for a list of participating sites & properties, self-guided & expert guided tours, as well as a photo contest sponsored by Mike’s Camera. Last year’s photo contest winners can be viewed on the Denver Arts Interactive Website.
We are in the process of renovating the property so come check out he RealEyes offices on April 14th and 15th and let us know what you think.
The other day a call came in from from a customer who had questions about Adobe Flash Media Server and if it would be the right software for their situation. After listening to their questions and exactly what their requirements were, I moved on from there.
As a product specialists, solutions engineers, developers, and trainers, the team here wear multiple hats. So in this case, I put on my solutions engineer hat, and began assessing their needs case.
Their initial inquiry was about streaming Flash based content within their Intranet. The customer was searching for a way to package internal asset videos and SCORM based training content together into one piece that could be uploaded to their proprietary Learning Management System (LMS). He had mentioned that they also had full motion videos, and that they too would like to be able to bring those recordings into the training piece. He asked about Adobe Captivate initially.
Seems easy enough, right? Give them Captivate.
Not so fast.
This Flash based content was quite complex and not as efficient as it could be. I recognized this as something I could use to minimize the clutter, and streamline the content from start to finish. The quick and easy route to a solution would have been to use Captivate and a couple other software applications. This would have worked, but it wasn’t the best solution. I’m a firm believer that less is more when it comes to software applications. The goal was to make it easier for end users to navigate and comprehend, as well as easier to manage for the content creators.
The solution actually turned out to be pretty simple – I had gathered all of the necessary information, the keywords of SCORM and LMS were a big help, from him and I decided that Adobe Presenter would be a better solution because of its simplicity. LIke any good customer, he questioned the solution & I explained it this way:
- Presenter has the ability to import the internal asset videos (already in .flv format).
- The full motion videos were already in .swf format, and Adobe Presenter can import those, as well.
- Presenter is a SCORM compliant eLearning content authoring tool, so you can leverage its quiz functionality to build the quiz, as well as deploy it to any LMS that utilizes SCORM as its reporting engine.
In the end, this was the solution that the customer ended up using. He appreciated the simplicity factor. And since he had really only been tasked with this project as a result of an employee leaving the company the simplicity was important to him since this wasn’t his primary role. A big win for the customer.
The point of this post is to emphasize just how important it really is to listen to all of the requirements before making any judgments and beginning to endeavor down that solution’s path. There are always multiple solutions to a problem. We help to determine the best solution.
The team at RealEyes excels at proposing the best solution for the situation. We take great pride in being an Adobe Solution Partner and Adobe Certified Instructors.
Looking for a solution to a problem?
This year, the RealEyes Media crew has turned into Androids for our annual Holiday employee collage. Not only do we look awesome, but we’re celebrating all the mobile work that we’ve done this past year … and not just for Android, but for iOS and Blackberry, too.
As always, everyone at RealEyes Media made his or her own avatar. Can you match them all up without reading the names? Click on the image above for a larger view.
Whatever your practice or platform, we wish all of our friends and clients every joy this Holiday season!
Ever sit through 8, 10 or more hours of training and come out feeling like it was a big waste of time? Regardless of the instructor and class content, there are some things that you can do to improve and benefit from any training that you attend.
The following 5 tips are based on observations that I, as both a trainee and trainer, have found to improve the experience and overall learning retention achieved from training sessions. These benefits apply to both short, 1-2 hour sessions, as well as longer, 3-5 day sessions. So take note and see if these improve your next training experience.
Make sure the training uses labs for practical experience
Your training is for more than just passing an exam, right? If you want to learn how to do your job well, make sure whatever training you invest in provides real experience performing tasks with hardware, operating systems, and networking. Even better, find training that combines this hands-on experience with practice exams, expert video instruction, and written reference material for a complete training package. There’s more than one way to learn, so be sure to incorporate different methods in your training. Each method will build on the others and reinforce what you’re learning.
Don’t limit yourself to the prescribed steps
This doesn’t mean that you shouldn’t go through the steps. Go through them, and then after that, add in your own changes ideas and tests. This will give you a better and deeper understanding of the concept.
Make sure you get the fundamentals
Before you venture out on your own, away from access to an instructor, make sure you understand the main processes and concepts. That way when you are on your own, you will be able to more quickly resolve issues and problems without having to “start from scratch”.
Ask Questions
Make sure you are getting the training you want and need. Let the instructor know when you have specific questions or when you’d like to discuss something further. Instructors love to help. Lead them to where they can help you the most.
Create Context
If the content doesn’t relate to what you are currently working on or something you have worked on in the past, it will more difficult to retain. Look for ways to relate the training material back to you. Email yourself ideas, code snippets and thoughts as reminders.
Don’t Stop After the Training is Over
Make sure you review and use the materials and information you were provided. The more you use and review, the more benefit you will gain.
Excited about your next training session now? We thought you might be.
Check out the training that RealEyes offers. Or, you can contact us directly about custom training and consulting for your specific needs.
