Как направих масата за моя производствен лабораторен проект?
Урок с Джон ме изпрати на този уебсайт:
Първата стъпка е да отидете на Scotch и да видите този урок. Това е всичко, на което базираме нашия дизайн. Беше ми предложено от Jon Hickman (BcU) и е много просто, сбито и подробно за това, което ще трябва да направим.
Как ще изглежда крайният продукт?
Ето как ще изглежда крайният продукт. Няма да разглеждаме подробно (тъй като все още се учим) и урокът е по-подробен, но ще разгледаме основните моменти. След това трябва да настроим нова страница за кодиране.
Трябва да изтеглим малко съдържание, за да оформим дизайна си:
Ще искате да изтеглите както Bootstrap, така и Font Awesome. Те ще ни помогнат да стилизираме листа и както е обяснено в урока, ще ни помогнат да направим процеса по-бърз.
Ще трябва също да добавите това към JS елемента на писалката. Какво прави? — Урокът всъщност не обяснява, но повече или по-малко добавя Angular към съдържанието на JS.
//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js
Създайте заглавие и дори подзаглавие за вашия дизайн:
Следващата стъпка е да добавите заглавие и подзаглавие към диаграмата. Също така е добър шанс да предоставите връзка към оригиналните данни по етични причини, така че потребителите да могат да видят изходните данни.
Добавете малко стил към листа с CSS:
Това мога да направя! Можете да го промените колкото искате (колкото е направено в таблиците със стилове), но това просто ще прецизира стила в такъв, който отговаря на вашите нужди за дадената база данни, която създавате.
Трябва да сме сигурни, че можете да филтрирате таблицата:
Следващата стъпка е да настроите HTML, така че вашият потребител да има къде да въведе своята местна власт. Трябва също да го подготвим, така че HTML да знае къде да търси данните, което в този случай е JS колоната.
Имаме нужда от таблицата, за да покажем името на съветите:
Първата стъпка е да настроите HTML, така че да има колона за показване на името на съвета.
След това се нуждаем от колона за броя на успешните заявки за свобода на информацията:
Втората стъпка е да настроите HTML, така че да има колона за показване на общия брой заявки.
След това имаме нужда от един за брой отложени заявки:
Третата стъпка е да настроите HTML, така че да има колона за показване на броя на забавените заявки.
И накрая, броят на неуспешните искания за свобода на информацията:
И накрая, имаме нужда от колона за броя на неуспешните заявки.
ИЗЧАКАЙТЕ!
Помислете за това! — Как ще покажете данните? Имам данни, разбити по години (чрез колони), но при ранно тестване това не проработи. Данните изглеждаха претрупани, неподредени и хората ми казаха, че са много трудни за четене (особено на мобилни устройства).
Затова реших да ги събера всички заедно и да представя „общо“. Това намали броя на колоните от 18 на 4. Това направи много по-лесно за хората да преглеждат данните.
След това трябва да настроим HTML да рисува правилната JS информация в дясната колона:
Следващата стъпка беше да настроим кода, така че да получаваме само специфичните данни във всяка колона.
Засега ще покаже кода в таблицата. това е добре!
ИМЕ = Какво е името на съвета?
NDSR =Брой успешни заявки.
NDDR =Брой отложени заявки.
NDRF =Брой неуспешни заявки.
След това трябва да кажем на таблицата какво да приеме като термин за търсене:
Време е да преминете към JS!
Първата стъпка е проста — трябва да кажем на лентата за търсене да търси данните в JS по име на съвета.
Така че, ако въведете 453, няма да получите резултат, но ако търсите „Градски съвет на Бирмингам“, ще получите.
И накрая за кодирането, трябва да му дадем информацията — Дайте пълнежа на поничката:
И накрая, трябва да добавим данните. Можете да импортирате данните чрез .CSV лист, но това се оказа наистина сложно.
За целите на днешния проект ви показвам как можете да го направите ръчно. Но можете да разгледате този урок, ако искате!
Сега преминаваме към публикуване на диаграмата в WordPress: Първа стъпка, експортирайте базата данни в ZIP папка:
Първата стъпка е да експортирате вашата Codepen страница като ZIP папка. Можете да направите това, като просто изберете експортиране на вашата страница с кодов код. Нашият файл се нарича js-table-v-6 (1).
Отидете на GitHub и създайте ново хранилище:
След това има още няколко стъпки:
- Отидете на GitHub (Създайте акаунт) и създайте ново хранилище.
- Наименувайте хранилището и му дайте описание,
- Изберете бутона, за да дадете на вашето хранилище файл README.
След това трябва да настроим GitHub, така че нашият код да се публикува в мрежата:
Следващата стъпка е да настроим кода на страницата на GitHub, за да можем да го публикуваме в мрежата!
- Изберете клон, „gh-pages“ и го изберете. Сега трябва да се показва като Клон: gh-страници.
- Щракнете върху създаване на нов файл и го наименувайте index.html, не забравяйте да запазите това!
- Изберете „качване на файлове“ — Плъзнете и пуснете всички файлове от вашата папка в уеб страницата и ги оставете да се качват.
- Кликнете върху файла index.html и намерете всеки текст, който започва със следното: http://….(ВАЖНО)Трябва да поставите „S“ в края на всички HTTP в документа, така че сега да изглежда така: https://
Трябва да проверим дали е публикуван в мрежата!
И така, как да го пуснем в мрежата? просто. На страницата си в GitHub щракнете върху настройките и превъртете надолу до URL адреса, който ще видите. Ако всичко работи, трябва да видите кода си в прозореца на браузъра си.
Добавете малко тук и сте готови...
Последната стъпка е да добавите iFrame, така че да можете да го вградите в документ на wordpress.
Кодът по-долу е това, от което се нуждаете. Просто заменете моя URL адрес с вашия (от екранната снимка по-горе) и персонализирайте ширината и височината за нещо, което ви подхожда повече!
