Servage Magazine

Now that you have a sense for the language of JavaScript, let’s look at some of the ways we can put it to use in modern web design. First, we’ll explore DOM scripting, which allows us to manipulate the elements, attributes, and text on a page. I’ll introduce you to some ready-made JavaScript and DOM scripting resources, so you don’t have to go it alone. You’ll learn about “polyfills,” which provide older browsers with modern features and normalize functionality. I’ll also introduce you to JavaScript libraries that make developers’ lives easier with collections of polyfills and shortcuts for common tasks. Meet the DOM You’ve seen references to ...

The photogenic JPEG Another popular graphic format on the Web is JPEG, which stands for Joint Photographic Experts Group, the standards body that created it. Unlike GIFs, JPEGs use a compression scheme that loves gradient and blended colors, but doesn’t work especially well on flat colors or hard edges. JPEG’s full-color capacity and compression scheme make it the ideal choice for photographic images. The photogenic JPEG Another popular graphic format on the Web is JPEG, which stands for Joint Photographic Experts Group, the standards body that created it. Unlike GIFs, JPEGs use a compression scheme that loves gradient and blended colors, but doesn’t work especially well on flat ...

Web analytics are a powerful tool for obtaining a fundamental overview of the visitors to your website. They help with strategy formulation for current and future web designing. In this post, I convey some thoughts regarding our best friends, web analytics; Google Analytics in particular. Recently, Google released a beta version of its new and powerful analytics tools, called Universal Analytics. This version includes tons of functionality and features, allowing all kinds of industries to dig deeper with regards to their visitors’ behavior on their websites. Referral Path Most web analytic tools tell us everything about the journey of our users through our website. This data may include the ...

For video, the most common options are: Ogg container + Theora video codec + Vorbis audio codec. This is typically called “Ogg Theora,” and the file should have a .ogv suffix. All of the codecs and the container in this option are open source and unencumbered by patents or royalty restrictions, which makes them ideal for web distribution, but some say the quality is inferior to other options. • MPEG-4 container + H.264 video codec + AAC audio codec. This combination is generally referred to as “MPEG-4,” and it takes the .mp4 or .m4v file suffix. H.264 is a high-quality and flexible video codec, but it is patented and ...

Last year, in 2012, we witnessed the rising trend of responsive website design in various niches. This trend will continue to rise; and so, we need proficient designing tools, such as Adobe Fireworks, to make highly interactive UX designs, via planning and prototyping. In this post, I illustrate some decent approaches to responsive designing, using Fireworks. The focus here is on user experiences and interaction designing aspects. Grid layout In responsive design, grid layout is important. The web designer must still consider content prior to designs. Once content is developed and placed, you get a better idea about the placement of designs. With responsive web designing, content elements like ...

  Having a function that executes the exact same code throughout your script isn’t likely to be all that useful. We can “pass arguments” (provide data) to native and custom functions in order to apply a function’s logic to different sets of data at different times. To hold a place for the arguments, add one or more comma-separated variables in the parentheses at the time the function is defined. Then, when we call that function, anything we include between the parentheses will be passed into that variable as the function executes. This might sound a little confusing, but it’s not so bad once you see it in action. For example, let’s say we wanted ...

In the last two or three decades, we experienced the web on a single platform, a desktop device, along with a page-like paradigm. Fact is, we still have those devices on many of our desks, but rely on them less and less. Now, we have the luxury of accessing the internet through various devices, while on the go. This simple change in devices has made the web experience more interesting; and yet, more challenging for web designers. Today, if a designer is faced with a proposal from a progressive client, they have to short-list different things for planning that website’s development. Let’s take a look at the criteria a ...

In the earliest days of the World Wide Web (I know, I was there), it was possible to add a MIDI file to a web page for a little beep-boopy soundtrack (think early video games). It wasn’t long before better options came along, including RealMedia and Windows Media, that allowed all sorts of audio and video formats to be embedded in a web page. In the end, Flash became the de facto embedded multimedia player thanks in part to its use by YouTube and similar video services. What all of these technologies have in common is that they require thirdparty, proprietary plug-ins to be downloaded ...

A gradient is a transition from one colour to another, sometimes through multiple colours. In the past, the only way to put a gradient on a web page was to create one in an image-editing program and add the resulting image with CSS. CSS3 introduced the ability to specify colour gradients using CSS notation alone, leaving the task of rendering colour blends to the browser. Gradients can be applied anywhere an image may be applied: background-image, border-image, and list-style-image. We’ll stick with background-image examples in this article. There are two types of gradients: • Linear gradients change colours along a line, from one edge of the element to ...

I recently attended the WebRTC Expo, where nearly 700 attendees were sharing ideas and foreseeing the bright future of the web. There was a merging of voice with video. Data, in real-time communications, became the hot topic, with the introduction of WebRTC standards for the next generation of web browsers. Accustom to WebRTC If you are not accustomed to the term, WebRTC, let me explain this in simple terms. WebRTC is an open source project enabling us to do seamless Real-Time Communication (RTC), utilizing the backbone of the next generation of browsers. Our website or web application has the capacity to offer peer-to-peer connectivity through audio, video, and text, using simple ...