Arif Erzin Bloğu-Kendime Notlar

İçerikler özgün değildir. Sadece sık sık lazım olan işime yarayacak olan notları almış olduğum kişisel bloğumdur.

html5 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
html5 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Mart 2014 Perşembe

Bootstrap grid sistemi

Hiç yorum yok : Gönderen arif erzin zaman: 00:15 Etiketler: , ,
With the 3rd version of the great Bootstrap out for about 4 and a half months now, people have had their time to play around with it, learn the changes, find new features, and build amazing things.

 The Difference

The most interesting change for me was the difference in the grid system. Bootstrap 2 catered to two different browser sizes (desktop and then mobile). With Bootstrap 3, you now build with mobile in mind first, and the grid system lets you create different grid systems based on browser size.

Bootstrap 2

The grid you create works on desktops and then stacks on top of each other when browser size is below 767px. This is limited since you can only define 1 grid on desktop sized browsers. You are left with a stacked grid on mobile devices.

Bootstrap 3

The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.
For example, let’s say you want a site that has:
  • 1 column on extra small devices
  • 2 columns on small AND medium devices
  • 4 columns on large devices
Since the grid system now cascades up from mobile devices, this is how this code will look.

<div class="row">
 <div class="col-sm-6 col-lg-3">
  This is part of our grid.
 </div>
 <div class="col-sm-6 col-lg-3">
  This is part of our grid.
 </div>
 <div class="col-sm-6 col-lg-3">
  This is part of our grid.
 </div> 
 <div class="col-sm-6 col-lg-3">
  This is part of our grid.
 </div> 
</div>
We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.
We’ll explain the different grid sizes and how you create them and then show examples.

 The Grid Sizes

This is the best part about the new grid system. You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.
.col-xs-$Extra SmallPhones Less than 768px
.col-sm-$Small DevicesTablets 768px and Up
.col-md-$Medium DevicesDesktops 992px and Up
.col-lg-$Large DevicesLarge Desktops 1200px and Up
The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.

Responsive Utilities

Just like Bootstrap 2, Bootstrap 3 provides responsive utilities for hiding and showing elements based on the browser size. This will also help us in defining our grid system.
  • .visible-xs
  • .visible-sm
  • .visible-md
  • .visible-lg
  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg
This helps because we are able to show certain elements based on size. In our examples today, we’ll be showing an extra sidebar on large desktops.

 Examples

Here are a few examples of the grids that you can create. We’ll go through some basic sites that some people might want and show how easy it is to build that site with the Bootstrap 3 grid.
Resize your browser’s width to see the different grids in action.

Simple: Large Desktop vs Mobile

Let’s say you wanted a site to have 1 column on extra small (phone) and small (tablet) devices, 2 columns on medium (medium desktop) devices, and 4 columns on large (desktop) devices.
Large Devices!
Large Devices!
Large Devices!
Large Devices!
Here is the code for that example:

<div class="row">
 <div class="col-md-6 col-lg-3">
  <div class="visible-lg text-success">Large Devices!</div>
  <div class="visible-md text-warning">Medium Devices!</div>
  <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
 </div>
 <div class="col-md-6 col-lg-3">
  <div class="visible-lg text-success">Large Devices!</div>
  <div class="visible-md text-warning">Medium Devices!</div>
  <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
 </div>
 <div class="col-md-6 col-lg-3">
  <div class="visible-lg text-success">Large Devices!</div>
  <div class="visible-md text-warning">Medium Devices!</div>
  <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
 </div> 
 <div class="col-md-6 col-lg-3">
  <div class="visible-lg text-success">Large Devices!</div>
  <div class="visible-md text-warning">Medium Devices!</div>
  <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
 </div> 
</div>

Intermediate: Show Extra Column on Large Desktops

This is an interesting example and one that the new grid excels at. Let’s say you have a site that has a sidebar and a main content section. For extra small devices, you want one column, main content with the sidebar stacked below it. For small and medium devices, we want sidebar and main content to sit side by side. Now for large devices, we want to utilize the space on larger devices. We want to add an extra sidebar to show more content.
I am the main content.
I am the main sidebar.
I am the secondary sidebar that only shows up on LARGE devices.
We change the size of the main content to span 6 columns on large devices to make room for our second sidebar. This is a great way to utilize the space on larger desktops. And here is the code for that example.

