What’s the difference between popular client-side and server-side languages?

Client-side language

Client-side scripts are often embedded within an HTML or XHTML document (hence known as an “embedded script”), but they may also be contained in a separate file, to which the document (or documents) that use it make reference (hence known as an “external script”).

Server-side language

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produce a response customized for each user’s (client’s) request to the website. The alternative is for the web server itself to deliver a static web page.

What’s the difference between an application server and a web server?

Application Server

An application server is a server that exposes business logic to client applications through various protocols like HTTP. Application servers can contain web servers internally. They are used to serve web applications. To deliver various applications to another device, it allows everuone in the network to run software off of the same machine. Its resource utilization is high.

Web Server

A web server handles HTTP protocol. Its used to serve web based applicarions. Web servers keep files available for the web browsers to view when a user accesses the site on the web, handles HTTP and requests from clients. Its resource utilization is low.

What’s the difference between a scripting language and a markup language?

Markup Language

A markup language is a language which is used to represent structured data. For example, HTML enables to specify that some part of the document is a title or some other part is a list, by comparison to a flat text document. Markup languages are not considered as programming languages.

Scripting Language

A scripting language is a programming language which is interpreted, rather than compiled, which means that scripting languages represent a subset of all programming languages. It is not always obvious whether a programming language is a scripting language, like it’s not always obvious whether a language is compiled or interpreted.

Web Editors

Def: (n) a software program for creating and editing Web pages by inserting HTML code; also, a person who creates and edits the content of Web pages

There are many different website editors and text editors out there. In Web Development and Design, we work with Notepad++, Adobe Dreamweaver and other editors that we experiment with. Most text editors are free to download on your home computer like Notepad++. In these editors, we work with varieties of coding languages like HTML which is responsible for the paragraph you are reading right now (Hyper Text Markup Language), CSS (Cascading Stylesheet), JavaScript and we dabble in the videogame languages.

What we do with web editors

Step One – Planning

During our classtime in Web Development and Design, we are introduced to the behind the scenes of the behind the scenes that go into creating a functioning webpage. What do I mean by behind the scenes of the behind the scenes? Well, we begin with storyboards (a sort of diagram) that embodies every part of our potential page. It’s a phase and first step of development and where we can decide content and even design of a page. Color schemes, images and any other ideas tha can be thrown into the mix. Of course ideas can be tossed in the trash as you work, but a story board is the first step.

Step Two – The Code

After you have planned out what your website and how you want it to look, you then go onto the editors. We bagan with the basic tags: HTML, head, body and and footer. There are many softwares out there that do a lot of shortcuts for you like Adobe Dreamweaver but we began in Notepad++; a free downloadable software. It doesn’t offer the same shortcuts as Dreamweaver and has you type everything out exactly how it should be. It has you type everything out for best practice but isn’t case sensitive. Meaning, all of your code must be lower-cased, but in Notepad++, it’s not as big as an issue.

Step Three – Style

After we learn what belongs in the tags, we learn about Cascading Stylesheets; our styling language. For short, CSS. We learn how to embed it into our content and create a separate file for the styling as well. CSS has a totally different layout than our normal HTML code. In HTML, we use angle brackets ( > ) but in CSS, we use a lot of curly braces ( } ) and semi-colons ( ; ). CSS is responsible for any colors and fonts on this page as well as the navigation bar above.

Step Four – Making It Public

A lot goes into making a website public. For any website to become public, you must send it to a server. Servers like Jigsaw, Klone, GoDaddy and Apache. Once they are on those servers, it’s a matter of File Transport Protocol or in the classroom, we say FTP. What FTP does is transfers computer files to a host or server and has it appear on the Internet.

Basic Vocabulary

HTML

Stands for Hypertext Markup Language

Standard markup language used to create webpages

Responsible for content on a webpage

The language is written in HTML elements consisting of tags enclosed in angle brackets.

Hypertext

Text that has a URL attached

URL

Stands for Uniform Resourse Locator

