Web-Project Documentation

Project Breakdown:....................................................................................................................................2 Front-End:(Basically What the User Will See).....................................................................................2 Front End Element#1: HTML..........................................................................................................3 W3 Link.......................................................................................................................................3 WhatWG......................................................................................................................................3 Example of HTML-Only Site......................................................................................................3 Front-End Component#2:CSS3........................................................................................................5 HTML5+CSS3 Site-Example......................................................................................................6 Front-End #2:CSS(Cont.'d)..............................................................................................................6 Front-End Component#3: Images.....................................................................................................7 Front-End #4: DOM/Scripts/Etc... ...................................................................................................8 Wrap-Up of Front-End & HTML5...................................................................................................8 Back-End Site-Background...................................................................................................................9 Video on How to Create A Server On Your Own Computer:......................................................9 http://www.youtube.com/watch?v=KWRB-maTVyM................................................................9 Synopsis of the Video..............................................................................................................9 Back-End Software/Component Breakdown:............................................................................10 Why a good back-end is important.......................................................................................10 Executive-Function of the Back-end:(The Kitchen of A Fine Restaurant)...........................11 Back-end Component #1 : PHP......................................................................................................11 Notable Sites Using Drupal:......................................................................................................13 ...................................................................................................................................................13 Back-End Component#2:Database ..........................................................................................14 Example: Map of Relational Database Topography..................................................................15 RDBMS Management................................................................................................................15 Software Database-Management...............................................................................................16 Back-End Component #3: Apache .................................................................................................16 Back-End Component #4: Linux ...................................................................................................17

By :

Web-Site Project(Backend+Frontend Breakdown)

Project Breakdown:
Front-End:(Basically What the User Will See)
The front-end deals primarily with the external site, much like the siteperspectives that you see while doing your daily browsing. Thus, as a result, this particular perspective will be focused on all components that are seen by the enduser(a programming term for the customer). More specifically, this will be everything that is not server-based, system-based, and php-based(PHP is the one language that isn't viewable to the site's users while viewing the web-page). So at the very base of the web-page and everything surrounded by the web is that of html(hypertext markup language). This is an open standard that is developed

concurrently amidst two totally independent organizations(that are not for-profit). The names of these two organization's are the w3 organization, and the whatwg organization. The components that this deals with primarily are the html, and the css3. Front End Element#1: HTML Just to give a little bit of a breakdown the html is what composes the pages of all the various elements from pictures to text. HTML also includes more advanced elements/attributes that enable a developer to render headers, sub-titles, tables, images, and pictures with fairly dynamic formatting. HTML also encompasses one of the features that has literally made the web what it is today(especially wikipedia as its linking system is one which html has created). HTML's linking capability separates it from the rest, as it gives web-pages the ability to link a plethora of external articles, and media to one's site making it all one click away from the user. Also, html handles images, tables, and forms. These forms encompass a wide-variety of different uses from logging in, to surveys, to comments(i.e. Wall posts, etc...). No joke literally every little crevice is in these documents(linked below) with reference to HTML, & CSS. There is a little thrown in about MySQL with reference to HTML(HTML5), simply due to the fact that MySQL has been incorporated into the HTML itself.
*These standards are great however, I wouldn't recommend initially going to them to look into a question. I will provide some more user-friendly with a tone less scientific. But once familiar you'll probably love them as a resource.

W3 Link
http://dev.w3.org/html5/spec/Overview.html

WhatWG
http://www.whatwg.org/

Below is this great Company I was Checking outHopkins Vintage but its kinda a bland site, due to the fact that there is only html used to create it.

Example of HTML-Only Site

Illustration 1: This is An HTML5-Only Website, Very SImilar to A Word-Document

*Its really just a test site I am making for you on my computer,lol!

This is the basic Site that I began testing with, this is a shot of it with only html. This is actually everything but the overall content that would be put in the about section, or the services section, etc..... Furthermore, I was going to have the side-content comprised of some cool widgets/features. I was thinking a search bar(right), rss feeds, and perhaps some other cool tools, i.e. a calendar. Naturally I plan to have the site linked to the variety of different social networks, as well as external sources where you have an account. Thus, keeping all things related to you on the web available through the portal of your primary web-page.

Illustration 2: An Example of Icons/Style Used to Sync Your Site/Users With Your Other Stuff

Front-End Component#2:CSS3
So to take the HTML standard further with even more styling, design, and customization capabilities one then uses CSS. CSS can be included in-line in the HTML code, as well as can be linked to externally from the actual HTML web-page. It is through the inclusion of the in-line CSS, and externally linked CSS, stylesheets that one is able to properly go through the page and make it look like no other. Thi s is where one will see a lot of shapes, colors, different fonts, sizes of images, backgrounds, etc..... that are created for web-sites. For Example, the shot of one of my blogs will show what the new CSS3 coupled with HTML5 is capable of.

