<commit_before>---
title: Search
layout: component
---

<blockquote class="text-justify">Search components are constantly present in computational systems. Generally providing an interface for text-based inputs, their main purpose is to help users finding files, programs and other resources in an easier way.</blockquote>

<div class="row">
  <div class="col-sm-6">
  
  	<h3>Typical Appearance</h3>

	<blockquote class="text-justify">Search components have their style changed from one system to another, but, in a general way, its main idea remains the same. As we 	can see in the images below, the search bars are basically composed by a space where users can enter a text-based input and a button they can click to initiate the search:</blockquote>
	
  
  	<div id="search-bars-examples" class="carousel slide" data-ride="carousel">
  	<!-- Indicators -->
 	 <ol class="carousel-indicators">
	    <li data-target="#search-bars-examples" data-slide-to="0" class="active"></li>
	    <li data-target="#search-bars-examples" data-slide-to="1"></li>
	    <li data-target="#search-bars-examples" data-slide-to="2"></li>
	    <li data-target="#search-bars-examples" data-slide-to="3"></li>
	    <li data-target="#search-bars-examples" data-slide-to="4"></li>
	  </ol>
	
	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img src="search-bar-1.jpg" class="img-responsive" alt="search-bar-1">
	      <div class="carousel-caption">
	      	<p>Example 1</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-2.jpg" class="img-responsive" alt="search-bar-2">
	      <div class="carousel-caption">
	      	<p>Example 2</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-3.jpg" class="img-responsive" alt="search-bar-3">
	      <div class="carousel-caption">
	      	<p>Example 3</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-4.jpg" class="img-responsive" alt="search-bar-4">
	      <div class="carousel-caption">
	      	<p>Example 4</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-5.jpg" class="img-responsive" alt="search-bar-5">
	      <div class="carousel-caption">
	      	<p>Example 5</p>
	      </div>
	    </div>
	    
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#search-bars-examples" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#search-bars-examples" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
	
	<h3>Purpose</h3>
         
         <blockquote class="text-justify">Search components allow users to quickly find a value in a large collection and also (depending on the search engine) create a filter to facilitate the search and make it more precise.</blockquote>
	
	<h3>Typical Behavior</h3>

	<blockquote class="text-justify">Basically, search components receive an input (the text-based input mentioned before), the user presses the search button (generally identified by the picture of a magnifying glass or by the word "search") and then, the results of the research are shown.</blockquote>
	
	<h4>Component in Action</h4>

	<blockquote>
  	<img src="search-bar-gif-1.gif" class="img-responsive" alt="search-bar-gif-1">
	<p class="text-center">Example extracted from <em><a href="http://thiagonasc.com/page/2">http://thiagonasc.com/page/2</a></em></p>
	</blockquote>
	
	  
  </div>
 </div>
 
 <h3>Platform-Specific Instances</h3>

<blockquote>
  <p class="text-justify">This is where platform-specific sections go. The systems presented below are the OS X from Apple and Windows 8 from Microsoft.</p>

</blockquote>

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title text-center">OS X</h3>        
      </div>
      <div class="panel-body">
      
         <h4>General Idea</h4>
         <blockquote class="text-justify">A search bar provides an interface for text-based searches with a text box and buttons such as search and cancel. A search bar accepts text from users, which can be used as input for a search.</blockquote>
      
         <img src="search-bar-apple-osx.png"  class="img-responsive" alt="search-bar-apple-website"></img>
         <p class="text-center"><em>OS X Search Bar</em></p>

	<blockquote class="text-justify">According to the Apple's Guidelines, a search bar can display optional elements, such as these:

         <ul>
              <li><p><b><em>Placeholder text:</em></b> The text showed in the element should state the function of the control (for example, 'Search' as shown above) or remind users in what context they are searching (for example, 'Google') so they can execute their search in a more accurate way.</p></li>
              <li><p><b><em>The Bookmarks button:</em></b> This button can provide a shortcut to information users want to easily find again. For example, the Bookmarks button in the Maps search mode gives access to bookmarked locations, recent searches, and contacts.</p></li></blockquote>
              
              <img src="search-bar-apple-osx-2.png"  class="img-responsive" alt="search-bar-apple-website-2"></img>
              <p class="text-center"><em>Example of the Bookmark button</em></p>
              
              <blockquote class="text-justify"><li><p><b><em>The Clear button:</em></b> Most search bars include a Clear button which allows users to clear the contents in the text space in a single step. The button shows up when the user enters an input and hides when there is no text in the text field.</p></li></blockquote>
              
              <img src="search-bar-apple-osx-3.png"  class="img-responsive" alt="search-bar-apple-website-3"></img>
              <p class="text-center"><em>Example of the Clear button</em></p>
              
               <blockquote class="text-justify"><li><p><b><em>The results list icon:</em></b> This icon indicates the presence of results from a search done by the user. When users tap the results list icon, an application can display the results of their most recent search.</p></li></blockquote>
               
               <img src="search-bar-apple-osx-4.png"  class="img-responsive" alt="search-bar-apple-website-4"></img>
               <p class="text-center"><em>Example of the results list icon</em></p>
               
         </ul>
         </blockquote>
      
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title text-center">Windows 8</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div><commit_msg>Start adding the credits and references.<commit_after>---
title: Search
layout: component
---

<blockquote class="text-justify">Search components are constantly present in computational systems. Generally providing an interface for text-based inputs, their main purpose is to help users finding files, programs and other resources in an easier way.</blockquote>

