Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Web Typography

Web Typography

I love oxymorons - phrases whose words, when placed beside each other, don't make much sense because they contradict each other. One classic, "military intelligence" got a lot of play in M*A*S*H and Catch 22. My all-time Web development favorite is "Web Typography." Typography simply does not exist on the Web. Type? Yes. Typography? No.

Flash developers, for example, seem to have embraced 6-point for everything. What you see, in this instance, are Web sites that look more like the fine print at the bottom of used-car financing ads than digital media communications vehicles. Many who develop in the HTML universe still haven't figured out that line length increases with a corresponding increase in point size. Both groups have developed an unnatural fixation on using light grey type on a dark grey background. To use a Web dev buzz phrase: "What's with that?"

The answer lies in the fact that typography, in the print universe, is fundamentally different from typography in the Web universe. Typography is the official name for the design and use of text on a printed or digital page. The problem is just that: the digital page.

As Dave Berlow of the Font Bureau says in the article "Type On The Web," found in a book named Websights: The future of business and design, "You have control of print and no control of the Web. In fact, there is no typography on the Web at all. There is only type." This is an important distinction. Print is a "control" medium where all aspects of the printed word, from font choice to line length, are controlled by the designer in order to make the words on the page legible and understandable. In the Web paradigm, this simply does not exist. HTML is a markup language, and CSS is more a presentation tool than a design tool. Typographic nuances don't exist on the Web. There is only type. Don't believe me? Design an entire Dreamweaver MX 2004 page using only Optima or Garamond and see what happens in the browser of a viewer who doesn't own those fonts. Does that occur in the magazine you're holding in your hands?

Thus you have to change your thinking and look at the text on the Web page as being either words or art. Once you make that distinction a whole world of design possibilities opens. Those possibilities will become real when you discover the serious type tools Macromedia Studio MX 2004 has put in your hands.

The tools are FreeHand MX, Fireworks MX 2004, Dreamweaver MX 2004, and Flash MX 2004. Your tool choice will depend upon what you need to do. If the text is words, Dreamweaver and Flash will fit the bill. If the text is art, FreeHand MX, Flash, and Fireworks will satisfy that need.

In this article I demonstrate three examples that allow you to take many of the typographic techniques used by our print brethren and apply them to the Web.

Typographic Logo
The first project is the creation of a typographic logo using two intertwined letters. This logo, based on an idea from Dmitry Kirsanov, will sit over a gradient background, and the direction of the gradient will follow the slope of the italic letters. The plan is to use the "t" in my first name and the "g" in my last name.

To accomplish this, my tool choices are essentially made for me: FreeHand MX or Fireworks MX 2004. Fonts use vectors, and both applications permit me to convert the lettering used to vectors. This allows me to subsequently move the design into a Web page without concerning myself with whether the font chosen is resident on the user's machine.

In this example I use FreeHand MX to create the artwork. Though the art can just as easily be created in Fireworks MX 2004, I prefer to do much of my type work in FreeHand MX. I find that the typographic tools included with the application permit me a finer degree of control over such things as kerning, tracking, and leading than the sliders used in Fireworks MX 2004. I'll also convert the letters to their postscript outlines, and I prefer to use a vector tool for that task.

My font choice is a modern classic from the Old Style school - Adobe Garamond. Old Style lettering, especially the italic, tends to have a calligraphic look, and Adobe Garamond, drawn by Roger Slimbach, is a faithful reproduction of the original drawn by Claude Garamond in the 1500s.

In this project I use AGaramond Italic. This is important because fonts are traditionally drawn as a collection known as a family. Each member of the family is designed to stand on its own or work together with the other members of the family. For instance the italic I am using is not simply a slanted version of the Roman, and the bold is not just a thick version of the Roman. As you can see in Image I, the various fonts in the AGaramond family are quite distinct from each other. For example, in addition to looking completely different from each other, the major differences between the Roman and italic versions of the font are in the shape of the ear, the decorative handle at the top of each letter shown. In the Roman version the ear is rectangular; in the italic it has been rounded and lengthened. The other major difference is the loop at the bottom of the letter, which wraps around the hole, or counter, in the letter. Note how the loop and the counter change shape in each version of the letter shown. These nuances of type, which have been around for more than 500 years, are usually overlooked by Web designers and have contributed to the state of the typographic art on the Web today.

 

