<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" style="task" id="overview-ui" xml:lang="oc">
  <info>
    <link type="guide" xref="index" group="ui"/>
    <revision version="0.1" date="2013-06-19" status="stub"/>

    <credit type="author copyright">
      <name>Michael Hill</name>
      <email its:translate="no">mdhillca@gmail.com</email>
      <years>2013</years>
    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Standard user interface elements, rendering, and animation.</desc>
  </info>

<title>User interface &amp; graphics</title>

<list>
 <item>
  <p><em style="strong">Use a single toolkit for all the standard widgets in your application</em></p>
 </item>
 <item>
  <p><em style="strong">Create fast, visually rich graphical interfaces</em></p>
 </item>
 <item>
  <p><em style="strong">Have high quality, antialiased and resolution-independent graphics</em></p>
 </item>
 <item>
  <p><em style="strong">Easily add web functionality to your application</em></p>
 </item>
 <item>
  <p><em style="strong">Access built-in assistive technologies</em></p>
 </item>
</list>

<p>Use the powerful foundations of the GNOME platform to create consistent and
flexible user interfaces. Make your applications available to the widest
audience by deploying them to other platforms. Standard UI elements are
accessible by default, and it is easy to add accessibility support to any
custom UI elements that you create.</p>

<section id="what">
 <title>What can you do?</title>

  <p>For applications with <em style="strong">standard controls</em> which
  would be familiar to most users, use
  <em style="strong"><link xref="tech-gtk">GTK</link></em>. Every application
  that is part of GNOME uses GTK, so use it to be consistent, and to access
  the many widgets and features such as printing support and CSS theming.</p>

  <p><em style="strong">Animations, effects and fluid
  layouts</em> are easy with
  <em style="strong"><link xref="tech-clutter">Clutter</link></em>, and it also
  supports touch input and gestures.</p>

  <p><em style="strong">High quality, antialiased and resolution-independent 2D
  graphics</em> are provided by
  <em style="strong"><link xref="tech-cairo">Cairo</link></em>. Cairo is used
  for drawing widgets in GTK, and can also be used to output to PDF and
  SVG.</p>

  <p><em style="strong"><link xref="tech-webkit">WebKitGTK</link></em> makes
  it easy to add <em style="strong">web functionality</em> to your
  application, whether that is rendering an HTML file or having a complete
  HTML5 UI.</p>

  <p>GTK, Clutter and WebKitGTK have <em style="strong">built-in support for
  assistive technologies</em> with
  <em style="strong"><link xref="tech-atk">ATK</link></em>. Use Orca, Caribou
  OSK, and the GTK built-in accessibility tools, or build custom tools on top
  of ATK.</p>

</section>

<!-- TODO Link to code examples.
<section id="samples">
 <title>Code samples</title>
 <list>
  <item><p>A sample we should write</p></item>
  <item><p><link xref="samples">More…</link></p></item>
 </list>
</section>
-->

<section id="realworld">
 <title>Real-world examples</title>

  <p>You can see lots of real-world applications of GNOME UI technologies in
  open source projects, like the examples given below.</p>
  <list>
  <item>
    <p><em style="strong">Web</em> is the GNOME browser, which uses GTK and
    WebKitGTK, and is fully accessible.</p>
    <p>( <link href="https://wiki.gnome.org/Apps/Web">Website</link> | <link href="https://gitlab.gnome.org/GNOME/epiphany/">Source code</link> )</p>
  </item>
  <item>
    <p><em style="strong">MonoDevelop</em> is a cross-platform IDE designed
    for C# and other .NET languages. It works on Linux, Mac OS X and
    Windows</p>
    <p>( <link href="https://www.monodevelop.com/">Website</link> | <link href="https://www.monodevelop.com/screenshots/">Screenshots</link> | <link href="https://github.com/mono/monodevelop">Source code</link> )</p>
  </item>
  <item>
    <p><em style="strong">Videos</em> is the GNOME multimedia player, and uses Clutter to display video content.</p>
    <p>( <link href="https://wiki.gnome.org/Apps/Videos">Website</link> | <link href="https://gitlab.gnome.org/GNOME/totem/">Source code</link> )</p>
  </item>
 </list>
</section>
</page>
