Lecture 35, Part 2: Coding Navigation Tiles

Loading...

Do curso por Johns Hopkins University

HTML, CSS e Javascript para Desenvolvedores Web

4513 classificações

Johns Hopkins University

HTML, CSS e Javascript para Desenvolvedores Web

4513 classificações

Curso 4 de 6 em Specialization Desenvolvimento Web com Ruby on Rails

Você já percebeu que a única funcionalidade de uma aplicação web com a qual os usuários interagem diretamente é através da página web? Se você implementá-la de uma maneira pobre, o lado do servidor passa a ser irrelevante! Os usuários de hoje esperam muito das páginas web: tem que carregar rápido, exibir o serviço desejado, e ser confortável para ser visualizada em todos os dispositivos, desde desktops a tablets e smartphones. Neste curso, vamos aprender as ferramentas básicas que todos os desenvolvedores web precisam conhecer. Vamos começar do início e evoluir até aprender como implementar páginas web modernas com HTML e CSS. Depois, vamos avançar para aprender como codificar nossas páginas para que seus componentes se rearrangem e alterem seus tamanhos automaticamente, baseado no tamanho da tela do uuário. Você será capaz de codificar uma página que será tão útil num telefone celular quanto num desktop. Nada de aumentar o zoom! e por último, mas não menos importante, teremos uma introdução da linguagem web mais presente, mais popular e incrivelmente poderosa: Javascript. Utilizando JavaScript, você será capaz de construir um aplicação web completamente funcional que utiliza Ajax para expor funcionalidade do laod do servidor e dados ao usuário final.

Na lição

Coding the Static Restaurant Site

Ready for some REAL fun? This module is it! We'll go over some basics of interacting with a client when managing a web site project and then go visit a real client at their place of business (a Chinese restaurant), help the owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll spend the rest of the module building a real web site for this business from scratch and you'll get to sit next to me and watch as the site comes together.

Lecture 34: Coding the Jumbotron11:21

Lecture 35, Part 1: Coding Navigation Tiles11:07

Lecture 35, Part 2: Coding Navigation Tiles13:08

Lecture 36, Part 1: Coding the Footer10:42

Lecture 36, Part 2: Coding the Footer3:22

Conheça os instrutores

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[MUSIC].

In part one of this lecture, we wrote the code to position and

form the sizing of our tiles, the menu specials and the map.

In this lecture, we're going to continue by filling out the content.

We'll put in the pictures for the menu and the specials and we'll embed the map.

And we'll take a look at writing the special styles we need for

the responsiveness of these tiles.

Let's go back to our code editor.

And the next thing we need to do is we need to place the images

that we actually are seeing here from the restaurant.

I happen to have already the images that we want to use for specials and for

the menu from the real restaurant.

These are just kind of placeholders.

If I didn't, however, I could always go to this website called placehold.it.

And I'm able to basically size any image I want.

And it would put some labels inside those images simply by providing a URL to

that type of image.

So, but for now we're, I think, good here and we're going to use the real images.

So let me bring in a couple of styles that I already defined for this purpose and

we'll paste them right here and let's discuss them for a little bit.

So, first of all, I'm selecting menu-tile and as you can see,

I'm using a background image to fill in the menu-tile and fill in

the specials-tile.jpeg, which by the way are sitting inside the images folder.

Also notice that since our URL is relative, how it's going to get served

to the browser, we do need to say dot-dot, which means we're going up one directory

from the styles, up one directory and then down to images right here.

Okay, so the point is it's going to be a background image and

I'm already sizing it exactly to be 250 pixels tall.

And also notice that I'm positioning it in the center of my container element.

What that's going to give us is that as the container element, that tile,

shrinks a little bit, since the main dish is still sitting in the center,

we're still going to see quite a bit of it and eliminates the need for

us to provide different sized images for different screen sizes.

And the truth of matter is, if this is a huge image,

I will probably have to do this because I wouldn't want to waste so much bandwidth.

But it's a fairly small image and it's just not worth it for

me to keep switching the images at this point.

Plus, it's a good opportunity for me to show you this technique

of being able to position an image as a background image and

still not have problems when the container element starts shrinking around it.

And you just position it in the center and you should be good to go.

