13 Replies - 511 Views - Last Post: 22 July 2013 - 03:47 PM

#1 maxadaloudis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-June 13

How is a modern website actually constructed?

Posted 18 July 2013 - 07:09 AM

Hi, after learning HTML and CSS I'm now moving on to Javascript in order to make more interesting/interacting pages. But there is still a question I've had for a long time.

A long time ago, when I only used frames to construct pages, I created an index.html page that would load the different frames, such as content, header(links) and a footer for example. Index is basically empty when it comes to content, but is used to load the content in a specific way.

Now that I moved on with CSS, I can't use frames, as my entire page is constructed with 'divs'. But luckily I've been told by many people that the alternative is Jquery, to be able to have a menu bar or header, and when you click on a link (sub-page) it loads that page into your 'content' page for example. Luckily I had some C++ programming experience so when people sent me some functions for loading subpages into your main div I got a overall view of what was needed. Still, even though languages can be distant relatives I thought it was just best to get a Javascript book, and learn the entire language to create my custom functions for navigation on a website. But there's one question.

Now I've got a home/index/main/first page, whatever you call it. That has a lot of divs, including a 'header' div, and a 'content' div. So what I did is I copied that code and wrapped the header on the other pages: (messages, help, about etc.) into a class and basically made it invisible using css. So I have a full main page, aswell as subpages with the content exactly the same layout but the header is replaced by empty space, with my future Jquey/Ajax/Javascript knowledge I would load those pages into the main content page, with or without that invisible header code.
Still if I want to add a link to my header for instance, I need to edit all those headers on all those pages!
But I can't load frames into a index.html page again because I'm using divs!

Are websites still constructed with a noncontent index page that loads a separate header.html, content.html, footer.html etc into divs? (using jquery, php or what not)

Basically I lost track and vision of how a website is basically constructed.

So could someone, in plain english just explain me how I should do this?


Is This A Good Question/Topic? 0
  • +

Replies To: How is a modern website actually constructed?

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 8937
  • View blog
  • Posts: 33,463
  • Joined: 12-June 08

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:12 AM

Yes, that is one way of doing it... or you can go the php-ish route and make a CMS (content management system) where you have a page template that loads in data from a database in specific areas.
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 429
  • View blog
  • Posts: 1,813
  • Joined: 30-April 10

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:16 AM

You could take a look into using something like codeigniter (php framework) for the server side language and javascript for the client side and you can do anything your site needs, with some time and effort.
Was This Post Helpful? 0
  • +
  • -

#4 Secretmapper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 20-July 12

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:16 AM

Ahm, no, actually I think that websites were never constructed with a non-content index page, those who actually used iframes were the minority. So in a certain context modern webpages are made the same way they are from the past, few tricks here and there, but still the basic idea.

What is the problem? I was confused with your 3rd paragraph. Basically what you would have is just a header div, content div, footer div and just replace the content div through Ajax. That way header and footer basically stays the same, and you can just edit the content.

This post has been edited by Secretmapper: 18 July 2013 - 07:17 AM

Was This Post Helpful? 0
  • +
  • -

#5 maxadaloudis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-June 13

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:17 AM

So you're saying I should delete the header/footer from all the pages, and then make a separate page for a header, footer, homepage(content) and load them all up using query?
Is this the common approach? Should I make jquery load entire .html pages or just div's (content) from other .html pages?
Was This Post Helpful? 0
  • +
  • -

#6 Secretmapper  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 20-July 12

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:21 AM

Yup, basically that's it. I would suggest following laytonsdad's suggestion and use codeigniter (or at least try and see how they do it) :

load("header")
load("register_page")
load("footer")

But generally you will actually have templates in so you can just say 'load("my_page")' and the other parts automatically get in.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,035
  • Joined: 08-June 10

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:25 AM

I wouldn’t bother to load content via AJAX that never changes (like headers and footers).


Quote

and then make a separate page for a header, footer, homepage(content) and load them all up using query?

