HTML5 및 CSS3의 잠재력 활용

HTML5와 CSS3의 출시는 혁신적인 도약에 지나지 않았지만이 기술이 제공하는 새로운 기능을 많이 사용하는 디자이너는 거의 없습니다. 부분적으로 이것은 HTML5와 CSS3의 모든 잠재력을 간과했기 때문에 코딩에서 약간의 차이만으로도 거의 동일한 사이트를 계속 개발하고 있습니다.

특별히 문제는 없지만 HTML5와 CSS3가 제공하는 많은 것들이 있습니다. 이전보다 더 놀라운 작품을 만들 수 있습니다.

캔버스를 무시하지 마십시오

캔버스 객체를 이해하는 것은 새로운 HTML5 코더가 수행하기 가장 어려운 작업 중 하나입니다. 특히 해당 코더가 이전에 다른 버전의 HTML로 코딩 중이고 컴퓨터 그래픽 프로그래밍에 대한 배경 지식이없는 경우에 특히 그렇습니다.

그리기를 거의하지 않더라도 캔버스 개체를 사용하는 법을 배우는 것은 모든 진지한 코더가 배우는 데 시간이 걸리는 소중한 기술입니다. 애니메이션 인포 그래픽, 슬라이드 쇼, 차트 (대화 형 차트 포함) 등을 포함한 모든 종류의 작업에 사용할 수 있습니다.

의례의 예의

캔버스를 사용하는 것은 단순히 HTML5로 객체를 만든 다음 JavaScript로 채우는 것입니다. 관련된 기술은 다른 날의 주제이지만,이 사이트에서 시작하는 데 도움이되는 자습서를 이미 찾을 수 있습니다.

더 이상 플래시가 필요하지 않습니다

이전에 Flash를 사용했던 대부분의 경우 Flash가 필요하지 않습니다. 이제 CSS3 전환, HTML5 드로잉, HTML5 애니메이션, HTML5 비디오 및 HTML5 오디오로 모든 작업을 수행 할 수 있습니다.

Flash에서 허용 한 HTML5에서하지 않은 유일한 작업은 사용자를 감시하고 개인 정보를 위반하는 것이지만, 어쨌든하고 싶은 것이 아닌가?

대부분의 사용자는 플래시가 매우 성가신 것으로 판명되었지만 필연적으로 필연적으로 필요로하는 플래시를 설치했습니다. 플래시와 관련된 심각한 보안 위험 및 개인 정보 보호 문제로 인해 대부분의 사용자가 전혀 설치하지 않거나 수행하려는 작업에 엄격하게 필요한 경우에만 사례별로 만 활성화 할 때까지 .

CSS3는 새로운 의사 클래스를 제공합니다

일부 의사 클래스는 CSS2에 있었지만 CSS3를 사용하면 중요한 위치 의사 클래스를 사용하여 더 많은 제어를 얻을 수 있습니다. 가상 클래스 이름이 나타내는 것처럼 주로 텍스트와 함께 사용됩니다. 앞, 뒤, 첫 글자, 첫 줄…

또한 텍스트를 포함한 모든 것을 수정하는 데 사용할 수있는 전환에 액세스 할 수 있습니다. 이러한 전환은 사용자가 화면에서 보는 것을 애니메이션으로 만들거나 변형시킵니다.

귀하의 웹 페이지는 GPU와 직접 통신 할 수 있습니다

모든 종류의 하드웨어 가속으로 인해 모바일 장치에서 배터리 수명이 소진 될 수 있으므로주의를 기울여야하지만 여전히 가능합니다.

GPU 가속은 전환, 3D 변환, 3D 모드의 캔버스 및 WebGL 3D를 사용할 때 작동합니다. 후자는 내가 가장 좋아하는 것이지만 WebGL과 관련된 모든 것을 파악하려면 많은 독서를해야합니다. 그러나 애니메이션과 게임을 만들 수있는 많은 범위를 제공합니다.

GPU 가속은 HTML5 및 CSS3를 지원하더라도 이전 브라우저에서는 작동하지 않습니다.