So let's save that and go ahead and take a look as to what this looks like in

the browser, and it's certainly starting to look pretty nice.

So here's our dishes, our menu, and our specials.

We still haven't done anything with the map.

Well, let's go back to the code editor and

in the styles.css, let's go ahead and position our tags.

So these tags right here are the labels.

We really need to be right here at the bottom.

Let's go ahead and do that.

Again, I have some code that I prepared before the lecture.

And let me cut and paste it right here and let's go over it right now.

So first of all, we are targeting menu-tile span,

which means it's the span inside the element that is IDed with menu-tile.

And the same thing with specials-tile and map-tile.

So the first thing you see here is position: absolute.

And that means we're going to be positioning these spans absolutely within

the containing element, which is the menu-tile.

Okay, so positioning absolutely,

we need to bring them all the way to the bottom, let's go take a look.

We need them all the way at the bottom right here.

Well, that's very easy to accomplish.

It's bottom 0, right 0.

Well, that's easy.

And we want the width to be 100, which means 100% of the containing

element again, I want it to stretch all the way across the tile.

Okay, text align: center, that's pretty simple.

And we want to bump up the font size to be about 1.6 ems,

which is 60% above the whatever it is that it's going to land on,

meaning whatever it's inheriting at this point.

And text transform is uppercase, I want all of them uppercase no matter

what it is that we type inside of our HTML.

Background color is going to be black and the foreground color, the text color,

is going to be white.

And also I'm going to bump the opacity down a little bit.

So if I put 1 here, that will be 100% opacity,

meaning it won't be see-through at all.

But if I do 0.8, it'll be just a tad see-through so we will be able to see

our nice picture of some dish that's in the background of our tile.

So let's go ahead and save that, and take a look in the browser.

And here we go, so here's our tiles, and you can see the menu and

the specials and the map, nicely done, right at the bottom here, the specials and

the text is very nicely visible.

And you can see that there's opacity a little bit tuned down so you could

actually see this dish in the background which gives it a really nice touch.

Okay, next let's go ahead and embed the map right here into this map tile.

The first thing we want to do is we want to go to maps.google.com and

you want to search for the location that we need to map into that tile.

And I already did this, here we go, it came up right here.

And so, in order to get the embedded map, so what you have to do is you have to go

to this menu right here and go to share or embed map.

And it's going to come with either a link or embedded map.

So the first thing we're going to do, we're going to go ahead and

copy the link that we have here and go back to the code editor.

And we'll go to index.html and we'll paste the link right here inside the href.

And it's kind of a crazy-looking link, but that's all right.

Okay, let's go back to the browser and this time we'll click on embed map.

And then it's going to give us an iFrame with basically all the code that we need.

We'll again go ahead and copy that.

We'll go back to the code editor and

we need to past this iFrame right here in the middle of this div.

So we'll go ahead and do that right now, we'll paste that right here.

And we're almost done, except we need to adjust the width and

the height of this iFrame.

If you look at our styles.css,

you'll see that we're styling all the tiles to be height 250 pixels.

So let's go ahead and do the same thing here.

Right now our height is 300, so let's turn it down to 250.

And the width, we actually need to be 100%.

Because once again, the width is going to be defined by the grid,

by the bootstrap grid, and we want the style to stretch as much as

possible to the edges of that cell inside that grid.

So let's go ahead and save that and go take a look in the browser.

Let's switch to our site and look at that,

we have a very nicely done map tile here next to the specials and the menu.

Okay, but what about our responsiveness?

Let's go ahead and try to squeeze the browser and see how it's reacting.

So now it's a little bit smaller right here,

and you can see the tiles became smaller.

That's good.

And we'll go to the small size instead of medium.

So you can see the first two tiles are taking half the screen each.

And then the third one stretched to all the way to the 12.

So the first one took 6, the other one took the other 6 columns, and

this one is taking 12.

Let's go and keep squeezing it more and

see what happens when we get to a smaller size.

And even though they are stacking nicely and

the map looks good, but the menu and the special tiles kind of look weird.

We really don't want these borders to stretch all the way.

We want them kind of to stay together with the picture.

Otherwise the whole thing looks weird.

So we need to fix that.

So let's go ahead and do that right now.