it’s the address of every single document, page or any other resource on the World Wide Web

CSS

Stands for Cascading Stylesheets

Used for describing the presenstation of a document in any markup language

Designed to enable the separation of document content from dociment presentation

The language is writen in a different format that HTML; consists of curly braces and semi-colons.

Internet

Worldwide collection of networks that links millions of computers and other internet ready devices together

World Wide Web

The www. in websites

A service available on the Internet

A worldwide collection of web pages that have built in links to other pages

Web Page

Electronic document on the Web that contains text, graphics, videos, sound and links to other pages

Website

A collection of related Web pages

IP Address

Stands for Internet Protocol

Used by the Internet Protocol to identify each computer on the internet

Web Server

A computer that delivers Web pages

What are file formats that are common to the Internet?

The primary web file formats are GIF (pronounced ‘jiff’), JPEG (‘jay-peg’), and, to a much lesser extent, PNG (‘ping’) files. All three common web graphic formats are so-called bitmap graphics. Bitmap files are the familiar types of files produced by cell phone and digital cameras.

GIF

In the early 1990s the original designers of the World Wide Web adopted gif for its efficiency and widespread familiarity. Many images on the web are in gif format, and virtually all web browsers that support graphics can display gif files.

JPEG Graphics

Unlike gif graphics, jpeg images are full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colors. jpeg compression uses a sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression.

PNG

Portable Network Graphic (PNG) is an image format developed by a consortium of graphic software developers as a nonproprietary alternative to the gif image format. PNG graphics were designed specifically for use on web pages, and they offer a range of attractive features, including a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. png images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.

What is a raster image?

In computer graphics, a raster graphics image is a dot matrix data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying formats. A bitmap, a single-bit raster, corresponds bit-for-bit with an image displayed on a screen, generally in the same format used for storage in the display’s video memory, or maybe as a device-independent bitmap. A raster is technically characterized by the width and height of the image in pixels and by the number of bits per pixel.

What is a vector image?

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons—all of which are based on mathematical expressions—to represent images in computer graphics. Vector graphics are based on vectors (also called paths), which lead through locations called control points or nodes.

Adding Interactive media through rich Internet applications

What is a Rich Internet Application?

Essentially, a Rich Internet Application is capable of delivering a rich experience to the user. It is the richness of the experience that is often enhanced by making software that is more natural – more connected, more alive, more interactive, and more responsive.

Let’s learn a little more about the focus points of RIA’s…

Connected

We are all connected by being on this planet. RIA’s do the same as they connect us to the internet. RIA’s use the noetworks provided by the internet to help us communicate.

Alive

In RIAs, we create rich experiences by modeling the movement and beauty we find in the natural world. Smooth sliding transitions, zoom effects, soft blurs, drop shadows, and rounded corners are elements of RIAs which help make software feel more like the natural world.

Interactive

RIAs facilitate physical, audible, and visual interaction. Many new devices are allowing for more natural methods of physical interaction. Multi-touch interfaces like tablet PCs and media players are becoming more common because users want to interact with software like they interact with objects in the natural world.

Responsive

Too often in the world of software people are forced to wait for their computers to respond. Whether due to network connectivity issues, processing limitations, or other problems, software too often makes us wait. Most web applications leave users waiting for at least four seconds every time the user clicks on something. With many applications the wait times can be significantly longer, even on a broadband connection. Imagine what an everyday conversation would be like with that latency. Real-time streaming, high performance client side virtual machines, and local caching mechanisms are becoming in integral part of RIAs because these technologies reduce latency, increase responsiveness, and make software feel more like the natural world.

Non-linear video editing

In digital video editing, non-linear editing is a method that allows you to access any frame in a digital video clip regardless of sequence in the clip. The freedom to access any frame, and use a cut-and-paste method, similar to the ease of cutting and pasting text in a word processor, and allows you to easily include fades, transitions, and other effects that cannot be achieved with linear editing.

Export video suitable for the Web

Know your audience and their data rate

