Digital Ocean Hackathon 응용 프로그램:초기 프로토타입
8055 단어 digitaloceandohackathonhackathon
앞에서 말한 바와 같이 우리는 다음과 같이 희망한다.
Note: I am not a designer, so many of the things in the sections below may be terrible for web design. Forgive me in advance.
영감.
이 프로그램은 '번역 프로그램' 이 될 것입니다. 한 언어 (영어) 로 일부 텍스트를 받아들여 다른 언어로 번역/인코딩할 것입니다. (이 예는 영어 줄임말입니다.)
따라서 우리는 번역/코딩 사이트를 참고할 것이다.나는 내 머리 위에서 세 가지를 생각할 수 있다.
URL 인코더의 디자인은 보기에는 약간 기본적이지만 실제로는 매우 실용적이다
이를 바탕으로 초기 요소 목록에 번역/인코딩에 사용할 텍스트 상자가 없습니다.
이 앱은 인코더에 더 가까운 디자인을 사용해야 할지도 모르지만, 저는 개인적으로 구글의 디자인을 좋아합니다. 구글은 큰 스크린에서는 수평이고 작은 스크린에서는 수직입니다.
구글의 디자인 반응은 민감하고 간결하다
이런 디자인은 번역가들에게 정말 편리하다. 왜냐하면 그들은 선택이 많지 않지만 옵션이 있는 인코더에게는 그렇게 좋은 효과가 없기 때문이다.덕온이는 선택이 많나요?가운데가 아니라 위에 올려도 돼요?
스케치/디자인
이 예에서 우리는 원형/시연을 만들 때 이 문제들에 대답할 것이다.나는 스케치를 그리기 시작했지만 너무 많이 고려하지 않았다.
이것은 초보적인 초도이다.
미안하지만, 감자의 질이 너무 떨어진다.😳
구글의 디자인을 바탕으로 큰 스크린의 번역 페이지처럼 보이고 작은 스크린의 인코더처럼 보이려는 것이다.
원형 설계
다음은
<body> 코드에 스케치의 다른 요소를 추가한 후의 모양입니다.<header>
<h1>Dwindle</h1>
</header>
<main>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Pellentesque habitant morbi tristique senectus et
netus. Vitae tempus quam pellentesque nec nam aliquam sem. Arcu dui vivamus arcu felis bibendum ut. Sit amet risus
nullam eget felis eget nunc.
</p>
<div class="form-control">
<textarea name="text"></textarea>
<button id="dwindle-button">Dwindle</button>
<textarea name="result"></textarea>
</div>
</div>
</main>
<footer>
2020 © Álvaro Montoro.
</footer>
지금 옵션도 없고 스타일도 없어요.
그것은 보기에는 매우 보기 싫지만, 그것은 보기에 매우 보기 싫어야 한다. 왜냐하면 그것은 스타일이 없기 때문이다.우리는 그것이 효과가 있는지 확인하고 싶다.창의력을 발휘하고 신기한 일을 할 시간이 항상 있다.
자바스크립트 할 때가 됐어!
...이 거품을 깨서 미안하지만 최초의 자바스크립트는 매우 간단할 것이다.텍스트를 한 텍스트 영역에서 다음 텍스트 영역으로 복사합니다.아마도 우리는 그것이 정상적으로 작동하고 있다는 것을 설명하기 위해 약간의 변경 사항을 추가할 수 있을 것이다.
다음은 코드입니다.
const button = document.querySelector("#dwindle-button");
const fromBox = document.querySelector("#text");
const toBox = document.querySelector("#result");
function dwindle(text) {
return text.replace(/ one /ig, " 1 ");
}
button.addEventListener("click", function (e) {
const originalText = fromBox.value;
const transformedText = dwindle(originalText);
toBox.value = transformedText;
});
우리는 브라우저에서 실행한 다음에...
세상에, 배트맨!정말 쓸모가 있다!
정말 쓸모가 있다!모든 것을 멈추고 제출을 끝내자...잠깐만, 그렇지 않아?우리 아직 안 끝났다고 누가 알려줬어!이것은 단지 간단한 대체품일 뿐, 어쨌든 그렇게 좋은 효과는 없을 것이다...좋아요.나는 이것이 일리가 있다고 생각한다...
그러나 이제 우리는 그것이 효과적이라는 것을 안다. 재미있는 부분을 시작할 때가 되었다. 응용 프로그램을 확장해서 더욱 예뻐 보일 수 있도록 하자.
'예쁘다'부분에 대해 우리는 위의 디자인을 따를 것이다.확장에 있어서 우리는'1'의'1'이 아닌 많은 다른 대체품을 포함하기를 희망한다.
운율학
주목해야 할 중요한 것은 응용 프로그램 지표다.우리는 Lighthouse(Chrome에 통합)를 사용하여 성능, SEO, 접근성 및 최상의 실천을 실현할 것이다.웹 액세스 가능성에 대해 조금 더 자세히 알아보기 위해 WebAIM Wave와 함께 제공됩니다.
이 숫자 괜찮아 보여요.😊
또한 접근성 테스트의 일부로서 키보드와 화면 리더를 사용할 것입니다. (Chromevox, 이것은 가장 좋은 것은 아니지만, 매우 편리합니다.)
디지털 해양
겸사겸사 한마디 하자면, 내가 코드를 GitHub repo에 올릴 때마다, 나는 이 사이트를 방문할 수 있고, 몇 초 안에 업데이트를 볼 수 있다. 이것은 정말 대단하다.너무 신기해!
이날 요약:
긍정적인 측면:
Reference
이 문제에 관하여(Digital Ocean Hackathon 응용 프로그램:초기 프로토타입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alvaromontoro/digital-ocean-hackathon-app-initial-prototype-d7g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
