發表文章

目前顯示的是 2016的文章

React Native + Firebae Email SignIn

圖片
使用 React Native + Firebase 製作 Email 登入模組 上一篇我們製作了註冊模組.這邊教你繼續製作登入模組 使用firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)來呼叫
使用範例如下
import React, {Component} from 'react'; import {   View,   Text,   TextInput,   TouchableOpacity } from 'react-native';
import css from '../css'; import * as firebase from 'firebase' import Config from '../firebase'; export default class Signin extends Component {   constructor(props) {     super(props);     this.state = {       email: '',       password: ''     }   }   signin() {     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(() => {       alert('登入成功')     }).catch((error) => {       var errorCode = error.code;       var errorMessage = error.message;       alert('登入失敗' + errorCode + errorMessage)     })   }   render() {     return(       <View style={css.container}>        <View>         <…

React Native + Firebase Email SignUp

圖片
使用 React Native + Firebase 製作 Email 註冊模組
學習前

1:請安裝好 native react 開發環境,
2:使用新版 firebase


假設 Firebase 與 Native react已備妥~

一. 開啟 firebase進入Authentication > 登入方式 > 啟用 電子郵件與密碼
這部分需開啟才能使用email做註冊與登入溝通協定

二.在你的native安裝firebaseAppledeMacBook:Apple$ npm install firebase

三.在你的專案引用firebaseAppledeMacBook:Apple$ import * as firebase from 'firebase'四.開始製作註冊模組(signup.js)
import React, {Component} from 'react'; import { View, Text, TextInput, TouchableOpacity } from 'react-native'; import css from '../css'; import * as firebase from 'firebase'; const config = { apiKey: "", authDomain: "", databaseURL: "", storageBucket: "", firebase.initializeApp(config); export default class Signup extends Component { constructor(props) { super(props); this.state = { email: '', password: '' }; }   signup() {     firebase.auth().createUserWithEmailAndPassword(this.state.…

製作符合SEO的html版

網路上有很多SEO方法以及教學.
根據一直以來學習和開發的經驗.
今天阿傑就來談談怎樣製作一個比較符合SEO的頁面
製作前我們先來了解,結構的正確使用方法對SEO有多重要
SEO與內容的關聯性 1.合理使用meta標籤是關鍵 相信很多人在製作SEO時常常會塞入很多關鍵字(多到有點像垃圾).
早期就是把很多關鍵字都放在meta keywords裡面~
阿傑也是如此了好多年~@@..
html5發佈後,也沒有移除meta keywords這標籤,
導致現在很多網站一樣會在meta 裡面 塞入好多資訊..

但對於搜尋引擎龍頭Google來說,他們是否認有使用這個標籤的= =...
Google does not use the keywords meta tag in web ranking 那這些年..我們的meta keywords都是寫心酸,寫給自己(和客戶)看爽的!!!!

沒關係,竟然meta keywords沒被google 收錄~但又沒有被html5移除(為何不統一..是要弄死誰).
那我們就換個方式使用h1~h3標籤來當成keywords.

也就是在<head>裡面我們可以放一組meta keywords來說明網站的簡單方向.
以阿傑通通學為例:
<meta content='SEO教學,Jquery教學,html5教學,CSS3教學,Python教學,Django教學' name='keywords'/> 但真正呈現內容合理性的標籤會是body的h1~h3

關鍵字要怎麼用架構去呈現? 對於越來越聰明的搜尋引擎來說,這是你必須要知道的知識. 2.善用h1,h2,h3標籤 對搜尋引擎而言,內容的完整度絕對佔了最大的因素, 顧名思義,你的內容若完全符合引擎抓的關鍵字(包含內容合理性,內容完整度,內容無過多非相關內容), 搭配我們餵給引擎的關鍵標籤, 就更容易讓標題與內容的合理結構得到加分~ h1~h6標籤其實非常有爭議性..
若依照google SEO龍頭 Matt Cuttsh標籤整理 來看.
真的只會讓人越來越不懂到底該怎樣定義h標籤

若依照google blogger標準版型來看的話~ <html> <head> ....... <title>阿傑通通學<…

animation Header教學(Jquery+CSS3)

AJframe-教你使用Jquery+CSS3快速製作animation Header
現階段市面上的網站,都開始重視UI/UX的優化.

很常看到header隨著scroll出現變化.

這邊阿傑就要教你,如何快速的製作一個動態的header

為何要CSS3+Jquery?
其實製作方法很多,沒有正確的標準,

純Jquery和純CSS3都能達到一樣的目的.

效能方面這邊就不贅述.我們只談論實現功能

使用CSS3屬性transition
這是一個CSS3的屬性,是一個製作簡單動畫不可或缺的屬性.實際說明可以參考W3Cschool

html code-->> <header>AJframe</header>css code-->> header { background:#333; color:#fff; height:77px; transition: all 1s ease; }
這邊我們說明標籤header要吃我的樣式,樣式分別有以下規則

1:背景色為色票#333

2:文字顏色為#fff

3:高度為77px

4:所有過度效果以1秒的時間,和緩的執行.

是不是很好理解呢~

使用Jquery來觸發事件
上面我們給了標籤一些屬性規則,再來就把要觸發規則的判斷交給Jquery吧!

引用我們Jquery on scroll 事件文中的元件:

onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 50) { $('header').css('height','60px') } else { $('header').css('height','77px') }
當我們捲軸滾動了50px的高度時,header的高度變成60px,

否則就變成77px.

是不是簡單了解?

其實現在執行就已經有效果了,但因為瀏覽器的捲軸以及沒有內容稱高所以很難看出已經實現的效果

我們試著把code改成這樣…

超過字數出現.....符號(CSS3)

AJframe-超過字數出現.....符號,搭配RWD應用常常遇到前端樣板寫得美美的,但套了後端以後,有時候資料過多,會讓你美美的版變得很可怕><
這邊就來說說怎樣快速優化這些UI
text-overflow是關鍵當我們給他屬性text-overflow: ellipsis;就會告知瀏覽器..這元件只要超過指定範圍就給他........
以本站為例..可以符合RWD又可以出現.....代碼如下
h2 { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; width:100%;} text-overflow: ellipsis; 超過我給的範圍就出現.....
white-space:nowrap; 指定該文本不換行
overflow:hidden; 超過指定範圍就隱藏
width:100%; 因為使用bootstrap grid system,元件沒有給他固定寬xxxpx 而是隨著框架100%顯示
沒了!!就是這麼簡單~

Jquery gotop 教學

AJframe-gotop 快速實現 常常在閱讀內容很多的文章時,看著看著要回到頂端去卻找不到按鈕!
這是很不好的使用者體驗喔~
這邊就來教你簡單製作一個返回頂端的作法
$("要控制的物件").click(function(){ $("html,body").animate({ scrollTop:0 },1000); }); 當我們點擊要控制的物件時,就會以1秒的動態速度返回html,body 高度0的定點
是不是很好理解呢?
搭配Jquery on scroll 事件就能做出很多好玩的衍生效果喔!
例如我們把要控制的物件一開始的display設定為none
當我們滾動200高度時才會和緩的出現.
這簡單的練習,就交給你自己吧~

Jquery on scroll 事件

AJframe-簡單執行on scroll 滑鼠滾動事件常常在閱覽網站時發現當我們執行滾動後,會出現一些漂亮的事件~
這邊就來教你怎樣做這樣的判斷~
首先我們引用Jquery
<script language="JavaScript" type="text/javascript" src="js/jquery-1.12.2.js"></script>接下來我們可以寫入以下的案例來演示
onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 50) { do something// } else { do something// } 這邊我們使用了scrollTop來做動作,宣告了在這function裡面,scrollTop去依據元素body的scrollTop 來做動作.
如果捲軸滾動大於 50px,去執行 if 裡面的事件
否則就執行 else裡的事件
alert試試看onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 50) { alert('on'); } else { do something// } 執行看看,當我們捲動超過50px 高度時,是不是就彈出一個視窗顯示on了呢?
再加點效果試試onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 50) { $('p').hide(); } else { …

開始寫Django模組

AJframe-教你開始寫Django模組
Django最大的優點除了可以使用系統內建模組以外.
還可以很方便的自己寫模組!!!
以AJframe架構為例,來說明如何建立簡單的模組應用
打開你的models.py此路徑在你新增的app底下,忘記了嗎?開始Django專案
然後引用timezone和User 模組
from django.db import models from django.utils import timezone #引用了django 的時區 from django.contrib.auth.models import User #引用了django的 User 接下來在下面建立模組代碼如下
class Article(models.Model): #宣告 Article為一個模組要被寫入資料庫 author = models.ForeignKey(User) #獲取user的選項 title = models.CharField(max_length=20)#宣告title是一個限制字元為20的輸入框 text = models.TextField() #宣告text 為一個文字輸入框 created_date = models.DateTimeField(default=timezone.now) #宣告產生時間為現在時間 published_date = models.DateTimeField(blank=True, null=True) #宣告發佈時間為空值,讓你自己選 def publish(self): # 這就像是一個function,告訴系統當我們點選發佈時間後可獲得現在的時間.儲存送出獲取的時間值 self.published_date = timezone.now() self.save() def __unicode__(self): #然後以unicode返回title的值.. return self.title 把建立的模組引用到admin管理介面剛剛建立好模組以後,必須有個出口作為媒介.
此時打開blog/admin.py:
from blog.models import Article #引用我們新增的Articl…

開始你的Django專案

AJframe-開始你的Django專案開始專案前,請先確認你已完成 安裝Django, 並且已經啟動了虛擬環境
此時我們的終端機路徑顯示為:
(VENV) AppledeMBP:AJframe Apple$
輸入以下代碼開啟一個專案
django-admin.py startproject yoursite 資料結構如下: AJframe |-manage.py |-__init__.py |-settings.py |-urls.py |-wsgi.py 其中manage.py 為 python 的腳本執行檔,之後會有很多部分需要使用 (python manage.py xxx)
settings.py為網站為網站配置檔
urls.py為路徑設定檔
建立你的APP(VENV) AppledeMBP:AJframe Apple$python manage.py startapp blog(app名稱請自取) 記得設定你的APP打開AJframe/settings.py 找到:
INSTALLED_APPS = [ .............. 'blog', (把剛剛新增的blog app 安裝進來) ] 設定資料庫打開AJframe/settings.py ,我們可以看到基本資料庫設定已經設定完成:
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } } 每次在建立模組,或有變更需要寫入資料庫時我們可以執行以下指令:
django-1.6.x版: python manage.py syncdb django-1.9.x版: python manage.py makemigrations python manage.py migrate 相關指令我們可以輸入 python manage -h 做查詢 啟動你的專案當你要測試專案有沒有運作時,可以輸入:
python manage.py runserver 正確執行時我們可以看到如下的…

快速安裝Django(Mac)

AJframe-教你快速完成Django安裝Mac使用環境下,系統會自帶Python-2.7.10,開發使用者建議不要升級至python3~
python2為目前mac 系統下最穩定開發版本
查詢版本可以在終端機下輸入:

輸入 sudo python 得到 Python 2.7.10 (v2.7.10:15c95b7d81dc, May 23 2015, 09:33:12) 得知目前系統的Python版本為2.7.10
安裝前先設定虛擬環境虛擬環境(virtualenv),可以幫助我們將Django獨立成一個專案型態,在某個專案下做任何開發與修改,都不會與其他專案相抵觸!!強烈建議你設定.

當然,這步驟非必需,你也可以跳過去(看個人的需求來制定)首先,我們先建立一個專案名為AJframe(名稱請自己取)

1.開啟終端機,出現 AppledeMBP:~ Apple$ ,實際路徑就是Macintosh HD > 使用者 > Apple(使用者名稱)

2.輸入以下指令新增一個專案資料夾

mkdir AJframe cd AJframe (進入指定資料夾) 進入後開始安裝虛擬環境:

sudo easy_install virtualenv sudo 是以管理者身份執行安裝,輸入密碼後即開始安裝..

安裝完成後會在資料夾內看到一個虛擬環境VENV

AppledeMBP:~ Apple$ AJframe > VENV

執行啟動虛擬環境

source VENV/bin/activate 啟動成功後(VENV)會常駐出現在前面

(VENV) AppledeMBP:AJframe Apple$ (表示已經啟動虛擬環境)

PIP 安裝Djangopip install django (安裝最新版本) 當然你也可以指定版本安裝 pip install django==1.x.x (填入你要安裝的版本號) 以上步驟及正確安裝好 Django!



Enjoy~



開始你的第一個Django專案吧 >>