Illustration 1: Example of CSS(Cascading Stylesheets) in an Editor(Programming-Phase) Being Developed

HTML5+CSS3 Site-Example
(Everything one sees on a page like the one below is the front-end of the website)

*This is The Third Design I Made fo r My First Blog, But As You

Ca n See I A Far Cry From Just HTML. ts

Front-End #2:CSS(Cont.'d) A few things to note right here, basically the CSS3(newest CSS standard), is made enormous advances in the past couple years due to the fact that one is able to create multiple layers on a page(with images), this is what I did for the background. Believe it or not that particular background is 4-layers in some places(Thats what accomplishes the fade, around the edges, as well as the marble look with the transparent layer at the top). Now both the button and the texbox above it(form/input), is part of html, and that is an example of somewhat dynamic elements that are part of the overall website. Virtually for every html tag, either a single CSS style or multiple CSS styles may be applied. My title/heading of the page is styled with a number of CSS styles to give it a more dynamic, modern looking proportionally correct ef fect.

Front-End Component#3: Images Now images surprisingly so are far more important than what one would think. They are very heavy to serve(take up a lot of Internet bandwidth), thus it is very taxing on the server, and the site's speed. As a result, it is important to use to know the various formats, and optimize them to properly speed up the serving process of the rest of your site's page elements. Now there is not necessarily such a thing as a perfect image formatting, as there are different types of images that are preferable for different situations. For example, the favicon: the favicon is a very tiny icon that displays atop the user's browser upon visiting a web-page. Traditionally speaking the favicon is in the format of *.ico, and as a result other image formats will not work . The ma image formats are as follows:(The 3-letter abbrev. 's with an '*' are jor what is at the end of the filename) This is the better of the two.

*.jpg Highest Quality T ypically Compressed. T fully optimize for the o appropriate performance level one merely goes through and uses the most appropriate proportions.
The best overall said percentage to compression is that of 60%

however this can be designated a variety of different ways.

*.png This is the newer version of the graphics encodings, and it is a balance of RGB coloring for all images. The PNG stands for Portable Network Graphic, and as a result, there have been several different layers of *.gif > these traditionally are of the lowest quality, and furthermore, they consist of a data-structure of 8-bits. These have a tendency of looking very squarish and pixelish, kinda like nintendo games back in the day. *.ico All-in-all the least important in the sense that this is used primarily for the favicon(The small 16x16) graphic used by the browser tab and aside the url.

 The *.ico file-format is traditionally the format that all Windows icons

use. It was introduced in Internet Explorer #5, and since has been used.

Illustration 1: Example Of the Favicon(*.ico) Representation In Google Chrome Browser

Front-End #4: DOM/Scripts/Etc... We are not going to be focused on this much, however just know that along , with each web-page that is written in html, scripts can be applied to add animations, ef fects, site-applications(advanced calculators), etc... Some of these scripts etc.... can even be used to manage back -end site endeavors(This advancement is very recent, and doesn 't have an entirely strong foundation/as well as developer support comparable to that of PHP .) DOM: Document Ob ject Management, it is an event-based document structure that some CSS, and Javascript use to connect /interact with parts of html. (This is very advanced stuff). I'd say the components that make this front-end category up are as follows: J-Query Javascript Jscript *Not as widely used ActionScript *Not as widely used

Wrap-Up of Front-End & HTML5

Literally the Coolest Site I Have Ever Seen and it is Done in HTML5+CSS3
http://html5.hadw.com/index.html

Resource: Video#1
Introduction to HTML5 Video

http://www.youtube.com/watch?v=siOHh0uzcuY This video is done by google-developers and is both very high-quality and very informative.

Back-End Site-Background Dynamic, Interactive Site Back-end Elements

Video on How to Create A Server On Your Own Computer:

http://www.youtube.com/watch?v=KWRB-maTVyM This is done by the google-development team and it is truly a very well done, and professional high-quality overview. This newly released html-standard is packed to the gills with features, and all kinds of innovative changes.

Synopsis of the Video

Brief Overview of the Video's Content

