블로그 이미지
안녕하세요~ iolate(a.k.a. isho) 의 블로그 입니다~! iolate

카테고리

분류 전체보기 (182)
끄적끄적 (6)
Server, Cloud (10)
Linux, Ubuntu (29)
개발개발 (46)
Mac, iOS (41)
Embedded (20)
NAS (1)
Web (5)
Network (3)
Review (12)
기타 (9)
비공개글 (0)
Total696,266
Today127
Yesterday313

MediaWiki URL 설정

Web / 2015.07.30 03:26

별로 추천하지 않는 방법이라곤 했지만.. 깔끔하게 하고 싶어서 이렇게 했었다.

/w/ 으로 변경하긴 했지만...


하위 디렉토리 없게 (http://aaa.bbb.ccc/대문)

/.htaccess

/wiki/~~~~


.htaccess


wiki/LocalSettings.php



Posted by iolate

댓글을 달아 주세요

얼마전에 쓴(그리고 수정한)

Permanently Redirect (301)

글 이 후 상황.


안내 페이지를 서버가 아닌 웹호스팅에다 올려놨는데,

목, 금 8시 쯤 트래픽 경고 문자가 왔다..


초저가라 트래픽이 일 600MB 라지만 이때까지 한번도 이런 적이 없었고,

이럴 일도 없던 터라 원인은 당연히 블로그 이전 안내페이지.


하지만 정상적인 접근이라면, 50KB 남짓한 메인페이지로 인한 트래픽이 500MB 씩이나 쌓일리가 없다.


cafe24 에서 제공하는 모니터링 툴로 간략히 봤더니 블로그 몇 개 주소를 중국 아이피 수십 개로 수천번의 hit 이 기록되어 있었다..


결국 tistory 리퍼러부터의 문제는 망할 중국넘들...


목욜 날엔 급한대로 상위 5개 아이피에 대해 index 페이지를 노출하지 않는 걸로 손봤지만

이내 다른 아이피가 천번 넘게 들어오더라...


결국 .htaccess 를 이용해서 중국아이피들을 통째로 막았다.

아이피 정보를 포함한 htaccess 파일은 http://www.ip2location.com/free/visitor-blocker

여기서 얻을 수 있음

기본값이 allow 로 나오므로 중국 선택 후 deny 로 바꿔서 내려받자.


호스팅 사에 중국(해외) 접근을 차단해 달라 할 수도 있겠지만,

저 호스팅을 블로그 안내페이지로만 쓰는건 아니므로  그건 좀 곤란하겠더라.;;ㅋㅋ


내 아이피도 차단시키고 확인해보니 403 Forbidden 이 나온다.

이제 좀 괜찮을려나....

Posted by iolate

댓글을 달아 주세요

Permanently Redirect (301)

Web / 2013.09.28 20:08

블로그 주소를 바꾸면서

기존 주소를 새 주소로 리다이렉트 시켜놨는데 리퍼러에 기존 주소가 계속 찍히는 문제가 있었다..



요련 식으로 말이지....


어떻게 해결하나 했는데 redirect 방식을 301 로 바꿔주면 된다고 함.


기존에는 apache2 설정을 통해서


<VirtualHost *:80>

        ServerName blog.ghj.kr

        Redirect / http://blog.iolate.kr/

</VirtualHost>


요런 식으로 해놨는데 이 경우 302가 기본값이고


<VirtualHost *:80>

        ServerName blog.ghj.kr

        Redirect 301 / http://blog.iolate.kr/

</VirtualHost>


이렇게 301 redirect 로 바꿔주면 된다.


302 는 임시고 301 은 영구적인 redirect 라나 뭐라나...

근데 301 대신 302 를 워낙 많이 써서 검색엔진에서도 302를 301로 인식하고 주소를 바꿔준다고 한다.

그때도 301, 302 에 대해 검색해보고 결론은 저대로 놔두면 된다 였는데 다시 검색하니 왜 다른건지 모르겠다.


php 에서는 이런 식으로 넘기면 된다고 함.

(근데 IE 6~8 에서 500 에러 난다. 쓰지 말자 ㅋ)

<?

  header (‘HTTP/1.1 301 Moved Permanently’);

  header (‘Location: newurl’);

?>



저 리퍼러들이 사라질지 아닐지는 좀 더 지켜봐야 겠지만.


안사라진다.. 젠장...


일단 사파리, 크롬 등 웹킷 기반에서는 리다이렉트시 전부 리퍼러를 없앤 채로 보내주는 것 같고

IE 도 6 제외하고는 리퍼러를 다 제거하고 리다이렉트 해주는 듯 하다.


리퍼러가 브라우저가 설정해서 보내주는 거라 브라우저를 많이 타는 것 같은데...

도대체 범인을 모르겠다... IE6 을 아직까지 쓰는 사람은 거의 없을테고.. 문제의 다른 브라우저가 있다는 건데...


여튼 좀 짜증나서 이전 안내페이지를 만들었다.

많이 엉성하지만, 나름 깔끔하고 괜찮다고 생각 중....ㅋㅋ


추가로 .htaccess 파일을


RewriteEngine On

RewriteRule . index.html [L]


이렇게 설정함으로써 주소 뒤에 어떤 문자열이 있든 index 페이지로 오게 해놨다.

참고로 apache2 의 redirect 를 사용하지 않은 이유는 혹시나 검색엔진이 이 안내페이지로 주소 이전한 걸로 오해할까봐...


뒷 문자열을 받아서 그대로 새 주소를 다시 보여주는 것도 가능하지만,

그렇게 하면 또 리퍼러 리스트에 옛날 주소가 잔뜩 쌓일 것 같아서 관뒀다..


이번에도 리퍼러가 엄청 쌓인다면 포기하고 뒷 문자열 붙여서 주소 만들어줄 생각..

+ 로그 저장해서 도대체 어디서, 어느 브라우저가 범인인지도 확인해 봐야겠다.


일단은 귀찮으니 생략ㅋ


원인은 중국..

뒷 이야기는 

특정 국가(중국!!) 차단하기

여기서 계속...

Posted by iolate
TAG 301, 302, REDIRECT

댓글을 달아 주세요

블로그 유입 경로를 확인하다가
모바일 웹페이지 만들기 검색어로 유입이 된 게 있길래 간단하게 써본다.
(아. 당연히 태그, 자바스크립트 등의 웹페이지를 만들기 위한 기본적인 언어와 필요에 따라서 css, php 언어 등도 알고 있겠지??)

모바일 페이지만들기. 간단하게는 단지 사이즈만 맞춰주면 되지만 인터페이스를 아이폰과 흡사하게 만들어 줄 수도 있다.
iui 란 웹앱용 UI를 사용하면 되는데, 예제 파일이나 사용방법 등은 안에 예시 파일이나 검색으로 찾아보시길..
iui : http://code.google.com/p/iui/

사파리를 받아서 설정에서 개발자 용으로 전환하면 메뉴에 개발자 탭이 생기고 User-Agent (웹에서 사용자의 OS, 브라우저 구분할때 사용할 수 있습니다.) 를 아이폰이나 아이패드로 바꿀 수 있다.
아이폰 용으로 만든 싸이트 자체가 사파리나 크롬 외에서는 제대로 안돌아가니 사파리로 테스트 하고 필요에 따라 User-Agent 를 바꿔 테스트 하면 좋다.

또한 인코딩 문제가 자주 발생하므로 헤더에 인코딩 옵션을 지정해주는 메타태그를 꼭 넣어주자!
<meta http-equiv="content-type" content="text/html; charset=utf-8">  (UTF-8 을 사용할 경우.)

2009 년에 마지막으로 업데이트 됬다고 나오는데 그래서 그런지 iOS 특정 버젼에서는 몇가지 기능들이 조금 깨지는 것도 있는 듯...

능력이 된다면 알아서 css파일 수정해서 사용하도록! ㅎㅎ 



그리고 아마 쉽게 찾을수 있지 싶은데.. 

<link rel='apple-touch-icon' href='./img/icon.png'/>
 -> 홈화면에 추가를 눌렀을 때 나올 아이콘 설정 가능. 
<meta name="apple-mobile-web-app-capable" content="yes">
 -> 홈화면에 추가를 한 후 실행하였을때 주소표시줄, 아래 탭을 없애준다. 
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/> 
  -> 아이폰에 맞게 화면 설정. scale 값을 조정함으로써 확대,축소 가 가능하게 할 수도 있음.

모두 헤더에 넣어주면 된다. 이외에도 상태바 색을 지정한다던가(홈화면으로 추가시에 적용) 몇가지 더 있다.

그리고 홈화면에 추가를 통해 실행하였는지 확인은
자바스크립트에서 window.navigator.standalone 값을 확인하면 된다. 


아 가장 기본적인 것 하나를 또 빼먹었군,
PC 인지, 모바일 기기(아이폰, 아이패드 등등) 인지 확인은 php 에서
$_SERVER['HTTP_USER_AGENT'] 값을 확인하면 된다. (물론 자바스크립트를 비롯한 다른 언어에서도 가능하다.)
strrpos 함수를 사용하여 iPod, iPad 등의 문자열이 있는지만 확인해도 충분!

도움이 되었기를 바라며,,,, 
Posted by iolate

댓글을 달아 주세요

네이버 블로그 -> 티스토리 퍼가기를 몰라 엮인글로 가져옵니다..

원본은 : http://blog.naver.com/monblank/140120351380


1. 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 난감한 요소지요.


국내에서 보통 모바일 웹사이트 제작은 해상도를 고려하기 보다는

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.




국내 출시된 주요 모바일 기기 해상도


iPhone

320 * 480

iPhone4

960 * 640

모토로이 해상도

854 * 480

HTC 디자이어(넥서스원)

800 * 480

옵티머스Q

800 * 480

갤럭시A

800 * 480

갤럭시S

800 * 480

시리우스

800 * 480

베가

800 * 480




이러한 가로 길이 가변폭의 레이아웃은 기획, 개발, 디자인 모든 영역에서 함께 고려가 되어야 합니다.

기획적인 측면에서도 가로사이즈가 가변이고 사용자마다 조금씩 차이가 있다는 UX 인지하여야 하고

디자인적으로도 가변폭에 유의하여 요소들을 배치하여야 합니다.

개발에서도 가변적으로 변하게끔 코딩에 신경써줘야겠죠? ^^




2. 사용자를 편하게, 터치 오류를 줄여라


사용자가 터치하는 영역은 44px*44px 기준으로 하세요.

손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.

너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만

다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면

원하는 것을 터치하지 못할 확률이 높아집니다.




3. 화면 확대비율 고정


<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />


meta태그는 화면 확대비율을 기기 사이즈 가로에 맞게 조정합니다.

viewport 가장 적용되는 것은 아이폰이고 기기마다 조금씩 차이가 있습니다.


body {
    -webkit-text-size-adjust: none;
}

그리고 css webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 조절합니다.

상황에 맞게 사용하세요.




4. 사이트 아이콘 제공


아이폰3g, 아이폰3gs
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />

아이패드
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />

아이폰4
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />


아이폰에서는 웹사이트 바로가기 아이콘은 홈화면에 넣을 있습니다.

이때 홈화면 아이콘으로 저장될 아이콘을 만들어둘 있습니다.





5. css3 활용하여 절감


css3 잘만 활용하면 그라디언트 효과나, 그림자 효과, 라운드코너 효과를 만들어낼수 있습니다.

이로 인해서 불필요한 이미지를 사용하지 않아도 되어 로딩속도의 절감효과를 있습니다.

css3 활용해보세요.

물론 css3 미지원되는 모바일기기가 많으니 이점도 염두해주세요!



6. javascript 최소화


모바일 웹으로 얼마나 멋진 사이트를 만들기에 그렇게 많은 자바스크립트 코드가 필요한가요?

여러분들도 알고 있는 훌륭한 자바스크립트 프레임워크인 jquery 역시

모바일기기에서는 부담스러울수도 있습니다.

자바스크립트 프레임워크를 사용하면 물론 생산성 향상에 도움이 되겠지만

사실 모바일 웹페이지는 그렇게 많은 자바스크립트 액션을 필요로 하지 않습니다.

javascript 사용을 최소로 줄이고 순수한 DOM 조작으로 사이트를 만들어봅시다!



7. over 이벤트는 소용이 없습니다.


터치폰은 마우스커서를 조작하는 것이 아니기 때문에

우리가 흔히 데스크탑을 통해 인터넷을 사용할때 이용가능한

:hover 선택자나

onmouseover 같은 이벤트를 사용할수 없습니다.

이점 알아두세요.



8. 페이지내에 다른 스크롤바는 넣을 없어요.


우리는 작은 공간에 많은 콘텐츠를 꾹꾹 넣고자합니다.

일반 환경에서는 overflow:auto; 또는 overflow:scroll 값을 사용하여

특정 영역에 많은 콘텐츠를 넣고 스크롤바를 넣을 있지만

모바일 웹환경에서는 페이지 내에 다른 스크롤바 넣기가 불가능합니다.



전혀 안되는 것은 아닙니다.

모바일네이버의 실시간검색을 살펴보면

자바스크립트로 스크롤바 비스무레한 것이 구현되어 있습니다.

그런데 개인적인 소견으로는 사실 모바일 웹페이지 안에 스크롤바를 넣는다는 것이

그닥 좋은 UX라고 생각하지는 않습니다.

스크롤바라는 것이 스크롤이 되는 형태의 UX 굳어진 것이고

터치폰에서도 화면을 위아래로 쓸어내리거나 올리는 행위로 스크롤을 한다라는 의미가 담겨있는 UX인데

화면에 있는 스크롤바는 터치로 스크롤되는 것도 아니고 단지 위아래 버튼으로

스크롤바를 조절하는 UX입니다.

차라리 그냥 적당 갯수만 보여주거나

새로고침버튼을 넣어서 해당부분만 ajax 변경을 하는것이 낫지 않았나 싶기도 하네요.




9. 일반 웹사이트로 가기에 대한 옵션을 제공하라.


우리는 모바일을 통해서 웹사이트를 이용할때 모바일용 웹페이지를 이용하고 싶지 않을때도 많습니다.

일반 웹페이지를 사용하는 경우말이죠.

그런데 몇몇 웹사이트는 사용자의 agent 가져와서

접속한 환경이 모바일기기면 무조건 모바일 페이지로 이동시키기도 하는데

일반 웹사이트를 이용하고자 하는 사용자도 있기 때문에

일반 웹사이트로 가기에 대한 옵션을 제공해주면 좋습니다.



10. 레티나 디스플레이


.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}


고해상도의 아이폰4 출시하면서 우리는 고해상도의 이미지를 제공하여

iphone4 사용자의 만족도를 극대화할수 있습니다.

Posted by iolate

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함