Tip:
Highlight text to annotate it
X
How is everyone doing?
STUDENT: Inaudible.
PROFESSOR: Good. Thank you for coming out tonight.
It is April 24 and we have three weeks left and the
final
week. I think in general for the rest of tonight
at least we'll try it and if it works even semi well, I would suggest for the rest of the
weeks in this Wednesday class we have half the class open
to lab and working on projects. That would be open to both classes.
I think it would
be helpful for everybody. A long time ago a student asked me are you going
to talk for three weeks every week? For the rest of the semester I
will no longer talk for
hours every week? For the rest of
the semester I will no longer talk for three hours.
STUDENT: Inaudible.
PROFESSOR: The secret is out. Somebody had a question or was just
raising their hand? What was the question?
You aren't eligible.
Only one student was today. Cal. Tonight though before we get started into
a lab and I thought the second half of the class would be that unless we want to switch
it but that probably wouldn't work because there might be people leaving. I thought we
would go into building a mobile website which I think pertains to both classes at
in that the advanced dream weaver class should go through this material and
J query mobile is a big part of the integration that dream weaver has
done to enable mobile web sites. It has some
features -- the J
query library and integrated mobile environment and for the H T M L class it is
appropriate to understand some of
the capabilities.
Orientation
ability -- change landscape to portrait and whatever. There are
features built into typical mobile interfaces that J query
provides interfaces to capture and based on our J
query lecture from a couple of weeks ago how would those
be implemented? What would it look like?
STUDENT: Inaudible.
PROFESSOR: It could be, yes. That is a good point. It could be
a media query because they are dynamic. You
can change the C S S. We can take a look. It can also be
in an event a J query event should this
respond in this way. In J query mobile it might be I
implemented in both ways.
Let's talk about what J query mobile is. J query
we talked about a couple of weeks ago. It is this series of the libraries. Two weeks
ago we had an in depth lecture on J query
core library and this week the J query mobile
library. It is above and beyond J query core. It
is dependent on J query core. Every J query
mobile site requires you to include the J query core library in your pages.
Does that make sense? Just like boot strap is dependent on J query
core, right?
J query mobile unlike boot strap is designed almost
specifically for mobile not responsive web sites.
That is probably the key
point. We will learn a lot of techniques about how to build these sites. The first question is do you need
a mobile website or not. If you built a really nice responsive
website, a mobile website might be the last thing to help whatever the organization
organization you built that website for. J
query mobile isn't designed to implement a responsive layout structure T
. It is designed to build just a mobile site which
might be fine for some businesses but aren't going to be fine for most businesses or
organizations because you are going to get weird interface on traditional lap tops
and things like that. What typically happens is J query mobile is used more to build
like H T M L 5 ways of building mobile apps instead of
using the I phone or Android
operating system development environments. J query
mobile makes it faster and quicker to build an app that
is built on H T M L 5. When I say that,
I mean no C plus, plus. It is all H T M
L, C S S, JAVA script.
MALE STUDENT: Inaudible.
PROFESSOR:
It adapts pretty well. It adapts to mobile environments
but not necessarily responsive. It doesn't change the layout.
MALE STUDENT: Inaudible.
PROFESSOR: It is fluid but not responsive.
It might include some media query capabilities to do some of that
adapting but it doesn't come with a
grid system to respond your column
structures based on
it. That is an important point. Where J query mobile is use today
build web sites, often it will be a second website for the same
organization to their main site. That might be an alternative
based situation that makes sense for certain situations. Does that make sense? If you have
a -- what would be a good example. This college
might be a good example. They have a big website that has a lot of
services. Call the department and teacher in every class and the on
line catalog is all that but you can't see it on a mobile phone we very well unless
you scroll in and take all that and rebuild each page layout might be
something beyond the scope of what they could do in the short term so
they might want to build a minimum site and they might be able to
in such a way -- server environment in this class.
What is the course catalog? Is it sitting in the website? No in a data base.
The website is referring to it with P H P or something.
On screen. If we go to court outline information
and look up -- on screen.
That is in a data base. If you learned anything in
this advanced dream weaver class it should be
somewhat apparent. A mobile website might be able to
tap into those but
provided different services. If it is static, you have to create a
whole other website using J query mobile to do that that doesn't make
sense. I linked to a couple of web sites
that go through pros and cons of J query mobile.
If you go from scratch, responsive makes more sense.
What is a good analogy. In the real world there
aren't many good analogies. I can't say you have a car turned into a
truck because it wouldn't work very well.
The point is in almost all cases if you are starting with a new website responsive
make more sense. Intuitive it should make more sense. One block of code works for
all environments. You should be able to control it well enough to get a good layout in
all situations.
All that said J query mobile is still a super cool tool.
You can use word press. You can use dream weaver. You
can be a super smart person
and build a website with dream weaver at
Santa R O S A J
C but you can't build a website as fast as you can using J
query mobile. Speed isn't everything but you can get a really cool modern
up-to-date site with J query mobile quickly. The tools it
provides are really simple to learn and use and really flexible.
That is what I'm going to demonstrate today. Any questions about any of this?
STUDENT: Inaudible.
PROFESSOR: Everyone is afraid to ask questions. Let's get
started. Let's see. If I just go to J query
mobile dot com unfortunately the one night I wanted to show you this, this whole part of the site
is down. I don't know why but we can't. I noticed it from my site. I thought it
was a bad link but it actually on their site. You can't get to it. I don't know what that
means. Even from this home page, in fact right from this home page we can
get started building a J query mobile website because this
tool really gives us which is built directly into
their home page and accessible through your browser is a pretty decent way
of using J query mobile W I D G E
T S. The other part of it is we have a
two step process. One is to create H T M L like any site and the other is to create the
C S S and this theme roll
er -- on screen. Is sort of a C S S part of the
amazingly rapid development environment that J query mobile gives you.
Right in this interface you can take the W I D G E T
S onto the page and see how they look given free built themes
or custom
custom
prebuilt themes or themes you build from scratch.
On screen.
J query U I. It doesn't have preset things
other than this first one. What you do is modify this one. You say -- what font
do I want to use? Let's use A E R I A L.
Live changes whatever. Demonstration
display. You go through all the he
elements and you
can even create subthemes that you can apply in your C S S
in specific instances.
Before that let's start with the
code -- before that let's start with some of the basic concepts of J query mobile.
What are it's goals? Goal number one
is it tries to optimize a site for a mobile environment which
includes one optimizing network traffic. A J query
mobile site is actually in almost all cases one document one web
page document and your different virtual pages are
subsets into that one document. The concept of that is your document is down
loaded once and as you go from page to page you don't have to wait for the network to go
back to the server and get another page. Does that make sense?
FEMALE STUDENT: Inaudible.
PROFESSOR: They all go
into one file. Now the content can either be A
J A X E D in when it's called or it can even be on a remote
A J A X. What do I mean by that? There are ways you can refer to data on a
static site in some cases.
One way you might implement this with word press -- it provides a
simple feature to -- all your content on the site.
You can create a J query mobile page that might be page 2 of the J
query mobile site which is just a block of code and one document page but within that
A J A X in a specific R S S address. It can be
remote like that or can be context directly that is in that file.
You don't have to. You are not required to build a site like that but in general one of the
benefits of J query mobile is it makes it very simple to build a site
where several pages are all in one document. As you navigate
you are
really hide display panels. As you hide or
display those panels you get it from the
server, or you already have it in the document.
One of the concepts is it tries to minimize network traffic
or optimize being a mobile app
which means -- 80 percent of the people are looking at it in Metro and
Paris and
and where there is low B A N D width and they need to know where the train
is.
A lot.
J query strives for is remove the differences in
platforms. J query mobile
has an event called swipe left and swipe right. You don't
have to know what that means for an Android or an I phone. It is
abstracts that from you. Does that make sense?
It exposes events and other features that
is sort of platform generic that can be implemented.
It's a platform under the
scenes and you don't have to see it. It doesn't need to
go all the way to the operating system itself. Why? We really aren't
building mobile apps. You are building H T M L 5 web apps
that are optimized for mobile smart phone devices. That
is another clear distinction that I think I said but probably bears repeating.
J query mobile doesn't build mobile apps. It is not something
you would put on the app store.
Web sites you get to them through a U R L but they look and
behavior like web mobile apps. They respond to things like swipe and or
ientation and things like that. All right?
We talked about the multi page and the one document.
. It uses some of the techniques
we learned in this class. Applying your own custom a
ttributes to hold data where we need to. J query does a fair amount of that.
It builds on H T M L and it kind of knows how to do that.
In the real world -- in the
commercial web design business for small businesses, building mobile apps is
probably the hottest market right now. I know companies
that even based in Santa R O S A that survived
building mobile web sites just on J query mobile. A typical mobile
website would start at least a couple hundred dollars depending on the
features up to a thousand or more and you could do it in an hour or
less theoretically. To do it right you are talking no more than three or four hours.
In your JAVA script class --
three hour class. We looked up locations and
all that? We built it line by line. Once you have a template to build on something like
that, it say big opportunity for people that specialize with just this one
tool to build a lot of sites in volume.
As I said it is sort of like a weird market. There are a lot of people
that want these but in general you are much better off even if it means /RE
redesigning a site starting with a responsive layout in my opinion. It is more
geared toward the future and sustain /ABL site than building a
mobile site on top. There is a lot of opportunity to
build these things. Some businesses don't require a full site. Some sites are
more geared toward mobile and even if they don't look great on a lap top it is
good enough. J query sites do show up in any browser even a lap top. They
look kind of block. They aren't weighted out with columns.
Really mobile oriented businesses maybe
a mobile site makes sense.
Who knows three or four years from now people are saying
50, 60 percent of the traffic will be on smart phones.
This tool -- let's start messing around with it. I have done this
a few times before but not in a while. We are exploring here. Explore with me. I don't think there
is a tutorial. Our goal
is before we break is see how far we did get to building a multi page site.
On screen. To do that all you have to do is look at this
tool bar and look at the W I D G E T S available to you. These are all of them. These are
the tool bar, buttons. As a start, let's just create
a page header. We just drag a page header. I don't
know what you call this. The top the touch screen.
That is called our header. We can give it text just by double clicking
on it. Say welcome to our website. On screen.
We can give it -- we can start to see it has a little bit of
a dream weaver properties panel look to it.
Very limited but what we use a property panel for. /WHAF
What is the I D? It doesn't seem to fit unless I make the size smaller.
I'm not sure what the size
does. I don't want to duplicate that.
Let's just say welcome. Then we can
add a footer.
We can say whatever.
On screen. Please visit us.
Let's add a navigation bar. A navigation bar
is basically a button set. Right?
You can add buttons to the navigation bar. This would
be about us. On screen.
Let's add a new button that would
be products and a new button that would
be contacts. All right? Maybe on the
contact
so -- on screen.
In this interface we can only build one page, right? However in the J
query mobile environment which hopefully we can get to we are going to
be able to build -- it gives you a template for a multi
page site. What we are going to do is take those pages we
designed and plug them in that multi page site.
Let's see how to do that.
I think it is in this part we can't get to.
Maybe we can do it in dream weaver.
On screen. Let's see.
Let's do this. I think it's in the area I can't get to for some reason. J query
mobile multi page template.
There we go. On screen.
I'm going to put this
link into the on line class.
Actually let's take a look at this. This is basically a J query mobile page, right?
This is what it would look like in a lap top
and this is like on a smart phone. This probably
uses theme roller. The H T
M L is all in one page. If we go back
to where we originally entered this page, we should be able to copy all the H T M L from the
page source from here and get that template. What we would have here is a
-- look up here. You see we have a three page multi page template
here. Page one which is called
one. Page two and
then -- pop roller. Actually, yes. The
over. The third page is called pop over. I'll show
you how that works. If you go to this one -- let's see. This is two.
Pop up? I like the pop over menu. The
.
MALE STUDENT: Inaudible.
PROFESSOR: Let's see if I can show it.
Overlay -- on screen.
Maybe I can find it.
On screen. The problem is all those
are in demos and I can't get to the demos. I don't know why.
. I'm going to take this page the whole
thing and just copy it right from page source. ***. As you can see,
if I take this page for today's
purposes it is the simplest way to do it. I don't need to down load any of the libraries, right?
I don't need the C S S library at this point. I could change it through theme
roller and later change my C S S to my own and all the classes and
that stuff will still work. This way I can just take the
default.
Let's go into dream weaver.
Student server. I'm going to this one. On screen.
Create a new folder. Call this mobile.
I am going to create a new file.
which will be H T M L 5. I'm going
to replace all the code with the code I got right from
that template. Let's save this and we'll explore
this code. Dream weaver is going to
crash.
What do you think? Let's quit?
On screen.
So I create a new file.
I save it.
The good news is that
lists it -- I'm just saving a file.
What is this code all about. It has two
basic pages and a pop up page. It is basically a demonstration of how to build a
multi page site in one document. The best way to demonstrate it
is to build off the pages in C O D I C A like we
started to do. Now we can go back to this page that we still
have.
Mines gone so let's build it again. Say welcome.
Let's give it an N A V bar.
On screen.
Let's give it a
page -- what is the name of this site? S R J C. How is that?
Jays P I Z Z A. This is generally a bunch
of what? Code. H T M L code, right? To see that code you go
in here and grab it. This create a page called page one. See that?
I can take this page. The
structure creates one page, right? We have to hard code these references
once we have them into two and three. I'll show you how to do that in a second.
Let's copy this code. Control C.
Go back to our page framework and --
go here first. We have the D I V called
-- page one. We are going to replace this D I V with that. See how that is analogous
to that? It calls it one instead of page one. It is fine for now.
On screen.
FEMALE STUDENT: Inaudible.
PROFESSOR: Yes. Let me show you.
If you click again, it is a toggle.
Let's say I have another button. You click on our W I D
G E T and it brings up our property panel. You can see
we have button here and you click on new button. That puts the button in.
Until you put text on it just says button. Let's call it -- what would go here?
Locations. How is that?
That gives us a link back. Does that answer your question?
FEMALE STUDENT: Yes.
PROFESSOR: All that does is create a new link in
the structure. The important point is how to W I R E
it back up. It is simple. Now we have an I D of page one.
We are going back and create a second page and we are going to call that page
two instead of page one and change the menu to page two or we can do that now.
Page two and page three. Right?
Let's save that. Let's
Let's create a second page. Get rid of all this stuff. Refresh this.
Our second page -- another header.
What is it called? About us.
This page will have an image. Right?
Santa Rosa Junior College.
Images. Let's take this image right here.
Copy image U R L. We should be able to go right back
here. Go there. There it our image. Pretty cool. We
can put some text in here.
How do you put content in? Here is a heading.
Our mission.
I'll show you how easy it is to put
a collapse
panel in here. The first section header will be our mission.
The second will be
our history. Then a section
of our great faculty.
Then once we bring that structure into the H T M L we will be able to add the
content right in there to create that structure. Does that make sense?
We can delete this because it is redundant.
FEMALE STUDENT: Inaudible.
PROFESSOR: I have not added a second page. I'm building a new page
and then I'm going to take this H T M L and plug it into the template.
FEMALE STUDENT: Inaudible.
PROFESSOR:
I /RE loaded the page.
I lost my first page which doesn't make sense. I should have kept that menu.
I could plug that in there. Watch this. I think you can inspect
the code. I think this might work. If I take this whole N A V bar, right?
If I take this whole piece and copy it,
and go back to C O D I C O and put that N
A V bar right here -- no
it won't let me edit it. That would be really cool.
MALE STUDENT: Inaudible.
PROFESSOR: If you had a round trip you know what I mean? You can't do that. I can
copy this and paste it in my H T M L. All this is doing is just like
dream weaver. What does dream weaver do? It just
produces -- it can't do
anything other than that. That is all this does.
Create code.
In the chat.
Where is the test?
In chat. I'm not sure if I understand either of those questions.
MALE STUDENT: Inaudible.
PROFESSOR:
Test, yes. How does it look?
Code view mode or live view mode in dream weaver.
It's like live view mode. I didn't understand. That should
answer your question. Joe, I think you probably
answered your own question.
The point is this is just creating code and C O D
I C O is creating one page at a time even one
virtual page. It can't create a multi page site. That is why I started with a
multi page template.
FEMALE STUDENT: Inaudible.
PROFESSOR: I'm not an expert on C O D I C A and the version
that is on the home page of J query mobile is obviously just a demonstration.
I think there are paid versions but I'm not sure of their capabilities. If you have dream weaver
you don't need it to put it altogether. What I have done a lot is just create -- take this multi
page template and you can create a more sophisticated template.
Almost all those sites have these basic -- about us, products
and your template can be more sophisticated. What we are building right now
is basically a template for a multi page site. The point is -- yes.
FEMALE STUDENT: Inaudible.
PROFESSOR: It is so easy that I'll show you. You just
take this image thing and drag it where you want it to go. I want it to go in my header. It has
a U R L. I just took it off the internet. I went to Google and
found a half way picture of the J C. Got it's U R L and
I went in here.
It is not our building. That is all I did. I
got it off the internet. You might or might not want to do that based on copyright laws and things like
that but for demonstration purposes it is as simple as that.
FEMALE STUDENT: Inaudible.
PROFESSOR: That answers your question?
FEMALE STUDENT: Yes.
PROFESSOR: Once you have that and especially if it's a hard coded
link like that you can copy this and I am going to put this
in my template to replace now page two, right?
Again, you have to be a little careful. 99
percent of web design is selecting the right text in between
. Dream weaver gives you pretty cool tools for doing that.
If you are within where your cursor is and you click this button, it will select
all the code including the D I V that is wrapping where your cursor is. Right?
This is my page two from the template. I don't want it any more so I'm going to blow
it away and I'm going to paste the page two I created and I
have to remember to call it page two here. Then all I have to do is take
my N A V from up here and I'll show you another
trick. Let's get rid of this.
This is -- it doesn't
show it here. I'm going to take this N A V which is
the same for all pages and copy it and it goes right
below the H 3 which is the page title which is
right here.
Now you can see how my
collapse thing works. Right under here I can put some text.
On screen. Our mission is to teach. We
have been teaching for a hundred years. Our
faculty is very old.
Theoretically it was as easy as
just -- there we go. This is our home page. This is about us page. We didn't really
set this up -- yes we did. It doesn't look like we set it up
exactly perfectly or the bottom one opens by default I think.
. We have go back and look
at the code. You can see how the menu works right out of the box. All we have to do is tell
which menu item what D I V to open what the I D of the D I V of
the page that we wanted to show and not only does it include the navigation,
it includes the effect.
Let's do the contact page and then we are done. Let's go back
to C O D I C A.
I'm going /RE load the page. There is no clear in this thing.
. I'm going to create a header
which is contact us. I'm going to put a map in here. This map could
be Santa /ROES
R O S A -- on screen.
There we go. Our marker is -- let make the zoom level
ten -- 12. That is
pretty good.
All this will do at the end of the day is generate
an image. You don't really get a
live map. You just get an image and that image is smart enough to be
created on coordinates that are passed through that property
panel W I D G E T on the J query mobile site. It could give you a link
to a Google maps page. What you want to do especially since
most people use I phones you want to make sure you append to Google
maps not just the generic maps on apple that might get them lost even
floating in the bay from what I hear. Does that make sense? You can put a link here that leads
to a map. You can create a link from Google maps directly
that has a similar rendering. I can show you how in a second. I'm
.
I'm not done with the page yet. Let's make it a little nicer.
Let's create some content here. What they
used to have in this thing was like paragraphs. They don't have those any
more. Lists.
MALE STUDENT: Inaudible.
PROFESSOR:
It is more input.
On screen. It is still just H T M L.
We can type it in but I'm getting spoiled using this.
Someone just woke us up in here. In chat.
There was something to the right. Yes I saw that. I just have a hard
time getting to it. It is a weird interface.
At this point let's just take this map and bring it into the page and I want to show you how
simple it is. Let's go back to our template. This will become
page 3. Page 3
is -- in this we call it pop up.
Replace pop up which is
that. We want to call it page 3. From
here we can go to
maps dot Google dot com and get Santa /ROES
R O S A
-- on screen. Let's take that. Let's give them a traffic map, right?
Let's give
them that map and turn traffic off. Let's click on this little link right here and that
will give us a short U R L to that specific map. Right?
Then we can just put that in an A tag.
and wrap the image in that A tag.
Then go back to our page and /RE load
this. I think it wants me to put it on the server.
Over here I got an image for my map, right? It is not
bad if you are on a phone. It is pretty much what you need. If you want to click through Google
maps, it takes you right there. If you have that installed or even if you
don't, the H T M L 5 Google map app is really cool.
It is like a J query mobile type of interface. You find if you are looking at this on eye
a smart phone it will already be adapted to the smart phone. Does that make sense? Even though you
are linking to another page, Google it is head of us in
creating responsive web sites.
Any questions? Have we built the site? What else do we have to do?
STUDENT: Inaudible.
PROFESSOR: We pretty much built a three pager how to find us, who we are
and what we have in less than an hour without
any idea of what we were doing. We just kind of put it together.
Couple things for
employment. Anything that a mobile site has that a regular site doesn't. Not necessarily. It is all H T M L
5, C S S. JAVA script. There are the libraries but the way we
implemented them as you can see the libraries are just being called in remotely.
If we wanted to change our theme, we go back to our page here.
You say that's cool but I'm not paying 500 bucks for that. It
is pretty ugly. What we would do is go back. We wouldn't take
-- go back to theme roller and
charge them 200 bucks. It would be worth it. They could put a custom
font. Say they
want -- this would be the header footer bar and say we want the color to be more of
a custom color. It would be something
like -- on screen.
That's the text color.
Make it a little lighter. Is that too dodger for
northern California? This would be the selected and unselected part of it or
active and interactive. Let's change the text color
to kind of match to that a little bit.
On screen. See the
text input is changed and the text here is
changed just the basic paragraph text.
Button -- in active button. We go like that. We definitely don't want that.
We want them pretty light so they stand out against the gray background.
That is not bad. Literally you can just down load
this theme roller and I think what it will do, you can name it and I
think this will give you all the
files. It might just give you the C S S. I think it gives you all of the library
files Z I P P E D in with the C S S. It assumes you
are starting from the scratch. The other libraries being the core
and -- we don't need because
we are getting on the internet. Try this out. Down load it.
If we
go to my down
loads -- on screen. Open a Z I P file and in there is my -- it
creates a whole site. What I care about is this, right? I want to
copy this.
MALE STUDENT: Inaudible.
PROFESSOR: I think the images probably can. Maybe. Copy this.
Copy those. Go to my sites.
Mobile. I can just go paste.
Now I have to go back to my code and just
say whatever that file is called. Just put it right in here.
On screen.
Try it out dot C S S. I save this. I put try it out on the serve
r. I put the images on the server.
I don't really need to go to the server to do all this. The reason I am
is because why? Because dream weaver
is kind of dumb. They set up this dream weaver site to be a testing server so
in order to view in a browse
er
r it needs this. On screen. We /RE load it.
MALE STUDENT: Inaudible.
PROFESSOR:
On screen. Look at
that. What that means is that
-- what?
FEMALE STUDENT: Inaudible.
PROFESSOR: I added a C S S that wasn't complete probably. It only
gave me the styles that should override the basic
styles. That is easy to fix. Let's go back here and take this and copy it.
Then go control Z. That is back there. Under it
I'm going to put this. On screen.
Cool. You don't understand what I did? When you use theme
roller it used to give you everything but maybe the way I
updated it. It just creates a Z I P file that includes a C S S
file which contains only the styles that you changed so it doesn't create
a whole new theme roller with C S S. It creates a new
theme roller.
We went through that. Try it out. We call this C S S try
outs. It is a good thing we tried it out. You would have
gotten home and said that guy taught me the wrong thing. We didn't put our and a
N A V in here. We take our N
A V and copy it and then right here under
mission -- I think we want
it -- this is page 2 -- page 3.
Right here. Okay.
Let's add something. Let's add the swipe event.
Does that make sense? Do we have a swipe event by default? Does anyone know what
the swipe event is? For those that have a touch screen device, swiping is the new
clicking. People expect to be able to swipe.
To get from page to page sometimes people just want to give a swipe.
A world design mobile site should allow
them to do that. Like our website -- I implemented J
query mobile on our website. If you swipe right you go back a page. Going to the right is
like pushing the page to whatever it is called the O B V E R
S E side. Push to the left you
advance a page. J query mobile not only has a swipe and a /RE
swipe. A swipe that also responds to a mouse swipe on
a non touch screen. For those that haven't bought a convertible touch screen
lap top yet. That is what I'm doing here. It is good to use that because even in this environment
people might start getting used to this swipe. It is good to capture it because
all web sites do it by default and it drives me crazy. The back is kind
of -- on screen.
How do you implement swipe. Let's go to the J query mobile
website and look at the A P I. Look at events.
There is swipe left and swipe right. I think
that there is -- on screen.
I think it's as easy as grabbing this.
FEMALE STUDENT: Inaudible.
PROFESSOR:
Because we want
to
distinct
distinguish between the two. It doesn't know if it's
going left or right. What are you trying to do? What I'm try to
ing to do is if you are on page one and swipe left, don't go to the
next page. When I swipe right don't do anything. You are on page
two, what you swipe left, go to page 3 and swipe right go
to page two. That is why I'm using swipe left, swipe right
events because I need to distinguish between them. Let's just implement it on one page,
page 2. How do we do that. First thing
we need to do is create a J query environment.
That is in script. New file.
which is going to be a JAVA script file. Let's save it
as mobile dot J S.
Name it whatever you want but I'll call it mobile. In here like we have done
with these, let's bring that script file now into our page document.
All we have to do here is replace that. Now any code we
place in this file is now virtually part of that page. Does that make sense?
That should be pretty straightforward. To activate J query at the right
time, we are going to do document dot ready
function and this is a boiler plate code we went over a couple
of weeks ago to ensure everything that
runs in here runs once everything has been loaded in the
data base. This will include all pages. They are all in that one document. They are in the body
of the one H T M L document. When this thing
loads let's take
page two and when we go to page two and do a
swipe left,
-- I think that's the event, run this function.
semi colon. Right? What that function
-- all it needs to do is navigate to page one. Does that make sense? How do
we navigate from page to page?
Let's see how it does it in here.
I don't think we want to navigate. The event is the swipe. The result the
action we want is to navigate.
MALE STUDENT: Inaudible.
PROFESSOR:
Here let's do J query
mobile multi page navigation event.
Remember we use semantics. We created the navigation in
those menus by using H R E F and referring
to the I D and J query is able to put that together but now we want to do
it and we have to figure out how to do that. Let's see scripting pages.
The A J A X navigation model.
Change page. Here we go. Pretty simple. Let's go back to our code.
How does change page work? On screen.
Just like this. You pass it the page you want to move to I believe.
Let's see if that will work on a multi page.
On screen.
We are saying if you swipe left, actually you want to
go to 3.
If you swipe
right, you want to go to one. Save this. Put that on our site.
Make sure our index is updated on the
site. Go back to this page.
Update it. Go to page two and
it doesn't work. Right? First let's see if we are getting an error. We are getting a
JAVA script error. Object has no
method swipe left. What that
means -- let's take a look.
On. Sorry about that. Slightly different syntax in I
implementing the events in J query. Swipe left is not really a function.
It is an event. You can't pass it as a function like you can click. Click
is sort of a short cut. In J query core you know how we
have used click a lot. It is a function that listens for an event. There
is no swipe left function. It is just an event. We have to change our syntax a little bit. We have
to say on and then swipe left
event and when that happens, run this function. Right? It is
the same thing here I think. On screen.
The on event in J query is sort of a
generic event handler. You can pass the event to listen for as the
first argument and pass the event handler function as the second
argument. Does that make sense? That is the way you use swipe left and wipe right. Let's
see if this will work. We go back to this page. /RE load it.
We aren't getting an error but it's not doing anything. Right?
MALE STUDENT: Inaudible.
PROFESSOR:
You might be right. Let's go back here.
Swipe --
MALE STUDENT: Inaudible.
PROFESSOR:
/RE load this.
We don't have the swipe event on here. If we swipe back, we
go forward which makes sense. If we go back here and swipe right, we go backward which
makes sense. Does that make sense? I didn't implement
this. Let's go back and do it the right way. Page two
we want this to happen. For page one if we swipe
left, we want to go to page 2. If we swipe right, we don't want anything,
right? Return default
--
just return. On screen. This has to be for one. For page
3, this will
be if you go forward don't do anything. Just return control.
If you do go back, go to page two.
On screen. This
will give us navigation. Let's see if it works.
On page one we can go back and forth. If we do two
swipes, it takes us there. Think of physician
s. To the left you are pushing the page left
and going forward.
MALE STUDENT: Inaudible.
PROFESSOR: When I wrote return, it probably doesn't do anything in this case but it's a good way
of saying don't do anything. It is a good way of creating a null function. It is really saying
return control back to whatever called this function. This is saying when you swipe right
don't do anything. Go back to what you were doing before this function was asked to run. This function
was asked to run because somebody tried to swipe something and you don't want it to
take effect. It doesn't mean /RE load or refresh the page. It is a JAVA script term for
return the statement flow back to whatever statement called this function.
MALE STUDENT: Inaudible.
PROFESSOR: In this case it's probably not, yes.
We can do anything. We can have
it flash or give it some feed back. If we take it out, I don't think it will have
an effect to be honest.
On screen.
If I'm on page one now and go back -- on screen.
Now we built a swipe /ABL mobile site in less than
probably 45 minutes using basic J query stuff that should be somewhat
familiar to you, right? How to create a JAVA script file.
Let's take a deeper look at this real quick. What are these things? Each one is
a J query statement. In this first statement they are all
pretty much the same. They are all event handlers. They handle two different types
of events. Swipe lefts and swipe rights. In all
cases there is a select or. What is swiped? The best
thing to select to wait for that swipe control is the whole page. You don't
know. They might swipe anywhere on that page.
MALE STUDENT: Inaudible.
PROFESSOR:
Right. When that page is shown, that is the view port of that page.
All the other elements on page don't display.
Display at anyone point of time is
the pages we pasted from C O D I Q A. By
putting it at that level that wrapper you are guaranteed to get everything
on the page. There can be pros and cons. What if I want amen
, menu that is touch enabled. A swipe can be misconstrued
for a swipe. Sensitivity
to angles what is left and right and things like that and maybe selecting swipe just on
the body and not on the, menu.
FEMALE STUDENT: Inaudible.
PROFESSOR: It is a good question.
J query bind.
On screen. Look at the documentation of J query
bind and J query on. J
query on. On screen.
J query bind. On screen.
They look very similar.
As of J query 1.7 the on method is the preferred method for
attaching event handlers to a document. On screen.
I taught you -- this is a good example. Last
year the JAVA script class was all
about binding. Now binding is now politically incorrect.
We are using on.
MALE STUDENT: Inaudible.
PROFESSOR: Then as we move forward as J query and the D O M
-- all these events -- where are they implemented?
In J query? In the D O M. As that gets smarter and
as J query and other tools for working with the D O M get
smarter there will be better ways of working with it. Events in J query are great but
not perfect. Delegation or the ability to sort of take better advantage
of event P R O P
A G A T I O N is something developers are trying to do.
Since I taught the JAVA script class just whenever it was
six months ago, for those that took it remember the last class is what is coming in J
query -- I mean in JAVA script. A lot of that is standard.
This is a good example of that.
It is a good example of why you need to depend on the
documentation. Even the smartest instructor can't be expected to remember all the current status and
which came first and which is the current way of doing things. Whenever you ask me a question, what
do I do? I go to Google.
See if there are any on line questions.
In chat. Somebody found a problem with our code. Let's see if
we have that problem. On page 3 swipe left does not go to page 2. I could
have sworn I saw it working. Look at how
cool this is. Not only -- look at that. When you go to the
page, it changes the title. That is pretty cool. To answer
cals question. I'm on page 3. If I swipe left, it should
do nothing. There is no page 4. If I swipe right it takes me to page 2. The code looks
like that. On screen. For page 3. You might
not have it exactly like we have it but it seems to work
for me.
Swipe right does not go to page one. That is right. My stated
behavior is if you are on the last page, don't go back. Don't
do anything which is a decision. Maybe his app
will get more down loads. I chose not to do that. That is why it
behaved that way.
FEMALE STUDENT: Inaudible.
PROFESSOR: First I put the return. The return wasn't doing anything functional so I took it away.
FEMALE STUDENT: Inaudible.
PROFESSOR: If I didn't put it in, what do you think would happen? There would be
no event handler so probably nothing would happen. Just
to test it. Let's put this back up. I have to
refresh the page.
Behavior is pretty much the same. I can swipe anywhere on the
page. This isn't exhaustive. There is a lot more you can do
with J query mobile and there are a lot more W I D G E T
S you can explore. C O D I Q A is not
part of it. It is a school that happens to be on their page. It has nothing to do with J
query mobile other than it's a nice tool that happened to be there and
it does implement their W I D G E T S directly when you use it on that page.
It does know what a J query collapse is.
It makes it easy to build things. Dream weaver has this too. You have
to install the J query
mobile and it has a panel for J query W I D G E
T S. I think you need C S 6 for that.
The point is word press anything I challenge you to build a three
page site that quickly.
It not only works but works pretty well only mobile devices. More and more
what people are looking at web sites on.
At that points we'll take a break for ten minutes and then we are
free form lab. We haven't tried there before. Whether you are at home listening or whether you
are here in the class, we'll just be open for questions. Can
you look at my page or whatever.
We'll come back at ten to. I'm going to pause the recording.
Break.
PROFESSOR: In room.
Doing activity.
activity.
lab.
On screen.
Doing
lab. On screen.
Any questions at home? Common.Come on.