Basically, the XAMPP is for quick installation as mentioned above(I have no god damn idea what the 'X'-stands for its ridiculous, lol!!!), it is what I used to initially practice with everything. The truth of the matter is that the configurations from scratch have a tendency of taking some time to setup. For example, your particular apache configuration file that I have been working on is roughly 600 lines long, and is comprised of a plethora of different elements linking in scripts, MySQL Database, directories for web -pages, authentication, as well as several url parameters so that the URL's will be properly encoded/secured, and all the pages/URLs will properly link together /etc.... so when a user opens it in a browser it is able to be viewed as well by all of the people. As I have learned, somethings in computer programming/development one should never throw away(as going through it again is a pain in the fucking ass!!! LOL!!!!) But when I am learning something for the first time, I am insistent on doing it from scratch once I have become familiar for the simple fact that I need to ensure that I understand how it works. Furthermore, this particular server setup although has php, and a MySQL -Database(More Specifically PHPMyAdmin The De Facto Web-Based MySQL Software). The phpmyadmin we haven't gone over with. But to help better explain everything and give you a

While watching the video keep a few things in mind:

1.) Get a better idea of the various components used to create/view a website. 2.) Begin to see how the various elements work together: The Apache(Headless Browser), serves the content which is then able to be viewed into the browser @ the browser url:http://localhost/ . is the standard default address of the person's computer.) PHP, how he is able to use the *.php(formatted) files, and how they help with getting the data, and then representing the various text/media/etc.... on the web-page. How he is able to control/change the various things on the web-page merely by editing text files. 3.) The initial pages that he is opening up are just simple default pages that are part of the xampp-install so the user can see if the installation worked. As well as use the default pages as an interface to set properly configure settings/etc.... As well as the interface that is provided for the user to interact with the web-page(Your's will be much easier, as we aren't just going to have PHP, but a PHP-Based Content Management System-Drupal). 4.) As well as see that the web-page is stored on the server in directories just like they would on a normal computer such as yours(when I realized this it kind of blew my mind, lol!!) various files/folders/etc.... that are part of a web-site, and get a very base-line idea of how all the little pieces(images, php, html, mysql, etc...) come together to fulfill the role of serving dynamic web-site data.

Back-End Software/Component Breakdown: Why a good back-end is important....

A fancy restaurant is perfect analogy for this particular situation, simply due to the fact that a high-end restaurant has a front-end that deals with ideally fulfilling all the customers wants during their meal experience. Now imagine the end -user is that customer and they , order what it is they want from their browser overlooking you particular web -site. Naturally, , a great restaurant with fine-dining encourages a great deal of personalized interaction between the waiter and their patrons and presents the customer with a menu that is full of , variety of choices, as well as decorated with a tasteful uniquely identifying aesthetic. Now take into consideration a buf fet, it is a very nice presentational layout where there is very little interaction with the waiter/staf f, as everything is laid out accordingly, resulting in little to no interaction. A static web-site is more similar to that of a buf fet with very little options, and interaction. This certainly doesn't pull of the overall experience the fine -dining restaurant would. Furthermore, the static-site surely wouldn't attract as many patrons, and will very likely not attract the desirable demographic/segment of consumers that the dynamic/interactive web-site(the fine restaurant) would probably the demographic of

patrons that a cutting-edge, dynamic, interactive web-site would. Additionally, it is a certainty that the buf fet's final product wouldn't nearly equate to the the final product of the fine-dining establishment.

Taking the Analogy A Bit Further....................

Taking the Analogy a Bit Further......

Executive-Function of the Back-end:(The Kitchen of A Fine Restaurant)

the customer with a finished product, fashioned from what was once originally ingredients, and food. stored in the (back-end)kitchen in a walk-in storage room. Basically the customer orders the desired meal, just like an end-user does in a browser. Once the customer makes the decision on their desired food, the waiter quickly brings the information to the back-end(the kitchen). When an end-user goes to a web-site link and clicks it in their browser. Their browser then correspondingly communicates with that sites address, and begins to load/create the content. This particular interaction/communication is all done by the site's http-server(Apache). Thus, in the fine-dining/restaurant analogy the waiter most appropriately corresponds to the Apache component of the traditional LAMP-configuration. No less, back to our example once the waiter/waitress takes down the proper order they quickly send it to the back-end so that the preparations may begin. Naturally one of the most important things in creating a restaurant is hiring the proper chef. A chef that is able to properly go through and create a wide array of dishes, with unique tastes and sensational presentation. With regard to a dynamically functioning web-site this culinary master/chef is PHP. In the way of dynamic web-sites this chef is that of PHP(Hypertext Pre-Processor) Don't ask me why its creator decided on a 'Recursive Acronym,' but taking its creator's from Germany its not really much of a surprise. None of them make any god damn sense. So naturally once the chef gets the information on the newly-ordered dishes of his/her patrons, then turning to the ingredients/food is the next step. To provide the customers with highest-quality dish full of flavor and tastes, a dish that they can't get anywhere else, the chef needs to have an ingredient room of the highest-caliber. Furthermore, it needs to be a fairly substantial ingredient room to house all of the ingredients/contents that go into the final product of a fine-dining high-end establishment. This ingredient room is that of the database, more specifically in our situation MySQL.