<div class="row">
 <div class="col-sm-9 col-lg-6 text-danger">
  I am the main content.
 </div>
 <div class="col-sm-3 text-warning">
  I am the main sidebar.
 </div>
 <div class="col-lg-3 visible-lg text-success">
  I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>

Advanced: Different Grid For Every Size

This will be a more complex example. Let’s say that at no point in our grid system do we want all of our columns to stack. For extra small devices, we want 2 columns. For small devices, we want 3 columns. For medium devices, we want 4 columns. For large devices, we want 6 columns (one that only shows on large devices).
You get the drill now. Let’s just straight into the example and code.
I’m content!
I’m content!
I’m content!
I’m content!
I’m content!
I’m content only visible on large devices!

<div class="row">
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  I'm content!
 </div>
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  I'm content!
 </div>
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  I'm content!
 </div>
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  I'm content!
 </div>
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
  I'm content!
 </div>
 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
  I'm content only visible on large devices!
 </div>
</div>
You can see that as the browser size gets smaller, the columns start to form. Also, the content inside each will begin stacking.

 It’s Gridtastic!

You can see how easily it is to build complex and dynamic sites with the Bootstrap 3 grid. From mobile 2 column sites to complex hiding and showing elements on large desktops, you can build any type of site. Hopefully these examples will give you an idea of the flexibility of the new grid system and all the great things you can create.
Read More

8 Şubat 2014 Cumartesi

Camera and Video Control with HTML5

Hiç yorum yok : Gönderen arif erzin zaman: 05:28 Etiketler: ,

Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API, providing developers access to the user's camera.  Let me show you how to get simple camera access from within your browser!
View Demo

The HTML

Please read my note about the HTML structure below:
<!--
 Ideally these elements aren't created until it's confirmed that the 
 client supports video/camera, but for the sake of illustrating the 
 elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
Each of these elements should be created once confirmation of camera support is confirmed, but for the sake of this tutorial, I wanted to show you what the elements look like with basic HTML.  Do note that the dimensions we're working with are 640x480.

The JavaScript

Since the HTML elements above are already created, the JavaScript portion will look smaller than you think:
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
 // Grab elements, create settings, etc.
 var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d"),
  video = document.getElementById("video"),
  videoObj = { "video": true },
  errBack = function(error) {
   console.log("Video capture error: ", error.code); 
  };

 // Put video listeners into place
 if(navigator.getUserMedia) { // Standard
  navigator.getUserMedia(videoObj, function(stream) {
   video.src = stream;
   video.play();
  }, errBack);
 } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
  navigator.webkitGetUserMedia(videoObj, function(stream){
   video.src = window.webkitURL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
 else if(navigator.mozGetUserMedia) { // Firefox-prefixed
  navigator.mozGetUserMedia(videoObj, function(stream){
   video.src = window.URL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
}, false);
Once it's been established that the browser supports getUserMedia, a simple method sets the video element's src to the user's live camera/webcam.  Calling the play method of the video then enacts the element's live video connection.  That's all that's required to connect your camera to the browser!
Taking a photo is only marginally more difficult.  Simply add a click listener to a generic button and and draw an image from video!
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
 context.drawImage(video, 0, 0, 640, 480);
});
Of course you could add some sexy image filters and make a billion dollars...but I'll save that for another post.  At minimum you could convert the canvas snapshot to an image though!  I'll talk about canvas image filters in the future...
View Demo
Being able to access the camera within the browser without using third party software is an incredible advancement.  Paired with canvas and a bit of JavaScript, the camera has become quickly and easily accessible.  Not only it the camera accessible, but since canvas is ultra-flexible, we'll be able to add sexy Instagram-style image filters in the future.  For now, however, simply accessing the camera in our browser moves us miles ahead.  Have fun taking images within your browser!
Post inspired by I see you getUserMedia; provided a great starting point for this post.
Read More
Kaydol: Kayıtlar ( Atom )

Popular Posts