Three examples of existing web sites and web
animations
Home Page
Source
Code
Considering the source code,
the website incorporates technology such as HTML, JavaScript, jQuery and CSS. Adobe
Dreamweaver supports all of these technologies and the website could be built
in it. jQuery is a JavaScript library which simplifies JavaScript programming
and adds interactivity to the websites. jQuery is referenced to the HTML using
this line of code:
<script type="text/javascript" src="http://www.aardman.com/wp-content/themes/aardman/js/jquery.js"></script>
CSS external files are used
in order to style layout of HTML web pages:
<link rel='stylesheet' id='aardplayer_styles-css'
href='http://www.aardman.com/wp-content/plugins/aardplayer/css/styles.css?ver=2.8.4'
type='text/css' media='' />
The website incorporates assets such as graphics, 2D and
3D animations, text and images. Images and graphics are may be created and
edited in Adobe Photoshop or Adobe Illustrator.
Considering the script, there are incorporated SWF files,
which are Flash animations:
swfobject.embedSWF("http://www.aardman.com/wp-content/themes/aardman/flash/navMenu.swf",
"nav-container", "100%", "100%",
"9.0.0", "http://www.aardman.com/wp-content/themes/aardman/flash/expressInstall.swf",
flashvars, params);
In order to view SWF files on the web, the end user has
to download Flash Player. The animated menu of the website is created in order
to entertain the end user. These Flash animations seems to be quite complex and
may incorporate ActionScript supported by Flash software.
3D animations are may be created in Autodesk 3ds Max. 3D
animations promotes feature films.
Trailer
of 3D animation
Production process:
- Learn – The most important part of the production process is discovering and understanding what technology to use for building the website according to the objectives and goals of the project.
- Plan – The first step will act as a foundation of the planning step which includes researching, note taking and sketching
- Design - Creating assets for the website
- Code – Building up the website in Adobe Dreamweaver software and incorporating the assets Launch – The developer uses file transfer protocol (FTP) in most cases to connect to the remote web server and upload the website from a local folder, to make the page publicly accessible
- Maintain - During the planning process, the website developer should be in charge who will maintain the website
The Time website incorporates technology
such as HTML 5, JavaScript and CSS. Here is the source code of the website:
Source Code
Home Page
Adobe Dreamweaver supports these
technologies so the website could be built in this software. It is used HTML 5
because the <!doctype > declaration is simple: <!DOCTYPE html> and
it is also used a new tag <nav> which is new in HTML 5 and defines a
section of navigation links. CSS external files are also used as well as Inline
CSS:
-<link rel="stylesheet"
href="http://img.timeinc.net/time/assets/css/main.min.css"
media="all" /> External CSS
-<section class="taboola"
style="clear: both;"> Inline CSS
JavaScript external and internal files
are used:
- <script
src="http://img.timeinc.net/time/assets/js/libs/modernizr.min.js"></script>
External file
-<script
type="text/javascript">
var s_account="timecom";
</script> Script in the <body> tag
Photoshop or Illustrator software
could be used for editing and creating images and graphics.
The website incorporates also static
and animated banner adds. They could be built with DHTML technology which
incorporates HTML, CSS, DOM HTML and Javasript. In the Home page, the top
animated banner is a Leaderboard banner which size is 728 x 90 pixels. On the
right side is a Half Page banner which size is 300x600pixels. In the top left
corner is a static Square button or just Button which could have size of
125x125pixels or 120x90pixels.
Production process:
- Learn – The most important part of the production process is discovering and understanding what technology to use for building the website according to the objectives and goals of the project.
- Plan – The first step will act as a foundation of the planning step which includes researching, note taking and sketching
- Design - Creating assets for the website
- Code – Building up the website in Adobe Dreamweaver software and incorporating the assets
- Launch – The developer uses file transfer protocol (FTP) in most cases to connect to the remote web server and upload the website from a local folder, to make the page publicly accessible
- Maintain - During the planning process, the website developer should be in charge who will maintain the website
This website is a Flash
website and the user needs a Flash player in order to view its content.
Home
Page
Such complex Flash website
must incorporate ActionScript which is supported by Adobe Flash software.
The website incorporates
assets such as 3D and 2D animations, text and graphics.
Navigation menu of the
website is animated in order to entertain the end user.
Animated
Menu
3D animations promote Ari’s
products and reveals his skills. Autodesk 3ds Max could be used for 3D
modeling.
3D
animation
Graphics and images could be
edited and created in Photoshop and Illustrator.
Production process:
- Learn – The most important part of the production process is discovering and understanding what technology to use for building the website according to the objectives and goals of the project.
- Plan – The first step will act as a foundation of the planning step which includes researching, note taking and sketching
- Design - Creating assets for the website
- Code – Building up the website in Adobe Flash software and incorporating the assets
- Launch – The developer uses file transfer protocol (FTP) in most cases to connect to the remote web server and upload the website from a local folder, to make the page publicly accessible
- Maintain - During the planning process, the website developer should be in charge who will maintain the website
No comments:
Post a Comment