Tip:
Highlight text to annotate it
X
{QTtext}{timescale:100}{font:Verdana}{size:20}{backColor:0,0,0} {textColor:65280,65280,65280}{width:960}{justify:center}
{plain}
[00:00:00.28] One of the great new features in Joomla! 3.0
[00:00:03.12] is the fact that it is mobile
compatible right out of the box.
[00:00:08.14] So we're looking at the front-end
of our KinetECO Web site and this is
[00:00:12.38] the default Joomla! template
that comes with Joomla! 3.0.
[00:00:16.63] The template is called Protostar.
[00:00:18.17] I am going to go through Protostar in a
lot more detail in the templates chapter,
[00:00:21.92] but I wanted to show you that this is
built using responsive design principles.
[00:00:27.35] Responsive design is one of these very
hot skill sets that are out there right now.
[00:00:32.16] The term was coined by Ethan Marcotte
who defines responsive design as having
[00:00:36.53] three characteristics that were very important.
[00:00:38.98] One was a flexible grid, one was
images that resize and the third is media
[00:00:45.71] queries, which is something
you can use in CSS. So Joomla! 3.0
[00:00:49.65] ships with the Bootstrap framework
and this is a framework of HTML5, CSS3
[00:00:57.02] and jQuery which is bundled together
and maintained by Twitter, Twitter the
[00:01:01.88] company, not Twitter the application.
[00:01:04.21] You can learn more about Bootstrap
if you go to my course Up and Running
[00:01:07.53] with Bootstrap and it will go through just
the Bootstrap side of things using Dreamweaver.
[00:01:11.56] But Bootstrap is now baked into Joomla! 3.0
[00:01:14.11] which means that Joomla! 3.0
[00:01:16.42] is shipping with a responsive grid
and the ability for images to resize
[00:01:22.45] and with media queries and I
wanted to show you that in action.
[00:01:26.05] So I'm here looking at the front-end of
the Web site, my browser is Firefox and
[00:01:30.23] it's currently maximized to this window.
[00:01:33.00] If I click on this so it's no longer
maximized this has actually stepped back to
[00:01:37.62] the size of a mobile phone window and
you can see that the elements on the page
[00:01:42.58] have rearranged themselves.
[00:01:43.81] If I grab the corner of this window
and I drag this on out a little bit,
[00:01:48.96] you'll see that the design of this page
rearranges a little bit as I continue to pull this.
[00:01:55.18] And you can see it snap at
little points in time here.
[00:01:58.34] It's very hard to say exactly how
this is going to impact our Web site.
[00:02:02.82] So when we are looking at something
with absolutely no content in it
[00:02:06.07] whatsoever at this point.
[00:02:07.58] But as we continue to add content to
this Web site and add more functionality to
[00:02:12.39] it we'll go back and we'll take a look
at the responsive nature of the front-end
[00:02:16.49] here and how it's handling the additional
content and extensions that we're
[00:02:20.54] adding to this particular design and how
that is affected here on the front-end.
[00:02:26.85] But, since Joomla! ships with Bootstrap it's
not only used here on the front-end for a template;
[00:02:30.73] it's also used in the back-end of the Web
site.
[00:02:32.88] So if I log in here into the back-end
of the Web site, remember that admin is
[00:02:36.87] the username and admin is the password,
likewise here I can grab the corner of
[00:02:42.14] my browser window and my administrator
template will actually adapt, you can
[00:02:47.65] see it adapting here. I've hit
a break point in the way that Joomla!
[00:02:52.07] is configured with the media queries
and you can see that we've gone from
[00:02:56.12] a three column design down to a one
column design, everything is still here,
[00:03:01.38] it's just further down on the page.
[00:03:03.32] And as I continue to go a little bit
smaller in this window, the navigation has
[00:03:09.16] actually disappeared, I'm left with
this little icon here in the corner,
[00:03:13.49] when I click that I still see
Joomla!'s navigation, it's all here.
[00:03:17.62] It's no longer displayed as drop-down menus;
[00:03:19.91] you can see that there are secondary
navigation here spelled out in the page in
[00:03:24.38] addition to these top-level menu links.
[00:03:26.14] So I could go and click on any of these
things and click on this again to make
[00:03:30.83] that shut down the rest of the way.
[00:03:33.47] If I continue to make this page
smaller, mimicking something like a
[00:03:37.82] mobile phone, you see that this
is now approximately the width of a
[00:03:41.22] mobile phone screen. So you can
actually administer your Joomla!
[00:03:45.14] Web sites now using a mobile phone or using
a tablet or like an iPad or an Android tablet.
[00:03:50.99] And that is a wonderful thing because
if you're ever in a situation where you
[00:03:55.90] need to make a quick change to a Joomla!
[00:03:58.15] Web site, but all you have handy is
your phone, finally you can actually go in
[00:04:01.90] and make those changes and that's right
out of the box using the default Joomla!
[00:04:05.65] administrator template, which is
called Isis and ships with Joomla! 3.0.
[00:04:08.15] So that is the responsive nature at these
Joomla! templates, I'll go through
[00:04:13.44] Joomla! templates in much more detail
in the template chapter of this course,
[00:04:17.77] but I wanted to point this out to you now
so that you would know that you could
[00:04:21.77] continue to work with Joomla!
[00:04:23.02] on your tablet or on your phone as
easily as you do on your desktop.
[00:04:28.06]