2016年12月25日 星期日

40 個設計師必備免費資源，超推懶人包

https://free.com.tw/40-resources-every-designer-should-know/?utm_content=buffer546ed&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
張貼者： 於 沒有留言:

google font

https://fonts.google.com/
張貼者： 於 沒有留言:

2016年12月22日 星期四

聊天機器人

Ref :  https://github.com/mpociot/botman
張貼者： 於 沒有留言:

2016年12月15日 星期四

UberEats in swift and python

Ref :  https://code4startup.com/projects/uber-app-for-food-with-python-django-and-swift
張貼者： 於 沒有留言:

php recognizition

Ref : https://www.phpclasses.org/package/2874-PHP-Recognize-text-objects-in-graphical-images.html#usage


include_once("config.php");
include_once("OCR.class.php");
//make new OCR object$char = new OCR();
//Recognition process, check images from filesecho "<hr/><img src='M.png'/><br/>";$res = $char->Recognition('M.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='M1.png'/><br/>";$res = $char->Recognition('M1.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='z11.png'/><br/>";$res = $char->Recognition('z11.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='z1.png'/><br/>";$res = $char->Recognition('z1.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='Z.png'/><br/>";$res = $char->Recognition('Z.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='B.png'/><br/>";$res = $char->Recognition('B.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='B1.png'/><br/>";$res = $char->Recognition('B1.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='W.png'/><br/>";$res = $char->Recognition('W.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='W1.png'/><br/>";$res = $char->Recognition('W1.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}


echo "<hr/><img src='W2.png'/><br/>";$res = $char->Recognition('W2.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

echo "<hr/><img src='plus1.png'/><br/>";$res = $char->Recognition('plus1.png');
if ($res!==false){
    echo "<b>".$res->getName()."</b>";
}else{
    echo "Not yet recognised.<br/>";
}

?> 
張貼者： 於 沒有留言:

360 度圖片

Ref :   https://www.minwt.com/webdesign-dev/js/13694.html

jQuery外掛-360度旋轉產品照片展示


以前相當流行利用Flash來製作360度的產品展示，讓使用者可以直接按住滑鼠，拖拉產品就可看到360度的產品照片，讓使用者可以在虛擬的頁面中，了解到實體產品的各角度的變化，但自從老賈開始打Flash後，現在Flash已消聲匿跡，因此目前比較好的作法，就是透過jQuery的方式來製作，而最近正好有朋友，想製作360度的產品展示功能，所以梅干就尋找了一下，發現到一款相當簡易且好用的360度產品展示的外掛，且套用還相當的簡單，因此有需要的朋友，也趕快來看看囉!

當要開始製作時，要先將360度的產品照片拍好。
梅問題－jQuery外掛-360度旋轉產品照片展示

Step1
首先，將css放到<head>....</head>間。
<link rel="stylesheet" type="text/css" href="css/pic360.css"/>
Step2
首先，將js放到到</body>前。
<script src="js/jquery-1.4.4.js"></script>
<script src="js/pic360-1.0.0.js"></script>
Step3
當要使用時，將div的類別名稱加入PIC360，接著把要360度的產品照，一一的加到ul li中。
<div class="PIC360">
　 <ul>
　　 <li><img width="700" height="466" src="images/01.jpg" /></li>
　　 <li><img width="700" height="466" src="images/02.jpg" /></li>
　　　.............
　 </ul>
</div>
Step4
當完成後，只要滑鼠游標，在區域內由左向右滑動時，產品照片就會跟著旋轉，而這邊梅干只是簡易拍攝，當要顯示跟細膩時，可用專用的拍攝器，以及張數愈多效果愈好，是不是很簡單呀!有需要的朋友，不妨也可參考看看囉!


http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/mwt-pic360.html



http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/css/pic360.css

==========================================================
@charset "utf-8";
/* 必须的样式 */
.PIC360{display:none;overflow:hidden;}
.PIC360 UL,.PIC360 LI{margin:0; padding:0;}
.PIC360 LI{list-style:none;}

/* 可以修改的样式 */
.PIC360{width:400px; margin:10px auto;border:5px solid #CECECE;}
============================================================================


http://ds.minwt.com.tw/file/sampleView/jQuery/pic360/js/pic360-1.0.0.js






============================================================================














/*
 * jQuery Pic360 Plugin
 * version: 1.0.0 (2011.5.22)
 * @requires jQuery v1.4.4 or later
 * @author Yongliang Wen
 * @email wenzongxian@gmail.com
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
;(function($) {
$.fn.pic360 = function() {
 var first_img = this.find('img:first');
 var all_img = this.find('img');
 var img_count = all_img.length;
 if(img_count==0) return;
 var img_width = first_img.width();
 var chg_width = parseInt(img_width/img_count);/* 感应区宽度*/
 var imgs_left = first_img.offset().left;
 this.toggle();
 all_img.toggle();
 first_img.toggle();
 this.width(img_width);/* 设置容器宽度 */
 this.height(first_img.height());/* 设置容器高度 */
 var mouseX = 0;
 var start = false;
 var step = 0;
 var curr_step = 0;/* 当前感应区 */
 var curr_img = 0;/* 当前图片 */
 this.mouseover(function(e){/*鼠标移到本DIV*/
  start = true;
  if(start){
   mouseX = e.screenX;
   /* 获取当前感应区 */
   curr_step=parseInt((mouseX-imgs_left)/chg_width);
   step = curr_step;
  }

 })
 this.mouseout(function(e){/*鼠标移出本DIV*/
  start = false;
 })
 this.mousemove(function(e){
  if(start){
   curr_step=parseInt((e.screenX-imgs_left)/chg_width);
   if(curr_step!=step){
    $(all_img[curr_img]).toggle();/* 隐藏当前图片 */
    if(curr_step>step){
     curr_img = curr_img+1;
     if(curr_img>=img_count) curr_img=0;
    }else{
     curr_img = curr_img-1;
     if(curr_img<0) curr_img=img_count-1;
    }    
    $(all_img[curr_img]).toggle();
    step=curr_step;
   }
  }
 })
};
})(jQuery);
/**
 * 初始化所有Pic360对象
 */