Back-end Component #1 : PHP As stated PHP stands for hypertext pre-processor and it is , that of a recursive acronym, however at first it stood for practical home-page programming. Its origin was in Germany by a man by the name of Rasmus Lerdorf

Drupal

Drupal is a dynamic content management system and it is a whole slew of php

scripts/programs/templates that will give optimal performance and usage for creating a dynamic site. Furthermore, PHP-based Drupal assists in providing modules for a variety of functions/tools that a site-developer will be able to use and add dimension into their site. There are a vast variety of resources on the Drupal site, and it is a tremendous asset to all who choose to work with the CMS system. T raditionally a content management system is comprised of templates which are made of the various web-pages in the site that have data changing. This is very similar to that of Facebook, its not like they have 1, 000 people concurrently working developing the thousands of new web-pages everyday for all the new pictures, content, comments, etc... that they have published. For the most part they have roughly 10 or so main page types types that the ma jority of their users use when interacting with the social site. For example the various pages that come to mind are the daily feed(upon first logging in), your profile page, friends profile pages, picture album pages, picture pages, group pages, business pages, and account/security settings pages. By all means I don't want to yield the interpretation that this list on the Facebook webpage-templates is precisely accurate, its goal was to better help demonstrate/explain the semantics/value of content management systems/PHPand how they are assets. ,

One of the greatest things about drupal, and at the same time is most likely why its usage is so widespread is simply due to the simple fact that it comes as a baseline php-based system, this is known as the core-system, and it is the bare-bone version. At its core it does the most basic site activities, functions/etc..... that practically any site would have. This is a very good thing, as in the world of computers, especially servers excess software/system-bloat is something that does nothing but decrease performance. Now with regard to adding some of the features that are mentioned below one merely just has the desired modules installed. These modules are basically a series of scripts, and code that seek to fulfill a particular function. For example, a module topic is E-Commerce, and in this topic are a number of different modules that seek to provide vital features crucial to an e-commerce focused site. Some examples are a shopping cart, business statistics software, and perhaps financial invoices.
What Drupal Will Manage Site-Cookies : It will keep all user-sessions organized, and enable site -owner to uniquely identify all sessions so that meaningful statistics may be generated(All results stored in PHPMyAdmin(Database)) Provide E-Commerce T ools: Shopping Cart, Product Pages, etc..... Provide PHP-Ran Themes, to design the website. Site-Url Management Site T ranslations Site-Security Site-Authentication Manage All Site Pages Provide Web-Publishing Interface Provide Comments/Communication Frameworks(i.e. Comment Boxes) Connect to and From Database(PHPMyAdmin-MySQL Database) T ransforms the html into the proper XML-formatted RSS, so that people can keep subscriptions in their readers/etc......

Notable Sites Using Drupal:

 The Economist The White House Examiner .com SymantecConnect Symantec Anti-Virus entity that targets small to large businesses World Wildlife Fund New York Observer HowT oDoThings.com NYU: Langone Medical Center Warner Bros. Records Vocalo.org As previously mentioned the site link is right here and in additionally I will provide a few videos from the site that were created to showcase some of the elements of drupal. Is Drupal the Right Tool For the Job? http://drupal.org/node/346217 Official Drupal Site http://drupal.org/start

Back-End Component#2:Database

MySQL It is a relational database management system, it was originally coined SQL, standing for SEQUEL. MySQL, the acronym stands for 'standard querying language.' This is a dynamically linked

collection of tables, and these tables although different in the contents they contain, have similar data. This brought the idea of the relational database management system. SQL is the primary database that encompasses the original relational model. As being the main choice there are a few variants that are made available to utilize the MySQL platform. Luckily the main system is free, however there
Example: Map of Relational Database Topography

RDBMS Management

Each Block/rectangle in the image is a table, this is the name at the very top of the box.

Preceding the title atop the block-shape are all of the items in the table(like column headers in Excel) with its corresponding columns in list-form descending down the interior of the block. Each table is connected through either a unique id, and /or primary key. For example, the primary key in a table salespeople would be maybe the salesperson 's name, and a secondary key would be perhaps a unique identifier for the particular salesperson. When creating relationships(connecting the tables to another table) everything in the different tables becomes synchronized. This is one of the ma things that gives jor databases supreme power The reason for this is that since it would be likely that the . sales and salespeople tables are connected due to them possessing the same titled columns, for example 'salespeople' this makes the two tables synced. Thus, when updating the company's daily sales, in the 'sales' table, the corresponding salesperson in the 'salesperson' table will have their total sales amount updated. Furthermore, not only is everything synced when new data is manually input(typed in by a person). A database can be updated autonomously with a systematically programmed query for a report. This particular venture in the standard query language goes by the name of stored functions. They are one of the truly
Software Database-Management

