The web is a wonderful place. It connects people from across the globe, keeps us updated with our friends and family, and creates revolutions never before seen in our lifetime. It has certainly come a long way since its humble beginnings back in the early 1980′s..
Web design basics
The most important file formats on the Internet
You can meet different file formats in the search engine search results. There are texts, graphics, images, videos, animations:
HTML HTML (Hypertext Markup Language) HTML is for publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors – you type it in from scratch – to sophisticated WYSIWYG authoring tools. HTML uses tags such as h1, h2, h3, … to structure text into headings, paragraphs, lists, hypertext links etc.
The Extensible HyperText Markup Language (XHTML™) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML rather than SGML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML, and a series of specifications has been developed for XHTML.
DHTML (Dynamic HTML)
Macromedia Adobe Flash (formerly Macromedia Flash) is a multimedia platform originally acquired by Macromedia and currently developed and distributed by Adobe Systems. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video. It contains a scripting language called ActionScript. Several software products, systems, and devices are able to create or display Flash content, including Adobe Flash Player, which is available free for most common web browsers, some mobile phones and for other electronic devices (using Flash Lite). The Adobe Flash Professional multimedia authoring program is used to create content for the Adobe Engagement Platform, such as web applications, games and movies, and content for mobile phones and other embedded devices.
Files in the SWF format, traditionally called “ShockWave Flash” movies, “Flash movies” or “Flash games”, usually have a .swf file extension.
PDF – Portable Data Format
Portable Document Format (PDF) is a file format created by Adobe Systems in 1993 for document exchange. PDF is used for representing two-dimensional documents in a manner independent of the application software, hardware, and operating system. Each PDF file encapsulates a complete description of a fixed-layout 2D document (and, with Acrobat 3D, embedded 3D documents using U3D) that includes the text, fonts, images, and 2D vector graphics which compose the documents.
JPG (Joint Photographic Experts Group) is a lossy compression technique for color pictures. Pronounced “jay-peg”, JPEG is an ISO/IEC group of experts that creates and maintains standards for a suite of compression algorithm for computer image files. PEG/JFIF is one of the most popular image formats used for storing and transmitting images on the Internet. JPEG is a lossy compression method performed using discrete cosine transformation, where some data from the original picture is lost.
The Graphical Interchange Format (GIF) is one of the most widely used image formats on the web. GIF files are recognizable by their .gif file extension. GIF is suitable for images with sharp edges and relatively few gradations of color, such as line art, cartoons, and text. You can also create background transparencies and animations using GIF images. The format supports up to 8 bits per pixel allowing a single image to reference a palette of up to 256 distinct colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.
Portable Network Graphics – PNG was developed to surpass the limitations of GIFs, and as a means by which developers can avoid having to worry about the patent licenses associated with other formats. PNG was designed to offer the main features of the GIF format, including streaming and progressive file formats. It also provides greater depth of color, catering to images up to 24 bit in color.
It’s expected that support for PNG will be widespread in the near future, although it will never completely replace GIF, as it doesn’t support animation.
The audio and video files in the Internet may require a separate study because of the different compatibility problems, therefore we list here only the most popular audio (MP3, WMA / ASF, OGG, MP4, WMA / ASF, WAV, …) and video (MPEG, AVI, ASF / WMV, QuickTime / MOV, VIVO, FLI, RealMedia, …) formats, but do not forget the flash has similar capabilities.
What is the difference between a website and a brochure?
There is a fundamental difference between a printed page and a web site. If the printer prints out a poster, each copy will be exactly the same in size and color effects also contain exactly the same content (assuming that the printer’s done a good job!).
If anyone would like to see his or her website appear in exactly the same everywhere, it’s easier if he or she do not has a website! Publishing a web page on the Internet has fundamentally different characteristics on different places. You can see same page in different monitors (quality, resolution, calibration, …) with different size of the screen within the browser, furthermore there are many types of browsers (Safari, Firefox, Mozilla, Opera, Netscape, iCab, Camino, Lynx, Explorer, …) and they can run on Windows, Macintosh, Linux, Unix, … so on different operating systems, which may result in significant differences in the display appearance.
Dynamic and static web pages
If you want to see a simple HTML page, the browser sends the page address to the server and the server sends back the ready HTML code and the browser displays it.
Dynamic pages are in two main versions: dynamic client-side solution or dynamic server-side solution. (Client is our computer, the server is the computer which which has the data on the Internet.)
- The second version is the dynamic server-side solution. In this case, the server runs a php program for example when the browser sent an internet address, makes a dynamically generated HTMl code and sends it back to the browser, that only shows it. It is possible that server still need to work with data in the database, so it schould communicate with database server (which often run on another computer).
Checking HTML, XHTML, CSS codes, links, robots
The World Wide Web Consortium (W3C) is an international community that develops standards to ensure the long-term growth of the Web. The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee, W3C’s mission is to lead the Web to its full potential. Contact W3C for more information.
W3C’s vision for the Web involves participation, sharing knowledge, and thereby building trust on a global scale.
W3C is led by Tim Berners-Lee, inventor of the World Wide Web. As Director, Tim Berners-Lee is supposed by a staff of technical experts who help coordinate technology development and manage the operations of the Consortium.
W3C Members and invited experts from the public provide energy to the groups that write W3C’s Web standards.
The broader Web community also plays an important role in reviewing and providing input on specifications; there are many ways to participate in W3C even as an individual.
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.
The Markup Validator is a free service by W3C that helps check the validity of Web documents.
Most Web documents are written using markup languages, such as HTML or XHTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.
Validating Web documents is an important step which can dramatically help improving and ensuring their quality, and it can save a lot of time and money (read more on why validating matters). Validation is, however, neither a full quality check, nor is it strictly equivalent to checking for conformance to the specification.
The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.
Do you need it? If you are a Web developer or a Web designer, this tool will be an invaluable ally. Not only will it compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability.
The possible errors (ERRORS) should be corrected, the warnings (WARNINGS) is to review and, if it is possible correct them.
The non-functioning links can cause more damage. The search engine robots are not very happy with them, the visitors don’t like if a link is given to an error page instead of a valid result. It may be useful, therefore, the following service:
This Link Checker looks for issues in links, anchors and referenced objects in a Web page, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup. The Link Checker is part of the W3C’s validators and Quality Web tools.
will provide practical help to determine if it see the robots your web site or not. Find out how Spider bots view your website. This includes most major search bots including Google, MSN and Yahoo!.
You can find many useful little feature on this page:
- Display your site Google PageRank, – Display the last time Google bot access your site, – Check if all are ok in your meta tags, – check your links ….
The page structure
In the initial period was the table design. The images, text, graphics were arranged by tables. With clever tricks, background graphics, complicate table structure could be beautiful sites prepare. A few years ago, almost everyone has used this solution. The advantage is that the browsers can display a similar design. The disadvantage, however, that the pages could be slowly, it was very difficult to develop the source code, could be difficult to manage the page, and the search engines often couldn’t read it.
There is another possibility to format the page: using style sheets. In this case you can separate the content and the design: the page text content is clear, it is easy to read from the source code by search engine robots. The site content and design (appearance) can be easily modified indepentendly. Can be show the same content in different media formats: web, mobile phones, braille devices, printers, projectors, TV, we have to change the style sheet only …
The second solution is more advanced and richer supported. But unfortunately there is no standard style sheet. The same style description the different browsers can interpret differently. A well-planned and very well-structured page looks in one browser, while another is completely falling apart. Microsoft Explorer browser at the forefront of unique interpretations and errors, making the life of Web developers very hard.
Many people use an intermediate solution: Minimum table design. This means that the basic layout of a page a simple table, but everything else, also the table styles are formatted with css styles.
The client–server model of computing is a distributed application that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.
The term client-server refers to a popular model for computer networking that utilizes client and server devices each designed for specific purposes. The client-server model can be used on the Internet as well as local area networks (LANs). Examples of client-server systems on the Internet include Web browsers and Web servers, FTP clients and servers, and DNS.
The Flexible Web
Responsive web design is not about using media queries to switch between predefined sets of fixed layouts. Responsive web design is about building a foundation, paving up a flexible groundwork that scales properly with the resolution. Then, at the points where the layout is actually breaking, I can lap it up with media queries.Responsive web design is not about using media queries to switch between predefined sets of fixed layouts. Responsive web design is about building a foundation, paving up a flexible groundwork that scales properly with the resolution. Then, at the points where the layout is actually breaking, I can lap it up with media queries. …
Responsive Web Design for Advanced Users
Responsive means something that responds quickly, adaptive means something that can be modified as per the given context or situation and responsive website design is a coming together of both these terms. Responsive websites fluidly change their size and scope dependent on the size of the screen etc. but when you build adaptive websites (either from scratch or using a diy website builder), you are actually identifying a set of factors and ensuring that the website will adapt to them.