Instead of going straight to the code editor, let's go and try to fix it

in the browser and then we'll copy the code into the code editor later.

Let's go and open up our Chrome developer tools and actually,

what we'll do is we'll open up the mobile version of it.

And it tells us we should reload, so we'll go ahead and reload.

Okay, so let's bring the problem here in front of our eyes here.

There it is.

So I know that this picture is 360 pixels wide.

So I wonder what would happen if I go ahead and select that and

inspect it right here, and there's our menu-tile, and

go ahead and give it the width of 360 pixels.

Well, we got the border fixed, but

now this whole thing moved to the left instead of sitting in the middle.

Well, there's actually a very quick and easy fix is to specify margin: auto for

both the right and the left margin.

And that only works if you actually size the element.

So we'll go ahead and say margin, we'll give it a top of 0 and

to the side of auto and to the bottom of 15 pixels.

Now I could actually, technically speaking, say auto here, but

you don't really need that.

It automatically assumes that whatever is in the second position

goes into the fourth position as well.

So if we do that, we have a nicely positioned element smack in the center of

the screen, so that's good.

And since this is clearly an issue in the 767 pixel breakpoint,

we could go back to our code editor and we'll go to styles and

we'll need to scroll down all the way to the media query where that says 767 pixel.

We'll scroll down to the bottom here and we'll give it our sizes here.

So we really need two things.

Number one, we need menu-tile, and we also need specials-tile.

And both of those we want to give it a width of 360 pixels and

margin of 0 auto and 15 pixels.

So now when we save that and go back to our browser, we should reload that.

And now we could see that in this breakpoint, things are working quite well.

Now, it's always a good idea to actually try it out on some real devices and

the Chrome browser actually lets you simulate that.

So let's go ahead and try it on iPhone 4, for example,

but that seems to be the smallest device here.

So if we look here and scroll down, we could see that, you know what?

The 360 width is not really working for

this particular device because it's too big with the margins and the paddings.

It's really not fitting in there anymore.

So that means we really have to create a custom media query just for this.

And I also don't really like how this David Chu's China Bistro is sitting here.

It's a little too small, I would really like it to fill it up a little bit more.

And let's see, if we stretch it out, right, it gets to about here.

And we really want to increase that.

So if you play around with it, you'll notice that this actually gets

the perfect sizing right around 476 pixels, if you mess around with it.

So we're going to go back to our code editor and we're going to create yet

another media query.

So this one closes the previous one.

So we'll create yet another one and we'll call it, I'll cut and paste some code I

already prepared, for super extra small devices only, which is iPhone 4 and so on.

So we'll go ahead and close that bracket and we'll cut and paste some

styles right here that will help us out with our menu and specials tiles, right?

And so we basically decrease the width of the actual tiles, so

that way, things are fitting nicely.

Let's go back to our browser and take a look.

Let's go ahead and refresh that just in case.

And if we now look at iPhone 4, and

we could see now that things are fitting in very, very nicely.

And the only thing is, what I don't like here, it's a little too small, right?

We would like the name of the restaurant to be a little bit bigger.

So let's go back to our code editor and let's go ahead and, in this media query,

we'll increase it just a tad so we can see it a little bit better.

And again, I have some styles prepared that I played around with,

so you don't have to watch me play around with it live here.

And so let's go ahead and put them in right here.

So all I'm doing is basically saying navbar-brand h1, that's the brand that's

the name of our restaurant, and I'm giving it some padding,

basically preserving some padding, maybe making it a little smaller.

And I'm giving this font size just a little bit bigger than

it was defaulting to from the previous breakpoint.

So let's go ahead and save that and go to our browser.

And you can see now David Chu's China Bistro gets a little bit

more prominent and that's probably a good thing, right?

We wanted the restaurant name to be very nicely visible and

doesn't look like it's a secondary text.

So just for completeness, let's go ahead and check this out, and

let's pull out this thing just to see how everything's behaving.

And this seems to be working just fine.

And since we centered the picture in the background so it's actually always

sitting nicely and you see the focus point here, the broccoli looks kind of good.

So anyway, as you stretch it all the way out, and

we can actually take now it out of the mobile view, everything looks just fine.

And I think at this point we could say that we are done with these tiles.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play