$(document).ready(function(){
 $('.PIC360').each(function(){$(this).pic360()})
})

//$('#console').append('curr_img'+curr_img+'&nbsp;step'+step+'&nbsp;curr_step'+curr_step+'<br/>');














I188



L0



LD0



In/a



Rank1.43M



Age!



l0



+10



whois



source



Rankn/a



Video Adv0



PIN0



IN0











Summary reportDiagnosisDensity00n/a


























============================================================================














































張貼者：



於





沒有留言:
  











































bootstrap nav













<nav class="navbar navbar-full navbar-dark " style="background-color: red" role="navigation">



  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#myBar" aria-controls="myBar" aria-expanded="false" aria-label="nav toggle">

    ☰

  </button>

  <div class="collapse navbar-toggleable-xs" id="myBar" >

    

  <ul class="nav navbar-nav pull-md-left">

    <li class="nav-item active">

      <a class="nav-link" hrzef="#">Home <span class="sr-only">(current)</span></a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Features</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">Pricing</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">About</a>

    </li>

  </ul>

  </div>

</nav>



<p class="alert alert-success  alert-dismissible hidden-sm-up"  role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet, <a href="#" class="alert-link">Link</a> consectetur adipiscing elit. Integer posuere erat a ante</p>

<div class="alert alert-danger  alert-dismissible "  role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet, <a href="#" class="alert-link">Link</a> consectetur adipiscing elit. Integer posuere erat a ante</div>

<div class="alert alert-info  alert-dismissible " role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>Lorem ipsum dolor sit amet consectetur adipiscing elit. Integer posuere erat a ante</div>

<div class="alert alert-warning alert-dismissible " role="alert">

  <button type="button" class="close" data-dismiss="alert" aria-label="close">x</button>

 

  Lorem ipsum dolor sit amet consectetur adipiscing elit. Integer posuere erat a ante</div>







=======================================================================









Navigation Bars



A navigation bar is a navigation header that is placed at the top of the page:







With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.



A standard navigation bar is created with <nav class="navbar navbar-default">.



The following example shows how to add a navigation bar to the top of the page:











Inverted Navigation Bar











Just change the .navbar-default class into .navbar-inverse:





Example









<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#">Page 1</a></li>

      <li><a href="#">Page 2</a></li>

      <li><a href="#">Page 3</a></li>

    </ul>

  </div>

</nav>







Navigation Bar With Dropdown







Navigation bars can also hold dropdown menus.







The following example adds a dropdown menu for the "Page 1" button:



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      



      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>




      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>







Right-Aligned Navigation Bar







The .navbar-right class is used to right-align navigation bar buttons.







In the following example we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons:







<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>







Navbar Buttons







To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button:









Example



<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#">Link</a></li>

      <li><a href="#">Link</a></li>

    </ul>

    <button class="btn btn-danger navbar-btn">Button</button>

  </div>

</nav>









Navbar Forms



























To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note that we have added a .form-group class to the div container holding the input. This adds proper padding if you have more than one inputs (you will learn more about this in the Forms chapter).







<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>







Fixed Navigation Bar



The navigation bar can also be fixed at the top or at the bottom of the page.



A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.



The .navbar-fixed-top class makes the navigation bar fixed at the top:









Example



<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#">Page 1</a></li>

      <li><a href="#">Page 2</a></li>

      <li><a href="#">Page 3</a></li>

    </ul>

  </div>

</nav>









The .navbar-fixed-bottom class makes the navigation bar stay at the bottom:









Example



<nav class="navbar navbar-inverse navbar-fixed-bottom">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#">Page 1</a></li>

      <li><a href="#">Page 2</a></li>

      <li><a href="#">Page 3</a></li>

    </ul>

  </div>

</nav>






































































張貼者：



於





沒有留言:
  


































        

      









訂閱：
文章 (Atom)