gif 의례

게임 엔진을 사용하여 3D 그래픽에서 어려운 작업을 수행하십시오.

게임 프로그래머는 게임 프로그래밍 작업을 단순화하기 위해 영원히 게임 엔진을 사용해 왔지만, 지난 5 년 동안 고품질 3D 게임을 만드는 작업에 견딜 수있는 진정한 HTMLXNUMX 게임 엔진이 등장했습니다. 브라우저 기반 환경.

시작하기 가장 간단한 방법 중 하나는 PlayCanvas이며 개인 라이센스로는 무료로 실험 할 수 있지만 실제로는 저렴하지 않습니다. 여기 급습PlayCanvas에서 만든 게임 :

 

그리고 이건 로보스톰:

이런 게임을 만들 수 있습니까? 물론 지금보다 훨씬 쉬워졌습니다.

복고풍 게임 제작 경험을 원한다면 구성2 or 구성3. 드래그 앤 드롭으로 게임을 만들기 시작하는 데 필요한 모든 것이 있습니다 (일부는 너무 제한적이라고 생각합니다). 온라인 게임을 만들고 사람들이 온라인 게임을합니다. 프로그래밍을 모르고 학습에 신경 쓰고 싶지 않은 사람들을위한 엔진입니다.

여기 키위 스토리Construct2에서 생성 된 구식 3D 플랫 포머 :

이러한 엔진을 사용한 게임에만 국한되지는 않습니다. 전체 영화 및 프리젠 테이션을 제작하려면 사용하는 것이 좋습니다 믹서기 or 마야특정 플랫폼 전용 게임의 경우 일반적으로 해당 플랫폼 전용 기본 프로그래밍 환경을 사용하는 것이 좋습니다. 크로스 플랫폼 대화 형 게임, 스토리 텔링, 교육 소프트웨어 또는 프리젠 테이션의 경우 HTML5 엔진은 훌륭한 옵션입니다.

HTML5 및 CSS3는 더 강력한 기능을 제공합니다

HTML5와 CSS3를 사용하면 원하는 방식으로 각 개체를 조작하는 기능을 비롯하여 페이지에 나타나는 모든 요소를 ​​완벽하게 제어 할 수 있습니다.

기본 구성 단위는 여전히 사각형이지만 웹 사이트는 더 이상 사각형 선형성을 따를 필요가 없습니다. 원하는 각도로 물건을 올려 놓거나 회전 시키거나 기울이거나 비틀거나 구부릴 수 있으며 웹 브라우저는 조금 불평하지 않습니다.

이제 불투명도 및 스케일링을 이전보다 훨씬 쉽게 제어 할 수 있으며이 기법은 모든 주요 브라우저에서 작동합니다.

2018 년 초 작성 시점을 기준으로, 다른 브라우저간에 스케일링하는 데 여전히 일부 문제가 있으며, 일부 브라우저는 정확하게 스케일링 할 수있는 반면 다른 브라우저는 동일한 페이지에 대해 매우 다른 결과를 제공합니다.

즉, 반응 형으로 스케일링을 사용하려는 경우 적어도 현재로서는 다른 버전의 사이트를 프로그래밍해야한다는 문제가 여전히 남아 있습니다.

다행히도 그럴 필요는 거의 없지만 화면 크기가 아무리 작아도 화면에 무언가를 맞추는 것이 가장 중요합니다. 이러한 경우 다른 브라우저에서 표준화 된 스케일링이 부족하면 문제가 남아 있습니다.

여전히 이러한 문제는 HTML5 또는 CSS3 문제가 아니며 HTML5 및 CSS3에서 제공하는 기능을 제대로 지원하지 못하는 브라우저 개발자의 문제입니다.

시간이 지남에 따라 브라우저에서 개선 사항이 나타나고 모든 것이 예상대로 작동합니다. 그때까지는 HTML6와 CSS4를 배우기 시작할 때가되었지만 적어도 올바른 방향으로 나아가는 단계입니다.

헤더 이미지 제공

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.