PHPMyAdmin: This is a PHP-Based SQL-Management Utility that will be incorporated in the site, it will provide the user to visually manage the database structure, design, maintenance graphically from their browser(very similar to the image included above.). This is essentially the program that enables one to utilize databases for web -based activities. Thanks to the help of PHPthe user is able to manage the database precisely how it would , be managed/maintained if there were a database in an of f line system, connected to a of f line network of machines.

Site for PHPMyAdmin: http://www.phpmyadmin.net/home_page/index.php Site for PHPMyAdmin Wiki: http://wiki.phpmyadmin.net/pma/Welcome_to_phpMyAdmin_Wiki

Back-End Component #3: Apache

This is probably the element that will be of least concern due to the fact it provides a http daemon that will run as a service on the server it will ensure that all end -user 's connecting , to your site are properly able to do so. The Apache configuration will be a series of containers that will load modules(as already discussed with drupal), as with a lot of opensource programs, languages, and applications modules are used to enable the core application to stay small, and high-performing including only the most basic elements/features that are needed by practically all whom of which use it. Then after the core-installation the user will be able to install and configure all necessary modules to ensure themselves the most customized, optimal system that meeds their needs while keeping a high-priority on performance. A few examples of Apache modules are as follows: mod_python supported on the server . Enables the python computer language to be ran and

mod_security Puts the proper cryptography in place ensuring that all sensitive data is password protected, and only accessible by those users that have privileges. mod_php Enables the php programming language to be supported on the Apache web-server thus enabling all php-based scripts to properly work and , function. The apache server has a few configuration properties its main configuration is where all of the above takes place, however further more specific configuration layouts and templates , may be used to properly go through and

Back-End Component #4: Linux

Very little up until now has been discussed in the way of the 'L,' in LAMP that is because it has the least to do directly with web-pages, and web-sites. Thus, it more so has to do with providing a superior system for a server This server in turn . properly provides a infrastructure that is far more conducive/optimal to curtailing its overall environment to serve website data to remote users accessing the web-page through their browsers.

Illustration 1: Penguin: Linux's Official Trademark/Mascot

So why is it that a Linux-based system is preferred to that of a Microsoft/Proprietary closed-source system?

The full detailed answer is a complicated one that comes from years of working with the various operating systems. Luckily for us, and the sake of keeping this overall writing one that provides a clear concise, and succinct overview of the main components it takes to successfully create a dynamic web-site. Overall, linux due to its open -source nature, and ability for anyone with the proper skills to work on it, develop it the linux operating system has far more minds involved with its creation than that of Windows. This is so due to the fact that only internal employees of Microsoft have the access to Windows while being developed. As a result of this there are more updates, and better features constantly being input into the linux operating system. Plus, in addition to its openness it is highlyconfigurable, and when using it the user isn't confined due to restrictions Microsoft has put on the product to protect trade-secrets, patents, etc.....Furthermore, there are a great no. of viruses that target windows computers, whereas linux-based /BSD systems are far more secure due to less total end-user's using the system. A look into the history of Linux/Unix Linux was created to provide more practicality and widespread usage building of f of its parent BSD, which was used by all the ma telecom companies, and very first jor electronic/tech-companies. So naturally the system's birth was to provide an operating system solution to some of the most technologically sophisticated communicationcompanies that used an array of dif ferent types of networking in day -to -day operations. Not to mention the unix/posix original linux variant was created by the best -of -the -best engineers and programmers that worked at these highly sophisticated companies. So all these reasons provide the overall foundation as to why the unix/linux system is used traditionally for servers. But all-in-all the proof is in the operating system 's most powerful and totally unrivaled primary component, its brain. The kernel is the logic and primary operator of everything that is happening in the system, and its logic /intelligence is unrivaled by virtually all proprietary open & closed source solutions. As a result, the linux kernel is far faster and capable of far more complex work than that of the Windows kernels. If there is , one thing that serving web-pages is for a processor/kernel is complicated. It is probably one of the hardest and most cpu-intensive jobs, and statistically it has been shown that LAMP-based server solutions have far less memory leaks and speed inefficiencies than that of Windows Enterprise Server-Solutions.

Plus, the best part is that it is free!!!!!!!!!!!!