When you deliver video over the Internet, produce files at lower data rates. Users with fast Internet connections can view the files with little or no delay for loading, but dial-up users must wait for files to download. Make the clips short to keep the download times within acceptable limits for dial-up users.

Select the proper frame rate

Frame rate indicates frames per second (fps). If you have a higher data rate clip, a lower frame rate can improve playback through limited bandwidth. Because video looks much better at native frame rates, leave the frame rate high if your delivery channels and playback platforms allow. For web delivery, get this detail from your hosting service.

Select a frame size that fits your data rate and frame aspect ratio

At a given data rate (connection speed), increasing the frame size decreases video quality. When you select the frame size for your encoding settings, consider frame rate, source material, and personal preferences. To prevent pillarboxing, choose a frame size of the same aspect ratio as the frame aspect ratio of your source footage.

Cover progressive download times

Learn how long it takes to download enough of your video so that it can play to the end without pausing to finish downloading. While the first part of your video clip downloads, you can display other content that disguises the download. For short clips, use the following formula: Pause = download time – play time + 10% of play time.

Remove noise and interlacing

The higher the quality of the original, the better the final result. Frame rates and sizes of Internet video are smaller than frame rates and sizes of television video. However, computer monitors typically have color fidelity, saturation, sharpness, and resolution at least as good as high-definition televisions. Even with a small window, image quality can be as important for digital video as for HDTV.

Follow the same guidlines for audio

To achieve good audio compression, begin with clean audio. If your project contains audio from a CD, transfer the audio files directly from the CD to your hard disk. Do not record the sound through the analog input of your sound card. The sound card introduces an unnecessary digital-to-analog and analog-to-digital conversion that can create noise in your source audio.

E-Commerce terms and concepts

What is E-Commerce?

Electronic commerce or e-commerce refers to a wide range of online business activities for products and services. It also pertains to ‘any form of business transaction in which the parties interact electronically rather than by physical exchanges or direct physical contact.’

Three primary processes are enhanced in e-business:

1. Production processes, which include procurement, ordering and replenishment of stocks; processing of payments; electronic links with suppliers; and production control processes, among others;

2. Customer-focused processes, which include promotional and marketing efforts, selling over the Internet, processing of a customer’s purchase orders and payments, and customer support, among others.

3. Internal management processes, which include employee services, training, internal information-sharing, video-conferencing, and recruiting. Electronic applications enhance information flow between production and sales forces to improve sales force productivity. Workgroup communications and electronic publishing of internal business information are likewise made more efficient.

Basic Terms of E-Commerce:

Return on Investment (ROI):

This concept is known as the most common profitability ratio. It measures the profitability by evaluating the performance of an investment. And it is calculated by dividing net profit by net worth. In other words, if ROI is high, the investment gains are enough when compared investment cost. ROI calculation gives an idea to investor whether continue to investing or not.

Cofunding:

Crowdfunding is a method of collecting capital in small amounts from a large group of individuals, who trust and invest in a project. And the investors, surely, wants to make a profit if the project they invested gets successful. Nothing is for free as you know.

Venture Capital:

Venture Capital, a popular term in ecommerce sector, is the money used to startup firms and small businesses at the risk of a long-term growth potential. Venture capitals generally invest not in ideas but in accomplished projects; and they may prefer to continue investment until the entrepreneurship is successful and goes public.

Private Equity:

Private equity refers to funds provided for entrepreneurships having a growth trend and greater growing potential. It is more extensive than venture capitals and stand by the entrepreneurship on the level of financial partnership. It is generally preferred by companies offered to public and private financiers.

Incubator:

In incubator system, private companies or municipal entities and public institutions, such as colleges and universities assign sponsors to any kind of entrepreneurship in start-up phase. They provide mentorship, offices and capital in return for a really low interest. Cambridge Innovation Center (Cambridge, Mass.) and TechColumbus (Columbus, Ohio) are very good examples for business incubation programs.

Angel Investor:

Angel investors support promising projects not by a capital fund but by their own personal savings. They provide entrepreneurs with money and also with mentorship, advices and network. But they are not angels, actually. In return, they request a bit higher interest when compared with other investors but experience and network they offer you will create new opportunities and open a new door for you.

B2B (Business to Business)

B2B stands for Business to Business and refers to business that is conducted between companies, rather than between a company and individual consumers. In other words, manufacturers provide products or services to wholesalers; wholesalers to retailers.

B2C (Business to Consumer)

If shortly described, it is an e-commerce model that provides products or services direct to the consumer. Especially online shopping stores prefer using B2C, in which companies sell products directly to the customers.

Software design principles

Design tenents associated with Web 2.0

Simplicity

Simplicity is important in any website you are building. Every website has aon overall goal, whether that is to inform or entertain, every website must reach a goal. An ultimate goal for a website is to allow the user to find what they are looking for and have it be effective. So, a website should be easy to look at and easy to nagivate through.

Central Layout

This “2.0” style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest. Also, because we’re being more economical with our pixels (and content), we’re not as pressurised to cram as much information as possible above the waterline/fold. We’re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.

Fewer Columns

A few years ago, 3-column sites were the norm of the internet world. 4-column sites weren’t uncommon, either. But now, 2-coloumns, sometimes three, is our limit. The saying “less is more” is a very used term in site building. The information being shared is being understood more clearly. When there are multiple columns, and if they go in different directions, the user doesn’t always know where to look or how to navigate on the website. It becomes less simple.

Separate Top Sections

Simpply, seprate top sections means to make the top of the page more distinct than the rest of the page that follows it. This idea is being used more than usual now than before. It also starts the site’s overall visual experience stronger and bolder than without a top section. If you have a logo, put it at the top of the page. It should stand out compared to the remains of the page.

Solid Areas of Screen Real-estate

Real estate comes in many forms: navigation, background/canvas, main content area, other content, and call outs. The strongest way to make to highlight these areas and make them stand out from others is using color. But, white space works just as well. Using color can distract a user from the content. Finding the balance between color and white space is the most affective way of grabbing attention.

Simple nav

Your navigation bar appears on every page of your site. It needs to be clear and identifiable as navigation and should be simple to target and select what the user is looking for.

Bold Logos

Bold logos show the user who you are. Your logo is what defines the company or industry you’re a part of. Your logo should work visually, be recognisable, and should represent your brand.

Bigger Text

Lots of newer 2.0 websites have bigger text compared to websites from a few years ago. If you fill the abount of space with less “stuff”, you have more room to make more important elements stand out. Making things bigger makes them more noticable. Not only does bigger text stand out more but it also is more accessible to more people. Not just users with vision impairments but also looking at a screen in sunlight or users who are sitting farther from a screen.

Bold Text Introductions

These normally set out the site’s USP, elevator pitch or main message. They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page’s visual impact, especially early on in a browsing experience. Only use one if you’ve got something bold to say. Maybe if you haven’t got something bold to say, maybe it’s worth having a think about the purpose of your page/site and coming up with something worth saying boldly.

Strong Colors

Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements. With good practice, using intense color is sometimes the best way to differentiate between parts of the page. The background colour makes it clear that this isn’t main content, and large, bold title text helps you see quickly what’s in each one, so you can decide whether it interests you.

Rich Surfaces

Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design. We all know that these little touches just feel nice, but we may not know why. Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and “finished”. They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look “touchable”, which is likely to appeal. But, 3-D effects are more work, increase the size of page assets and aren’t a necessity.

Gradients

Gradients soften areas that would otherwise be flat colour/tone. They can create the illusion of a non-flat surface.In page backgrounds, they may also create an illusion of distance. A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon.

Reflections

Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years. The classic Apple.com shiny plastic tabs, still in use today. These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that creates the plastic effect.

Cute Icons

Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning. Icons can be useful when they’re easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

Star Flashes

These are the star-shaped labels that you see stuck on web pages, alerting you to something important. They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites. They can really work well, but of course should only be used to draw attention to something important.