keep in mind though that when you load separate sources via AJAX, you need to maintain the HTML rules of the whole page (this esp. concerns elements that must be unique (doctype, <html>, <head>, <body>, etc.))
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 429
  • View blog
  • Posts: 1,813
  • Joined: 30-April 10

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:32 AM

For single page sites I create a site with all the header and footer content and between them I create a div that has an id of "wrapper" and load partial .html documents using element.load(); this will load all the partial html code into the div. Remember to keep the same format for the partial files so you can style them in css the same or use classes to change the way content is presented.

This post has been edited by laytonsdad: 18 July 2013 - 07:34 AM

Was This Post Helpful? 0
  • +
  • -

#9 maxadaloudis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-June 13

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:41 AM

View PostSecretmapper, on 18 July 2013 - 07:16 AM, said:

Ahm, no, actually I think that websites were never constructed with a non-content index page, those who actually used iframes were the minority. So in a certain context modern webpages are made the same way they are from the past, few tricks here and there, but still the basic idea.

What is the problem? I was confused with your 3rd paragraph. Basically what you would have is just a header div, content div, footer div and just replace the content div through Ajax. That way header and footer basically stays the same, and you can just edit the content.



Quote

Now I've got a home/index/main/first page, whatever you call it. That has a lot of divs, including a 'header' div, and a 'content' div. So what I did is I copied that code and wrapped the header on the other pages: (messages, help, about etc.) into a class and basically made it invisible using css. So I have a full main page, aswell as subpages with the content exactly the same layout but the header is replaced by empty space, with my future Jquey/Ajax/Javascript knowledge I would load those pages into the main content page, with or without that invisible header code.
Still if I want to add a link to my header for instance, I need to edit all those headers on all those pages!
But I can't load frames into a index.html page again because I'm using divs!


With this I meant, that right now I've got a full homepage, with a div containing a footer, a div containing content, and a div containing a footer. Some divs consist of about 10 other divs to be able to style everything perfectly, but this is only for the homepage. So in plain english: The content div is style just how I want it for all of my content, and I want to bring in just content in there when the user clicks the links in the header.

To achieve something like that, I thought, just keep that page as it is, and then create my sub pages with just copying the code but deleting the original homepage CONTENT in it. In the subpages I replaced it with a single line like: "This is the about page". I wanted to postpone the content on the subpages, first focus on getting that jquery navigation.
To keep the spacing and the padding the same I hid the header.

So the
<div class="header">'header content'</div



becomes
 <div class="subpageheader">   <div class="header"> 'header content' </div>          </div> 


I basically "wrapped" it up into another div and in the CSS i've put something like:

.header {
///all kinds of styles
}