(Though the Web is littered with sites promoting fonts, discussing typography, and even teaching it, one of the best is http://counterspace.motivo.com/. This Flash-based site gives a great overview of the nuances and history of typography.)

I start by opening FreeHand and adding three layers to the document, named "Gradient," "T," and "G." I then lock the T and the G layers.

I also want to add the colors I use in my site to the FreeHand MX color palette. To do this I select Window>Swatches to open the Swatches panel. One of the great secrets of FreeHand MX is that it contains a palette of Web-safe colors. To open it, click the Swatch tab, click on the Panel Options menu in the Assets panel, and select Web Safe Color Library at the bottom of the list. This library is a bit different from what you may be used to. Instead of the traditional cubes and swatches used by the Macromedia MX products, this library treats the Web colors like a swatch book. What I particularly like about it is that the colors chosen are shown as Hexadecimal and RGB color. I entered the hex values for my colors - #333300, #666633, and #999966 - and they were added to the Swatch list for the document (see Image II).

 

Having prepared the work space, I get right to work. I select the T layer and lock the Gradient and G layers. Locking layers is a good habit to develop in FreeHand; if you select an object on the FreeHand page and select a layer, the selected object automatically moves to the selected layer. Not a good thing.

I then select the type tool, click once on the page, and enter a lowercase "t". The new FreeHand MX Object panel immediately changes to the Text properties. I select AGaramondItalic from the font list, set the point size to 200 points, and set the fill color of the letter to #333300 by clicking the Fill icon in the Object palette and selecting the color from the list. Another neat technique is to select the text object, drag the swatch from the Swatches panel, and drop it onto the selected object. I then lock the T layer, unlock the G layer, and add a 200-point AGaramondItalic lowercase "g" filled with #999966. I lock this layer.

To create the gradient in the background, I unlock the Gradient layer, select the Rectangle tool, and draw a rectangle behind the letters. This results in a solid-color rectangle filled with whatever background color is shown at the bottom of the toolbar. If the rectangle has a stroke, remove it by selecting the Stroke Color chip in the toolbar and clicking the "No Stroke" icon.

To apply the gradient, I select the rectangle and click once on the Fill icon in the Object panel. When the Object properties open, I click the Fill strip in Properties to open the Fill properties panel. I then click on and hold the Basic Fill button to open a drop-down menu of available fill options. Select Gradient to open the Gradient Fill panel - the rectangle fills with a black-to-white gradient. This is easily fixed. I select the #999966 color chip on my Swatches panel and drag and drop it onto the black chip in the Gradient Fill panel. I then replace the white chip with #333300 and my gradient is complete. The final step is to get the gradient to follow the angle of the italic text.

This step is where, as I tell my students, we separate the pros from the rest of the dreck out there. The gradient angle will approximate that of the stem in the letter "t." With a gradient as fine as the one chosen, I use the dark end of the gradient to set the gradient angle.

If the rectangle is selected there will be two handles joined by a dotted line running across the rectangle. The circular handle establishes the start of the gradient and the square one establishes the end and the angle of the gradient. I drag the round handle upward to a point just below the upper-left corner of the rectangle. I then drag the square handle to about the midpoint of the "g." I can now distinguish the vertical divide between the light and dark areas of the gradient. From there it's a simple matter of moving the square handle up and down to have the dark vertical match the angle of the stem. Once that's accomplished I move the square handle in and out to see how the lettering contrasts with the gradient. Once finished, I click on the page to deselect the rectangle and then lock the Gradient layer (see Image III).

 

As it currently stands the image is somewhat complete. What I don't have is the "t" and the "g" intertwined. The "g" is simply sitting in front of the "t". The plan is to have the "g" cover the cross stroke of the "t" and to have the serif of the "t" cross through the bowl of the "g".

First I unlock the T layer, select it, and select Duplicate from the Layer drop-down menu. This places a copy of the lowercase "t" in front of the "g". I then lock the T layer and select the "t" on the page. Next I select Text>Convert To Paths (Command-Shift-P if you use a Mac or Control-Shift-P if you use a PC). This converts the letter to art by using the postscript outline for the letter in the AgaramondItalic font.

I then select the Subselect tool in the FreeHand toolbox. I click on each point above the serif and press the Delete key (see Image IV). When I finish I have exactly the effect I'm looking for (see Image V).

 

 

Having completed the design, getting it onto the Web is not terribly difficult. There are a number of options available:

  1. Save the image as a .jpg image for use in Fireworks MX 2004 or Dreamweaver MX 2004.
  2. Save the objects as Symbols in FreeHand and export those Symbols into Flash MX 2004 or Fireworks MX 2004 for subsequent manipulation or animation.
  3. Animate the lettering in FreeHand MX (use Release to Layers) and output a .swf file for use in Flash MX or Dreamweaver MX. All this does is to convert the page to a Flash .swf file with an accompanying HTML document.
  4. Build a page around the image and select File>Publish as HTML.
Typographic Treatment of a Page
The next example, based on one from my book Building Web Sites with Macromedia Studio MX, addresses a question I have whenever I hit a page that has a Shockwave or Flash detector on the page. The text is usually set in whatever Web fonts happen to be hanging around the browser. The question is, why? If you have the space, why not use it for typographic treatment of the page?

The page uses two fonts: Helvetica Inserat for the branding and Albertus MT for the body copy. I have always liked Helvetica Inserat because it is a powerful font that should be used sparingly. In fact, "Inserat" is German for advertising; when released by the Stempel Foundry in 1966 its primary use was for ads, billboards, and newspaper headlines. Albertus is another display type that should be used sparingly on a page. This font was released by the Monotype Foundry in the 1930s and its first iteration was for use as a titling font. In 1940 a lowercase alphabet was added. I like Albertus because it isn't overpowered by Helvetica Inserat and for its sharp serifs. I find it to be elegant, aesthetically pleasing, and a good companion font to the Inserat.

In creating the "sniffer" page I open Fireworks MX 2004, set the background color to the mid-green I use on my site - #663333 - and set the page dimensions to 600 pixels wide by 400 pixels deep. Page size is immaterial at this stage of the process. The plan is to use the new Fit Page button on the Property Inspector to trim the canvas when I am finished.

The first step is to select the Branding text and set it in 60-point Helvetica Inserat, center align the text, and fill it with the red I use in my site's logo: #660000. The result, shown in Image VI, is okay but not what I want. I want the two lines closer to each other, and the words on the second line need to be spaced out a bit more.

 

The words are placed, formatted, and colored in Fireworks MX 2004 but still need some work.

I select both lines and reduce the leading between them in the Fireworks MX 2004 Property Inspector to 85%. This brings the second line up closer to the first one and avoids having the ascenders in the "t" and the "h" touching the letters in the line above (called a crash). The next step is to select the bottom line and to set the range kerning slider to a value of 7. This increases the spacing between the letters of "ontheweb". The line above it, being in uppercase letters, looks a bit more spaced out, which makes the line under it appear to have lettering that is squeezed together. The "th" and "we" letter pairs are still too close to each other, so I click once between the letters and add 3% kerning. The before and after results are shown in Image VII.

 

To complete the design, I use a variety of techniques to draw the user's eye to the important parts. For example, I use negative leading values to pull lines together and positive values to push them apart. I make the point size of the important lines larger than that of less important ones, and use the space bar to move them around on the page to avoid the straight lines you see when text is set as Flush Left. I also set the site's name in Albertus MT IT, track the letters out a bit more than the rest of the text, and give it the same color as the head to establish the relationship between the two elements.

With the element completed I can use the Fireworks MX 2004 slicing tool to slice it up for placement in Dreamweaver MX 2004.

Image VIII shows a Fireworks-produced typographic treatment of a "Flash Sniffer" page.

 

New to Fireworks MX 2004 is a beefed-up anti-aliasing feature. Macromedia kept its existing four options (None, Crisp, Strong, and Smooth) but added "System" (Quartz if you are on a Mac) and "Custom" to its anti-aliasing lineup.

Here's a brief description of what each anti-aliasing option, available through the Property Inspector, does:

  • No Anti-Alias: Disables text smoothing
  • Crisp Anti-Alias: Creates a sharp transition between the edges of the text and the background
  • Strong Anti-Alias: Creates a very abrupt transition between the edges of the text and the background, preserving the shapes of the text characters and enhancing detailed areas of the characters
  • Smooth Anti-Alias: Creates a soft transition between the edges of the text and the background
  • System Anti-Alias: Uses the text smoothing method provided by Windows XP or Mac OS X
  • Custom Anti-Alias: Opens a dialog box with the following input areas:
    - Oversampling determines the amount of detail used for creating the transition between the text edges and the background.
    - Sharpness determines the smoothness of the transition between the text edges and the background.
    - Strength determines how much the text edges blend into the background.
Image IX shows the various anti-aliasing options applied to a 200-point Albertus MT "a" on a Macintosh.

 

Alternative States
The final example shows how the type tools in FreeHand MX can be used to create a rather interesting effect in Flash MX 2004. This example is inspired by the movie Altered States. The title of the movie uses the font Avant Garde Demi, letters that are tightly kerned, and a rather interesting use of the uppercase A. The plan is to create the lettering for the word "ALTERNATIVES" in FreeHand MX and then use the word, as it was used in the movie's title, as the mask for an animation.

Image X shows the final Flash movie using the title created in FreeHand MX.

 
  1. Open FreeHand MX, select the text tool, click once on the page, and enter the word "ALTERNATIVES".
  2. When the Object Properties open (Window>Object), set the font to Avant Garde Demi and the point size to 90 points. If you don't have the font being used, feel free to use a Bold Helvetica, Arial, or Avant Garde (see Image XI).

     

  3. The next step is to create the stylized "A". Select the first "A" in the word and cut it. Lock the layer the word is in and select the background layer.
  4. Paste the "A" on the clipboard in the background layer. Add a new layer, select the magnifying glass, and zoom in on the letter in the background layer. The original title created stylized "A"s by removing the right stem of the "A" and placing the letter form up against the stem of the next letter. The interesting aspect of this design is that the letterform remains intact because the human eye will still see the "A".
  5. Select the pen tool and trace the letter without the right stem. When finished, the shape should resemble the one shown in Image XII.

     

    The parts of the letter needed for the title are drawn over a copy of the letter in the background layer.

  6. Unlock the letters layer. Select the text tool and delete each "A" in the word. Click once in the location of the second "A" and press the space bar. This will leave a space for the object. Drag the A-piece to the start of the word. Line up the top of the shape with the top of the "L". Use your arrow keys to move the shape closer or further away from the "L".
  7. Select the "LTERN TIVES" letters and set the tracking value to about -3%. This will reduce the spacing between the letters.
  8. Select the A piece, press the Option/Alt key, and drag a copy of the object into the space between the "N" and the "T". The object should overlap the "T". For now just ensure that the tops of the "T" and the object are aligned.
  9. Click once between the "N" and the object. Add a value of about 13% to the kerning area of the Object Inspector. If the space between the object and the "T" is too large, click between the object and the "T" and enter a small, negative kerning value such as -3. Finally, click on the text block and select Text> Convert to Paths.
  10. Select everything, group it, and convert it to symbol in the library. (If you have a Brushes folder in the library, feel free to delete it. The folder isn't needed in Flash.) Save the image and quit FreeHand MX. The title as shown in Image XIII is complete and ready for placement into Flash MX 2004.
 

Before I complete the piece in Flash, I should explain why I use FreeHand MX and not Flash MX 2004 for the typesetting. The decision essentially comes down to one of control. The kerning feature of FreeHand MX has its roots in print and is, therefore, a bit more precise than its counterpart on the Flash MX 2004 Property Inspector. I also find tracing to be easier to accomplish in FreeHand than in Flash.

By converting the letters to paths, I avoid a potential font substitution issue if the font is not available to whoever does the Flash work. I also plan to use the words as a mask in Flash. This would require me to vectorize the text in Flash, meaning the text would eventually be converted to paths. Whether it is done in Flash or FreeHand MX is immaterial.

One final point before I move on. The choice of font really is a non-issue because Flash embeds fonts into the .swf when the movie is compiled. This essentially frees you from "Font Substitution Hell" if you use a font the user doesn't have on his or her machine. Still, treat this one judiciously as well. An embedded font adds weight to the file and all embedded text is anti-aliased, especially at the larger point sizes. In the case of our title, I use only 10 characters from the font. It seems silly to embed the font into a .swf if I'm using only a small percentage of the character set. Thus, the other reason for converting the text to paths.

  1. Open a new Flash MX 2004 movie. Set the stage to 85 high by 550 wide. When the stage appears in the screen select File>Import> Import to Library.
  2. When the import dialog box opens, navigate to the FreeHand MX file just created , select it, and click the "Import to Library" button. You will now see a FreeHand Import dialog box. Click OK. If you open the Library Panel you will see that the symbol from FreeHand MX is in the library.

    One of the quirks of Flash MX is using text or other artwork as a mask. Unlike Fireworks MX 2004 and other vector apps, you can't simply select an object and denote it as being a mask. It must be broken apart in Flash MX 2004.

  3. Double-click the symbol in the Flash MX 2004 library. Select the object and keep pressing Control-B (PC) or Command-B (Mac) until the object looks pixelated.
  4. Return to the main timeline and import an image into the library or create some sort of wild, color-filled graphic symbol.
  5. Add a new layer to the timeline. Name the bottom layer "Image" and the top layer "Alternatives".
  6. Drag the image symbol into the "Image" layer. Drag the FreeHand symbol into the "Alternatives" layer. Add a key frame at Frames 30 and 60 of the "Image" layer.
  7. Select frame 60 of the "Alternatives" layer, right click the mouse (Control-Click …Mac) and select Add frame from the Context drop-down menu.
  8. Place the mouse over the name of the "Alternatives" layer and right click. Select "mask" from the Context menu. The image in the "image" layer will appear as the fill for the words created in FreeHand MX. Image XIV shows the final Flash movie including timeline, masks, and library items.
 

Conclusion
In this article I have just scratched the surface of the possibilities available to you. As I said in my New Riders book, Building Web Sites with Macromedia Studio MX: "typographic art is a powerful communications vehicle. The choice of font, layout, and effect can instantly communicate a mood or message that is far more powerful than a series of photos or images."

Text is simply more than the grey stuff that goes around the pictures and animations on a Web page, and Macromedia Studio MX offers you a full set of tools that range from the rudimentary (Dreamweaver MX 2004) to sophisticated (FreeHand MX).

For example, if your reference size for text is 12 points and line height is set to 2 ems, that is the same as setting the leading to 24 points. In essence you have added double spacing between your lines of text.

That "Em" Thing
When my students and I get talking about CSS the question that is inevitably raised is: How big is an em? The answer, on the surface, may appear to be a bit facetious because the real answer is, "As big as you make it."

Type is traditionally measured in two directions. If the measurement is vertical, the industry uses points and picas. Horizontal measurements are used for spacing between letters. That horizontal spacing is measured in ems and the em value is a moving target. One em equals the type size. In the exercise in this article I use 60-point type. Thus, one em equals 60 points. If I were to change it to 48-point type, the em would also change to 48 points. Thus an em is proportionately the same in any point size regardless of the font chosen.

By adding 7% range kerning between the letters, I was, in very simplistic terms, adding a further 4.2 points of space to the sides of the letters selected.

It gets a bit weirder when, in Fireworks MX 2004, you select a few words in a sentence with the intention of adding a bit of space between the letters and the words. This is called "range tracking" in Fireworks MX 2004.

Traditional typesetting divides a line of text into units - usually a percentage of the em value. Fireworks MX 2004 comes at this from a different angle. The unit used is a pixel. Thus a 72-point letter will be divided into 72 units. Applying a range kerning value of 10% would, again in very simplistic terms, spread out the letters and the spaces between the words by 7.2 pixels. This is a double-edged sword. It’s great because the value is consistent. It’s bad because an inch on my computer monitor may be different from an inch on yours.

In CSS ems are also used and, in many respects, are the only constant type value available to you. In Dreamweaver MX 2004 ems are used for:

  • Font size
  • All positioning values
  • Line height
  • Border width
  • Horizontal position
  • Word spacing
  • Vertical position
  • Letter spacing
  • All Box values except
    for Float and clear
  • Text indent
  • All are determined by the point size used for the default font set by the browser. If it is 12-point Times, then an em is 12 points. The problem is points. They aren’t used on the Web. Pixels are used instead. If you do assign a value in CSS use percentages. This removes a potential IE bug and allows the browser to scale the font size in Internet Explorer (PC). Just remember that the em value set will ripple through the entire design and could have a profound effect on page layout.

    For example, if your reference size for text is 12 points and line height is set to 2 ems, that is the same as setting the leading to 24 points. In essence you have added double spacing between your lines of text.

    More Stories By Tom Green

    Tom Green describes himself as 'teacher, author, chief cook and bottle washer.' He is an instructor at Humber College's School of Media Studies in Toronto, and is also the author of 'Building Web Sites with Macromedia Studio MX' and 'Building Dynamic Web Sites with Macromedia Studio MX 2004,' both published by New Riders.

    Comments (0)

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


    @ThingsExpo Stories
    SYS-CON Events announced today that Enroute Lab will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enroute Lab is an industrial design, research and development company of unmanned robotic vehicle system. For more information, please visit http://elab.co.jp/.
    SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
    SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
    There is huge complexity in implementing a successful digital business that requires efficient on-premise and cloud back-end infrastructure, IT and Internet of Things (IoT) data, analytics, Machine Learning, Artificial Intelligence (AI) and Digital Applications. In the data center alone, there are physical and virtual infrastructures, multiple operating systems, multiple applications and new and emerging business and technological paradigms such as cloud computing and XaaS. And then there are pe...
    SYS-CON Events announced today that Interface Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Interface Corporation is a company developing, manufacturing and marketing high quality and wide variety of industrial computers and interface modules such as PCIs and PCI express. For more information, visit http://www.i...
    SYS-CON Events announced today that Keisoku Research Consultant Co. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Keisoku Research Consultant, Co. offers research and consulting in a wide range of civil engineering-related fields from information construction to preservation of cultural properties. For more information, vi...
    SYS-CON Events announced today that SIGMA Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. uLaser flow inspection device from the Japanese top share to Global Standard! Then, make the best use of data to flip to next page. For more information, visit http://www.sigma-k.co.jp/en/.
    SYS-CON Events announced today that B2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. B2Cloud specializes in IoT devices for preventive and predictive maintenance in any kind of equipment retrieving data like Energy consumption, working time, temperature, humidity, pressure, etc.
    Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
    While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
    SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp em...
    SYS-CON Events announced today that Nihon Micron will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nihon Micron Co., Ltd. strives for technological innovation to establish high-density, high-precision processing technology for providing printed circuit board and metal mount RFID tags used for communication devices. For more inf...
    SYS-CON Events announced today that Suzuki Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Suzuki Inc. is a semiconductor-related business, including sales of consuming parts, parts repair, and maintenance for semiconductor manufacturing machines, etc. It is also a health care business providing experimental research for...
    SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...
    SYS-CON Events announced today that Daiya Industry will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Daiya Industry specializes in orthotic support systems and assistive devices with pneumatic artificial muscles in order to contribute to an extended healthy life expectancy. For more information, please visit https://www.daiyak...
    In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
    SYS-CON Events announced today that mruby Forum will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. mruby is the lightweight implementation of the Ruby language. We introduce mruby and the mruby IoT framework that enhances development productivity. For more information, visit http://forum.mruby.org/.
    SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
    Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
    Mobile device usage has increased exponentially during the past several years, as consumers rely on handhelds for everything from news and weather to banking and purchases. What can we expect in the next few years? The way in which we interact with our devices will fundamentally change, as businesses leverage Artificial Intelligence. We already see this taking shape as businesses leverage AI for cost savings and customer responsiveness. This trend will continue, as AI is used for more sophistica...