<div class="row">
  <div class="col-sm-6">
  
  	<h3>Typical Appearance</h3>

	<blockquote class="text-justify">Search components have their style changed from one system to another, but, in a general way, its main idea remains the same. As we 	can see in the images below, the search bars are basically composed by a space where users can enter a text-based input and a button they can click to initiate the search:</blockquote>
	
  
  	<div id="search-bars-examples" class="carousel slide" data-ride="carousel">
  	<!-- Indicators -->
 	 <ol class="carousel-indicators">
	    <li data-target="#search-bars-examples" data-slide-to="0" class="active"></li>
	    <li data-target="#search-bars-examples" data-slide-to="1"></li>
	    <li data-target="#search-bars-examples" data-slide-to="2"></li>
	    <li data-target="#search-bars-examples" data-slide-to="3"></li>
	    <li data-target="#search-bars-examples" data-slide-to="4"></li>
	  </ol>
	
	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img src="search-bar-1.jpg" class="img-responsive" alt="search-bar-1">
	      <div class="carousel-caption">
	      	<p>Example 1</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-2.jpg" class="img-responsive" alt="search-bar-2">
	      <div class="carousel-caption">
	      	<p>Example 2</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-3.jpg" class="img-responsive" alt="search-bar-3">
	      <div class="carousel-caption">
	      	<p>Example 3</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-4.jpg" class="img-responsive" alt="search-bar-4">
	      <div class="carousel-caption">
	      	<p>Example 4</p>
	      </div>
	    </div>
	    
	    <div class="item">
	      <img src="search-bar-5.jpg" class="img-responsive" alt="search-bar-5">
	      <div class="carousel-caption">
	      	<p>Example 5</p>
	      </div>
	    </div>
	    
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#search-bars-examples" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#search-bars-examples" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
	
	<h3>Purpose</h3>
         
         <blockquote class="text-justify">Search components allow users to quickly find a value in a large collection and also (depending on the search engine) create a filter to facilitate the search and make it more precise.</blockquote>
	
	<h3>Typical Behavior</h3>

	<blockquote class="text-justify">Basically, search components receive an input (the text-based input mentioned before), the user presses the search button (generally identified by the picture of a magnifying glass or by the word "search") and then, the results of the research are shown.</blockquote>
	
	<h4>Component in Action</h4>

	<blockquote>
  	<img src="search-bar-gif-1.gif" class="img-responsive" alt="search-bar-gif-1">
	<p class="text-center">Example extracted from <em><a href="http://thiagonasc.com/page/2">http://thiagonasc.com/page/2</a></em></p>
	</blockquote>
	
	  
  </div>
 </div>
 
 <h3>Platform-Specific Instances</h3>

<blockquote>
  <p class="text-justify">This is where platform-specific sections go. The systems presented below are the OS X from Apple and Windows 8 from Microsoft.</p>

</blockquote>

<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title text-center">OS X</h3>        
      </div>
      <div class="panel-body">
      
         <h4>General Idea</h4>
         <blockquote class="text-justify">A search bar provides an interface for text-based searches with a text box and buttons such as search and cancel. A search bar accepts text from users, which can be used as input for a search.</blockquote>
      
         <img src="search-bar-apple-osx.png"  class="img-responsive" alt="search-bar-apple-website"></img>
         <p class="text-center"><em>OS X Search Bar</em></p>

	<blockquote class="text-justify">According to the Apple's Guidelines, a search bar can display optional elements, such as these:

         <ul>
              <li><p><b><em>Placeholder text:</em></b> The text showed in the element should state the function of the control (for example, 'Search' as shown above) or remind users in what context they are searching (for example, 'Google') so they can execute their search in a more accurate way.</p></li>
              <li><p><b><em>The Bookmarks button:</em></b> This button can provide a shortcut to information users want to easily find again. For example, the Bookmarks button in the Maps search mode gives access to bookmarked locations, recent searches, and contacts.</p></li></blockquote>
              
              <img src="search-bar-apple-osx-2.png"  class="img-responsive" alt="search-bar-apple-website-2"></img>
              <p class="text-center"><em>Example of the Bookmark button</em></p>
              
              <blockquote class="text-justify"><li><p><b><em>The Clear button:</em></b> Most search bars include a Clear button which allows users to clear the contents in the text space in a single step. The button shows up when the user enters an input and hides when there is no text in the text field.</p></li></blockquote>
              
              <img src="search-bar-apple-osx-3.png"  class="img-responsive" alt="search-bar-apple-website-3"></img>
              <p class="text-center"><em>Example of the Clear button</em></p>
              
               <blockquote class="text-justify"><li><p><b><em>The results list icon:</em></b> This icon indicates the presence of results from a search done by the user. When users tap the results list icon, an application can display the results of their most recent search.</p></li></blockquote>
               
               <img src="search-bar-apple-osx-4.png"  class="img-responsive" alt="search-bar-apple-website-4"></img>
               <p class="text-center"><em>Example of the results list icon</em></p>
               
         </ul>
         </blockquote>
      
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title text-center">Windows 8</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

<h3>Credits &amp; References</h3>

<blockquote>
<p>Search bar images: http://www.webdesigndev.com/20-amaaazing-psd-search-boxes/</p>
<p>Search bar animation: http://thiagonasc.com/page/2</p>
</blockquote>
{'fraction_non_alphanumeric': 0.14826741337066854, 'fraction_numerical': 0.0074903745187259365, 'mean_word_length': 3.032176121930567, 'pattern_counts': {'":': 0, '<': 395, '<?xml version=': 0, '>': 395, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7129402', 'n_tokens_mistral': 4524, 'n_tokens_neox': 4253, 'n_words': 1299}