.subpageheader {
visibility: hidden;




This wasn't a very smart approach, because with the method of literally inserting sub pages into my page, this gives me the full pages with the new loaded content, but with a lot of white space above it because that's where my header would be, it's like:

---header----


--header (hidden)--

--content--



I want this:


--header---


--content (initially homepage content)


When the user clicks on the help page for example:



--header---


--help page content (loaded, REPLACING THE ORIGINAL CONTENT ENTIRELY)--


So. Yeah. I need to delete that header and just have CONTENT on the SUBPAGES that are inserted into the INDEX (home) PAGE where they REPLACE the INDEX CONTENT.

This creates my question, with this technique of loading content into a initially 'fully saturated' homepage. I worry for instance that in the adress bar the url will never change, because basically you're always on index.html but there's just new content in the content div each time you click a link.

Do I need to create fully seperate static pages? Probably not because if I want to add a new page I need to add it's link to every header on every page.

But then again with css and javascript people normally don't use empty index.html pages and then load a header.html, a footer.html and a content.html file in it right.

So how do I construct this?

This post has been edited by Dormilich: 20 July 2013 - 06:00 AM

Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 429
  • View blog
  • Posts: 1,813
  • Joined: 30-April 10

Re: How is a modern website actually constructed?

Posted 18 July 2013 - 07:47 AM

For your history in the browser you could look into using history.js
Was This Post Helpful? 0
  • +
  • -

#11 AfterBurner66  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 116
  • Joined: 02-August 08

Re: How is a modern website actually constructed?

Posted 20 July 2013 - 04:59 AM

Frames because of the vulnerabilites they were triggering and because are really obsolete in the design regard, are altogether abandoned a long time ago. What you say here, is to dynamically load parts of pages asynchronously, that is the definition of Ajax. Knowing Javascript is an absolute plus, so whatever library/ framework you use for the client side, can be modified/ debugged a whole lot easier. What really has changed over the past ten years or so, is that 1)Javascript became a real monster for the client side, and given the faster machines we use, this takes a lot of burden from the server 2)Ajax was just a certain mix of older technologies, that other factors allowed to be used and gave a desktop look and feel in web apps. 3)Server side technologies became more robust and allowed for more complex things to be implemented 4)Databases, became what was ten years before the file system for a web app. All these gave the potential to develop complex out-of-the box software like cms.
If you have to develop something small to medium then cms is the way to go, combined with some client side framework(jquery is indeed excellent).
For something bigger or really really big, you can build your own cms using PHP for instance - although there are excellent alternatives, and this gives the answer in my opinion, to the "how" you ask, for putting together your site templates. It's better to develop something robust from scratch and to rely on it for many different uses, and not to develop something that will solve you just one particular instance of a problem and nothing more. As the trend goes on, templates of every kind and size are used as building blocks for robust software.
I am not a web designer to talk extensively about CSS, although I know some things about this. But, using a server side language, you can build and load what you have created as a web designer. As a simple example, if you have to create a medium web site, then create some templates for header, body and footer, create a "central" script in PHP for instance, and using some coding logic, make it to output each page's title and load the templates in each page and/or load some other templates on other pages etc.To reduce the load on server, use for instance jquery to have some parts of the pages change according to user actions, and do some other tasks like form and button control. You can use a database as your backend and load even the whole site fron there.There's no reason to mess only with HTML and CSS to create something decent because you just can't. HTML is the workhorse for content of the page, CSS for the absolute or relative positioning of the elements on the page and that's all there is to it.

This post has been edited by AfterBurner66: 20 July 2013 - 05:04 AM

Was This Post Helpful? 0
  • +
  • -

#12 ccubed  Icon User is offline

  • It's That Guy
  • member icon

Reputation: 160
  • View blog
  • Posts: 1,403
  • Joined: 13-June 08

Re: How is a modern website actually constructed?

Posted 20 July 2013 - 09:31 AM

Most of these suggestions have been to dynamically load content into the page and I'm not sure I can fully support that.

1) It's not always necessary for the project to dynamically load content. Dynamically loading content is also a performance hit and if you don't have to do it, as in nothing ever changes or the client has no desire to change things themselves, there is no reason to take that performance hit.7

2) The idea behind Dynamically Generated content is to create a framework which ensures that the content you put on the page is displayed the same way on each page. However, it isn't always reliable. For instance, Depending on how you load the content, it may not be held to the rules you've enforced into the rest of the document.

3) As a modern web development community, we are spending way too much time on CMS, PHP, AJAX and dynamic effects. Yeah, these are great, but we're overusing them, far too much in my opinion. Why on a one page site are you using a CMS? Why are you using ajax to pull in your HTML? It's one page. There's no reason to dynamically load any of the content unless it's a rotational banner or ad.


To answer some of your questions:

Quote

Are websites still constructed with a noncontent index page that loads a separate header.html, content.html, footer.html etc into divs? (using jquery, php or what not)


That's one method, as someone pointed out. It certainly isn't the only method. It is the easiest method in terms of maintenance, but I won't say it's the only solution and I won't recommend it because I think it's over used to begin with.

Quote

Basically I lost track and vision of how a website is basically constructed.

So could someone, in plain english just explain me how I should do this?


