API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 28th, 2017
208
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Technologie Web'owe</title>
  6. <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  7. <meta name="description" content="Zobacz wszystko, co powienieneś wiedzieć podstawowych technologiach Web'owych" />
  8. <meta name="keywords" content="" />
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  10. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  11. <link rel="stylesheet" href="style.css" type="text/css" />
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  13. <script src="jquery.scrollTo.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16.  
  17. $(window).scroll(function(){
  18. if ($(this).scrollTop() > 100) {
  19. $('.scrollUp').fadeIn();
  20. } else {
  21. $('.scrollUp').fadeOut();
  22. }
  23. });
  24.  
  25. $('.scrollUp').click(function(){
  26. $('html, body').animate({scrollTop : 0},800);
  27. return false;
  28. });
  29.  
  30. });
  31. jQuery(function($)
  32. {
  33. //zresetuj scrolla
  34. $.scrollTo(0);
  35.  
  36. $('#fe').click(function() { $.scrollTo($('#frontEnd'), 800); });
  37. $('#fr').click(function() { $.scrollTo($('#JSframeworks'), 800); });
  38. $('#be').click(function() { $.scrollTo($('#backEnd'), 800); });
  39. $('#fs').click(function() { $.scrollTo($('#fullStack'), 800); });
  40. $('#pe').click(function() { $.scrollTo($('#polecaneedytory'), 800); });
  41. $('#pg').click(function() { $.scrollTo($('#programygraficzne'), 800); });
  42. }
  43. );
  44. function myFunction(x) {
  45. x.classList.toggle("change");
  46. }
  47. </script>
  48. </head>
  49.  
  50. <body>
  51. <div id="wrapper">
  52. <header>
  53. <div id="logo"><strong><i>Technologie <br/> Webowe</i></strong></div>
  54. </header>
  55. <nav>
  56. <ol>
  57. <li><a href="#" id="fe">Front End</a></li>
  58. <li><a href="#" id="fr">Frameworki JS</a></li>
  59. <li><a href="#" id="be">Back End</a></li>
  60. <li><a href="#" id="fs">Full Stack</a></li>
  61. <li><a href="#" id="pe">Polecane Edytory</a></li>
  62. <li><a href="#" id="pg">Programy Graficzne</a></li>
  63. </ol>
  64. </nav>
  65. <div id="content">
  66. <a href="#" class="scrollUp"> </a>
  67. <p id="hello">Witaj na mojej stronie poświęconej technologiach Web'owych</p>
  68. <div id="mainContent">
  69. <section id="frontEnd">
  70. <p id="frontend"><i>Zacznijmy od strony wizualniej - Front end'u</i></p>
  71. <article id="html">
  72. <figure>
  73. <img src="img/html.png" title="Logo HTML5" alt="Logo HTML5">
  74. </figure>
  75. <h2>Co to jest HTML?</h2>
  76. <p><strong>HTML</strong> (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów
  77. hipertekstowych.HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym
  78. fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia
  79. bądź elementy baz danych np. interaktywne formularze danych.HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej.
  80. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy
  81. stylów.</p>
  82. </article>
  83. <article id="css">
  84. <figure>
  85. <img src="img/css.png" title="Logo CSS3" alt="Logo CSS3">
  86. </figure>
  87. <h2>Co to jest CSS?</h2>
  88. <p><strong>CSS</strong> to język służący do opisu formy prezentacji
  89. (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w
  90. połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie. Arkusz stylów CSS to lista dyrektyw (tzw. reguł)
  91. ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML
  92. lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina
  93. czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki.
  94. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.</p>
  95. </article>
  96. <article id="js">
  97. <figure>
  98. <img src="img/js.png" title="Logo JS" alt="Logo JS">
  99. </figure>
  100. <h2>Co to jest JavaScript?</h2>
  101. <p><strong>JavaScript </strong> (krócej JS) – skryptowy język programowania, stworzony przez firmę Netscape,
  102. najczęściej stosowany na stronach internetowych. Twórcą JavaScriptu jest Brendan Eich. Najczęściej spotykanym
  103. zastosowaniem języka JavaScript są strony WWW. Skrypty służą najczęściej do zapewnienia interaktywności poprzez
  104. reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych. Skrypty JavaScriptu
  105. uruchamiane przez strony internetowe mają znacznie ograniczony dostęp do komputera użytkownika. Po stronie serwera może
  106. także działać JavaScript w postaci node.js lub Ringo</p>
  107. </article>
  108. </section>
  109. <section id="JSframeworks">
  110. <p id="framework"><i>Podstawowe frameworki JS</i></p>
  111. <article id="angular">
  112. <figure>
  113. <img src="img/angularj.png" title="Logo AngularJS" alt="Logo AngularJS"/>
  114. </figure>
  115. <h2>Co to jest Angular?</h2>
  116. <p><strong>AngularJS</strong> to otwarty framework oparty na języku JavaScript, wspierany i firmowany przez Google, wspomagający tworzenie i rozwój
  117. aplikacji internetowych na pojedynczej stronie. Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller (MVC) do aplikacji internetowych,
  118. aby ułatwić ich rozwój i testowanie. Biblioteka wczytuje plik HTML zawierający dodatkowe specyficzne dla tej biblioteki tagi. Podążając za
  119. instrukcjami wydawanymi przez owe znaczniki, biblioteka przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych
  120. jezyka JavaScript. Wartości tych zmiennych można ustawić ręcznie lub pobrać z otrzymywanego statycznie lub dynamicznie źródła JSON-a.</p>
  121. </article>
  122. <article id="ajax">
  123. <figure>
  124. <img src="img/ajax.png" title="Logo Ajax" alt="Logo Ajax"/>
  125. </figure>
  126. <h2>Co to jest Ajax?</h2>
  127. <p><strong>Ajax</strong> (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) – technika tworzenia aplikacji internetowych, w której
  128. interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną
  129. interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML.</p>
  130. </article>
  131. <article id="jquery">
  132. <figure>
  133. <img src="img/jquery.png" title="Logo jQuery" alt="Logo jQuery"/>
  134. </figure>
  135. <h2>Co to jest jQuery?</h2>
  136. <p><strong>jQuery</strong> to lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie z JavaScriptu (w tym manipulację drzewem
  137. DOM). Kosztem niewielkiego spadku wydajności w stosunku do profesjonalnie napisanego kodu w niewspomaganym JavaScripcie pozwala osiągnąć interesujące
  138. efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX. Większość wtyczek i skryptów opartych na jQuery działa na stronach nie
  139. wymagając zmian w kodzie HTML (np. zamienia klasyczne galerie złożone z miniatur linkujących do obrazków w dynamiczną galerię).</p>
  140. </article>
  141. </section>
  142. <section id="backEnd">
  143. <p id="backend"><i>Ciemna strona medalu - BackEnd</i></p>
  144. <article id="php">
  145. <figure>
  146. <img src="img/php.png" title="Logo php" alt="Logo php"/>
  147. </figure>
  148. <h2>Co to jest php?</h2>
  149. <p><strong>Php</strong> interpretowany skryptowy język programowania zaprojektowany do generowania stron internetowych i budowania aplikacji webowych
  150. w czasie rzeczywistym. PHP jest najczęściej stosowany do tworzenia skryptów po stronie serwera WWW, ale może być on również używany do przetwarzania
  151. danych z poziomu wiersza poleceń, a nawet do pisania programów pracujących w trybie graficznym (np. za pomocą biblioteki GTK+, używając rozszerzenia
  152. PHP-GTK). Implementacja PHP wraz z serwerem WWW Apache oraz serwerem baz danych MySQL określana jest jako platforma AMP (w środowisku Linux – LAMP,
  153. w Windows – WAMP). </p>
  154. </article>
  155. <article id="nodejs">
  156. <figure>
  157. <img src="img/nodejs.png" title="Logo node.js" alt="Logo node.js"/>
  158. </figure>
  159. <h2>Co to jest Node.js?</h2>
  160. <p><strong>Node.js</strong> środowisko uruchomieniowe zaprojektowane do tworzenia wysoce skalowalnych aplikacji internetowych, szczególnie serwerów www
  161. napisanych w języku JavaScript. Umożliwia tworzenie aplikacji sterowanych zdarzeniami wykorzystujących asynchroniczny system wejścia-wyjścia. Jest
  162. frameworkiem open sourceNode.js składa się z silnika V8 (stworzonego przez Google), biblioteki libUV oraz kilku innych bibliotek. Został stworzony
  163. przez Ryana Dahla na początku 2009 roku, jego rozwój sponsorowany był przez firmę Joyent, w której pracował..</p>
  164. </article>
  165. <article id="mysql">
  166. <figure>
  167. <img src="img/myslq.png" title="Logo MySql" alt="Logo MySql"/>
  168. </figure>
  169. <h2>Co to jest MySql?</h2>
  170. <p><strong>MySql</strong> wolnodostępny system zarządzania relacyjnymi bazami danych. MySQL rozwijany jest przez firmę Oracle. Wcześniej przez większość
  171. czasu jego tworzeniem zajmowała się szwedzka firma MySQL AB. MySQL AB została kupiona 16 stycznia 2008 roku przez Sun Microsystems, a ten 27 stycznia
  172. 2010 roku przez Oracle. W międzyczasie Monty Widenius (współtwórca MySQL) stworzył MariaDB – forka (alternatywną wersję) opartego na licencji GPL.
  173. MariaDB jest oparta na tym samym kodzie bazowym co MySQL i dąży do utrzymania kompatybilności z jej poprzednimi wersjami.</p>
  174. </article>
  175. </section>
  176. <section id="fullStack">
  177. <p id="fullstack"><i>FullStack Developer - hit czy kit?</i></p>
  178. <article id="FullStack">
  179. <figure>
  180. <img src="img/fullstack.png" title="FullStack" alt="FullStack"/>
  181. </figure>
  182. <h2>Kto to Full Stack Developer?</h2>
  183. <p><strong>Full Stack Developer </strong>jest połączenie BackEnd'u i FrontEnd'u. Najlepiej byłoby określić takiego developera jako osobę, która sprawnie
  184. porusza się po wszystkich warstwach stosu technologicznego (ang. stack). Czyli jest to developer, który potrafi kodować aplikację po stronie klienta,
  185. poradzi sobie z budowaniem back-endu, umie administrować serwerem, bazą danych i wszystkim co w praktyce może być jeszcze potrzebne. Przynajmniej w teorii
  186. Full Stack Developer powinien sobie poradzić z projektowaniem, kodowaniem, debugowanien, wdrażaniem oraz utrzymaniem kompletnej aplikacji webowej.</p>
  187. </article>
  188. </section>
  189. <section id="polecaneedytory">
  190. <p id="edytory"><i>Polecane Edytory</i></p>
  191. <article id="atom">
  192. <figure>
  193. <img src="img/atom.png" title="Logo Atom'a" alt="Logo Atom'a"/>
  194. </figure>
  195. <h2>1. Atom</h2>
  196. <p><strong>Atom </strong> desktopowy edytor programistycznych kodów źródłowych z kolorowaniem składni dla wielu języków. Można w nim też edytować wszystkie
  197. pliki tekstowe (.txt). Dystrybuowany na otwartej licencji MIT. Program bazuje na zmodyfikowanej przeglądarce Chromium oraz rozszerzeniu do niej pozwalającym
  198. na edytowanie dokumentów i korzystanie z systemu kontroli wersji GIT. Dzięki temu rozwiązaniu program jest wieloplatformowy i każdy znający JavaScript może go
  199. łatwo rozszerzyć o potrzebne mu funkcje. Umożliwia też integrację z niektórymi kompilatorami.</p>
  200. </article>
  201. <article id="vscode">
  202. <figure>
  203. <img src="img/vscode.png" title="Logo VS Code" alt="Logo VS Code"/>
  204. </figure>
  205. <h2>2. VS Code</h2>
  206. <p><strong>VS Code </strong> Visual Studio Code to lekki i szybki edytor stworzony z myślą o tym, by programować w nim na każdym systemie operacyjnym. Osobiście
  207. własnie tego edytora używam i przy jego użyciu stworzyłem tę stronę.</p>
  208. </article>
  209. <article id="submiletext">
  210. <figure>
  211. <img src="img/sublimetext.png" title="Logo Sublime Text" alt="Logo Sublime Text"/>
  212. </figure>
  213. <h2>3. Subile Text</h2>
  214. <p><strong>Subile Text </strong> wieloplatformowy, rozbudowany i wysoce konfigurowalny edytor tekstu zorientowany dla programisty, napisany w językach C++ i Python.
  215. Sublime Text można pobrać oraz testować za darmo, jednak do dalszego użytkowania wymagane jest zakupienie licencji.</p>
  216. </article>
  217. </section>
  218. <section id="programygraficzne">
  219. <p id="graficzne"><i>W czym robić grafikę na strone?</i></p>
  220. <article id="ps">
  221. <figure>
  222. <img src="img/ps.png" title="Logo PhotoShop'a" alt="Logo PhotoShop'a"/>
  223. </figure>
  224. <h2>1. Photoshop</h2>
  225. <p><strong>Photoshop </strong> rozbudowany program graficzny przeznaczony do tworzenia i obróbki grafiki rastrowej, będący flagowym produktem firmy Adobe Systems.
  226. Program jest dostępny na platformy Windows i macOS. Projekty zapisywane są w formacie plików PSD. Osobiście bardzo go polecam na początku ilość funkcji może przytłaczać
  227. ale po lekkiej wprawie można naprawdę dużo zdziałać.</p>
  228. </article>
  229. <article id="gimp">
  230. <figure>
  231. <img src="img/gimp.png" title="Logo Gimp'a" alt="Logo Gimp'a"/>
  232. </figure>
  233. <h2>2. Gimp</h2>
  234. <p><strong>Gimp</strong> (ang. GNU Image Manipulation Program) – bezpłatny, otwartoźródłowy program do edycji grafiki rastrowej. Pozwala na operacje takie jak m.in. retusz,
  235. skalowanie, rysowanie, dodawanie tekstu umożliwiając pracę na warstwach i kanałach, dostosowywanie interfejsu czy tworzenie skryptów automatyzujących niektóre
  236. czynności. Program udostępniany jest na licencji GPL w wersji 3. GIMP wchodzi w skład projektu GNU. Dostępny jest na systemy POSIX (m.in. macOS i Linux) oraz Windows.
  237. Jego funkcjonalność może zostać rozszerzona z użyciem dodatków, takich jak oficjalny GAP (GIMP Animation Package) ułatwiający tworzenie animacji. </p>
  238. </article>
  239. </section>
  240. </div>
  241. </div>
  242. <footer>
  243. <p>Copyright by Wionek &copy</p>
  244. <div id="socials">
  245. <div id="fb">
  246. <a href="https://www.facebook.com" target="_blank"><img src="img/fb.png" title="FB" alt="FB"/></a>
  247. </div>
  248. <div id="yt">
  249. <a href="https://www.youtube.com" target="_blank"><img src="img/yt.png" title="YT" alt="YT"/></a>
  250. </div>
  251. <div id="git">
  252. <a href="https://www.github.com" target="_blank"><img src="img/git.png" title="GitHub" alt="GitHub"/></a>
  253. </div>
  254. <div id="tw">
  255. <a href="https://www.twitter.com" target="_blank"><img src="img/tw.png" title="Twitter" alt="Twitter"/></a>
  256. </div>
  257. </div>
  258. </footer>
  259. </div>
  260. </body>
  261. </html>
  262.  
  263. ////////////////////////css
  264. body{
  265. background-color:rgb(228, 225, 225) ;
  266. font-family: 'Oswald', sans-serif;
  267. margin: 0 !important;
  268. }
  269. #wrapper{
  270. width: 100%;
  271. }
  272. header{
  273. width: 100%;
  274. }
  275. #logo{
  276. background-color:rgb(228, 225, 225) ;
  277. /*color: #53899f;*/
  278. color: #ffffffff;
  279. text-shadow: 1px 1px 20px black;
  280. font-size: 50px;
  281. text-align: center;
  282. padding-top: 20px;
  283. padding-bottom: 20px;
  284. width: 100%;
  285. }
  286.  
  287. #content{
  288. width: 1140px;
  289. margin-top: 40px;
  290. margin-left: auto;
  291. margin-right: auto;
  292. text-align: justify;
  293. background-color: #ffffff;
  294. box-shadow: 0 0 5px 1px rgb(0, 0, 0);
  295. padding: 0 15px;
  296. margin-bottom: 25px;
  297. padding-bottom: 25px;
  298. }
  299.  
  300. #html, #js, #ajax, #php, #mysql, #atom, #submiletext, #gimp{
  301. background-color:rgb(248, 202, 202);
  302. padding: 10px;
  303. }
  304.  
  305.  
  306. #css, #angular, #jquery, #nodejs, #FullStack, #vscode, #ps{
  307. padding: 10px
  308. }
  309. #framework, #frontend, #backend, #fullstack, #edytory, #graficzne{
  310. text-align: center;
  311. font-size: xx-large;
  312. }
  313. .scrollUp{
  314. width: 64px;
  315. height: 64px;
  316. background: url(img/scrollup.png) no-repeat 0px 0px;
  317. position: fixed;
  318. right: 50px;
  319. bottom: 0px;
  320. display: none;
  321. }
  322. figure{
  323. float: left;
  324. border-right: 2px dashed;
  325. padding: 10px;
  326. }
  327. article{
  328. overflow: auto;
  329. }
  330. #hello{
  331. text-align: center;
  332. font-size: xx-large;
  333. }
  334. footer{
  335. width: 100%;
  336. height: 135px;
  337. text-align: center;
  338. font-size: 20px;
  339. -webkit-text-fill-color: #ffffff;
  340. background-color: #382f2f;
  341. overflow: auto;
  342. margin-bottom: 25px;
  343. }
  344. #socials{
  345. width: 192px;
  346. margin-left: auto;
  347. margin-right: auto;
  348. padding: 5px 5px;
  349. margin-left: auto;
  350. margin-right: auto;
  351. }
  352. #fb{
  353. width: 48px;
  354. height: 48px;
  355. float: left;
  356. }
  357. #fb:hover{
  358. background-color: #4669b3;
  359. }
  360. #yt{
  361. width: 48px;
  362. height: 48px;
  363. float: left;
  364. }
  365. #yt:hover{
  366. background-color: #d94348;
  367. }
  368. #git{
  369. width: 48px;
  370. height: 48px;
  371. float: left;
  372. }
  373. #git:hover{
  374. background-color: #ffffff;
  375. }
  376. #tw{
  377. width: 48px;
  378. height: 48px;
  379. float: left;
  380. }
  381. #tw:hover{
  382. background-color: #3095d3;
  383. }
  384. nav{
  385. width: 100%;
  386. padding-top: 0;
  387. }
  388. nav ol{
  389. padding: 0;
  390. display: flex;
  391. background: #53899f;
  392. font-size: 25px;
  393. list-style: none;
  394. text-align: center;
  395. }
  396. nav ol a{
  397. display: block;
  398. padding-top: 0px;
  399. padding: 20px;
  400. color: #ffffff;
  401. text-decoration: none;
  402. transition: background.1s;
  403. }
  404. nav ol > li{
  405. flex: 1;
  406. }
  407. ol > li:hover{
  408. background-color: #540b5f
  409. }
  410.  
  411.  
  412. @media (min-width: 2000px) {
  413. #contente {width: 1250px;}
  414. }
  415. @media (max-width: 2000px) and (min-width: 1800px) {
  416. #contente {width: 1140px;}
  417. }
  418. @media (max-width: 1800px) and (min-width: 1600px) {
  419. #contente {width: 900px;}
  420. }
  421. @media (max-width: 1600px) and (min-width: 1400px) {
  422. }
  423. @media (max-width: 1400px) and (min-width: 1200px) {
  424. }
  425. @media (max-width: 1200px) and (min-width: 1091px) {
  426. }
  427. @media (max-width: 1091px) and (min-width: 800px) {
  428. #content {width: 90%;}
  429. }
  430. @media (max-width: 800px) and (min-width: 650px) {
  431. #content {width: 90%;}
  432. }
  433. @media (max-width: 650px) and (min-width: 400px) {
  434. nav ol{flex-direction: column; }
  435. figure{border: none;}
  436. #content {width: 100%;padding-left: 0;padding-right: 0; }
  437. #framework, #frontend, #backend, #fullstack, #edytory, #graficzne{
  438. font-size: large;
  439. }
  440. }
  441. @media (max-width: 400px){
  442. nav ol{flex-direction: column; }
  443. figure{border: none;}
  444. #content {width: 100%;padding-left: 0;padding-right: 0; }
  445. #framework, #frontend, #backend, #fullstack, #edytory, #graficzne{
  446. font-size: large;
  447. }
  448.  
  449. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!