Generally, I do this:
Think about how I want it to look
Draw a picture of it
Make a basic layout using blank divs with the word test in them a black border
Decide what the requirements are for the website
Decide if I need to use dynamic content
Design the dynamic scripts
Design the content
Design the main page
Test
Go back and fix stuff
Test
Show to client
Client tells me it's stupid and wants something else
Change it
Show to client
Client tells me it's stupid and wants what I had before
Change it
Show to Client
Client tells me it's stupid and wants what I had last time with this one's text
Change it
Show to Client
Client decides he wants an abomination of marquee laden html and pictures
Change it
Show to Client
Client loves it, I cringe inside and collect paycheck and move on

(the last part was a bit of a joke)
Was This Post Helpful? 0
  • +
  • -

#13 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,424
  • Joined: 28-November 09

Re: How is a modern website actually constructed?

Posted 20 July 2013 - 11:21 PM

The thing to think of when you're making a page dynamic is finding the repetition. The same principles exist within automation, and there are different levels to it that I go through as I'm refining tasks. Do note this is a great approach for much of any abstraction really, I think of it as the legos approach.

1. The Obvious

Look for things that are very obviously repeated, such as the header and the footers of your sites. Abstract these out into separate files and include them as you go.

2. Mostly Static

So maybe your menu tends to change based on certain factors, but for the most part will stay completely the same. These are the next things to abstract out, those bits that are mostly static in nature.

3. Templates

Now we're getting into the more dynamic parts of the site, but still a noticeable pattern can be observed here. Posts follow the same guidelines, as do comments, and numerous other things. Making templates for these and storing them in separate files is the next break down step.

4. Wrappers

In order to have a dynamic site, we have to have some form of users. A wrapper is what would allow us to wrap templates and other elements under a context of say administrator that would change a lot of the site elements. A user should not be able to access an admin panel template or anything of that nature.

[Optional] Ajax

All the posts are populated in templates, and you can pull them into a front page template. Now how do you dynamically load these as they come along? AJAX is the next step (and is notably optional in most cases)
Was This Post Helpful? 0
  • +
  • -

#14 maxadaloudis  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-June 13

Re: How is a modern website actually constructed?

Posted 22 July 2013 - 03:47 PM

I'm getting an idea of what you mean, and that is to differentiate what is static/dynamic. I've been working really hard on a sort of social network site (Yep, another one). I like the idea, and the reason I building it is because it offers content in an entirely new way, but far more important, I like using it.

As far as that goes, it's still a site, therefore, I need a menu, a window of content and a footer.
I want basic, basic, basic and additional functionality later on.

Html and Css are done I've marked up and styled my site to the fullest. I'm currently learning javascript and doing basic loops and stuff in which I do not see any functionality right now, hope that will change soon.
I think I'm gonna choose to have this functionality of basic navigating and making the page more dynamic by adding javascript and soon jquery, in that I'm going to cut out my header/footer out of my original homepage to save them as separate 'pages'. Later on I bring it all together with Javascript. (getelementbyID? Read that phrase in every jquery form about basic website navigation)
I think PHP is still too far away to be using it (CMS) to create such a basic page. When I've learned PHP, then I'll reconsider using it for my website navigation. Of course I'll use PHP for user database etc.

So right now: HTML for the markup, CSS for the style, Javascript for the dynamic content (mousehovers, comment/register forms, navigating between pages etc.) After I have a working site in terms of navigation I'll add PHP to create this database, and consider using it for page navigation. (If changing that isn't too much of a struggle)

Does anyone thinks I'm being stupid here by loading the header/footer/content window separate by Javascript/Jquery/Ajax instead of PHP? Please tell if I am.

Thanks, you guys gave me a better sight of how a website is supposed to be constructed. (I'm deeply wired into my syntax and my code right now so maybe that's why I'm having such a hard time figuring this out.)

This post has been edited by Dormilich: 22 July 2013 - 10:26 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1