Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

[TuT] Własna strona internetowa - co i jak?

Yaren666

Rekomendowane odpowiedzi

Yaren666 Uczeń

Yaren666

Opublikowano
Uczeń

Yaren666

Opublikowano

W odpowiedzi na powtarzające się pytania odnośnie tworzenia stron internetowych, postanowiłem stworzyć poradnik omawiajacy proces projektowania i kodowania strony jako zagadnienie ogólne, skupiając się jednak bardziej szczegółowo na ważniejszych informacjach. Bez dalszych i zbędnych wstępów przejdźmy do sedna sprawy.

 

Własna strona internetowa - co i jak?

 

Co powinienem wiedzieć?

 

Zasadnicze pytanie, jakie powinniśmy sobie postawić brzmi "Po co jest mi strona internetowa?". Jeżeli przykładowo jesteś pisarzem i chcesz podzielić się ze światem swoimi tekstami, możesz odpuścić czytanie tego poradnika. Dlaczego? Dlatego, że paradoksalnie nie musisz posiadać wiedzy o tworzeniu stron, żeby mieć własną stronę. Obecnie instnieje wiele hostingów, oferujących postawienie własnego forum, czy bloga bez jakiejkolwiek wiedzy programistycznej. Oto kilka przykładów takich ofert:

 

  • www.blogger.com (darmowe blogi od Google),
  • www.cba.pl (darmowy hosting z dostępem do automatycznego instalatora CMS),
  • www.pun.pl (darmowe fora na skrypcie FluxBB)

 

W kilku krokach tworzysz własną i gotową do użytkowania stronę. Dodatkowo Internet aż pęka w szwach od darmowych szablonów graficznych do poszczególnych systemów CMS (CMS - system zarządzania treścią na stronie, umożliwiajacy jej edycję bez bezpośredniego wglądu w pliki) takich jak WordPress, Joomla, FluxBB, czy phpBB.

 

Jeśli jednak zagadnienie tworzenia stron internetowych wydaje Ci się na tyle interesujące, że chciałbyś się tym zająć, zapraszam do czytania mojej dalszej grafomanii.

 

 

Od czego mam zacząć?

 

Podstawą do rozpoczęcia nauki webmasteringu jest zrozumienie, jak działa strona internetowa. Jest to bardzo prosty schemat, a przedstawia się mniej więcej tak:

 

  1. Klient (użytkownik) włącza przeglądarkę i wpisuje adres rządanej strony.
  2. Jeżeli istnieje połączenie z Internetem, przeglądarka wysyła zpytanie do serwera z prośbą o przesłanie plików strony internetowej.
  3. Jeżeli serwer odpowiada, w oknie przeglądarki następuje załadowanie plików rządanej strony. W przeciwnym wypadku użytkownik otrzymuje komunkat o braku odpowiedzi.
  4. Przy każdym następnym kliknięciu w odnośnik, następuje ładowanie kolejnych plików (przykładowo contact.html, about.html) i ich wyświetlanie.

 

Nic trudnego. Ale można z tego wywnioskować coś ważnego - strona internetowa jest plikiem, bądź zbiorem plików dostępnych dla użytkowników Internetu. Każdy element strony do plik - obrazek, plik HTML, plik PHP, arkusz styli itp. Ty, jako przyszły webmaster będziesz zajmował się właśnie tworzeniem tych plików.

 

 

Przejdźmy o krok dalej. Żeby rozpocząć tworzenie stron internetowych musisz nauczyć się jednej, podstawowej technologii, odpowiadającej za prezentację danych na stronie - HTML.

 

HTML i CSS.

 

Język HTML jest językiem znaczników, mającym de facto niewiele wspólnego z pełnokrwistym językiem programowania. Odpowiada on za stworzenie szablonu strony, w którym będą zawarte informacje. Oto prosty przykład - stwórz na dysku plik o nazwie index.html o następującej treści, a następnie uruchom go w przeglądarce:

<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8"/>
		<title>Moja pierwsza strona</title>

	</head>

	<body>

	<h1>Witaj, świecie!</h1>

	</body>

</html>

Jeżeli wszystko poszło dobrze, powinieneś zobaczyć efekt podobny do tego:

 

aXYTazo.png

 

I tak oto stworzyłeś swoją pierwszą stronę internetową - gratulacje! : D

 

Teraz czeka Cię nauka poszczególnych znaczników i ich działania. Polecam tą stronę wszystkim osobom, zaczynającym swoją przygodę z tworzeniem stron:

http://www.kurshtml.edu.pl/

Autorzy bardzo dobitnie wyjaśnili działanie każdego znacznika, więc nawet wiedzo-odporni delikwenci sobie poradzą.

 

No cóż, faktycznie mamy stronę, ale nie wygląda ona jakoś specjalnie zachęcająco, prawda? To dlatego, że HTML służy jedynie do stworzenia szablonu strony internetowej, bez jakichkolwiek modyfikacji wyglądu - od tego natomiast jest CSS (Kaskadowe Arkusze Stylów).

 

CSS jest technologią opierającą się na swoistych komendach, definujących wygląd strony w odniesieniu do jej poszczególnych elementów. Na podanej wyżej stronie jest on również wystarczająco dobrze omówiony, więc ja skupię na się na praktyce.

 

Otwórz plik index.html i po:

<title> Moja pierwsza strona </title>

Dodaj:

<style>

    

    h1 {

        color: red;

        text-align: center;

        text-shaow: 0 0 1px red;

    }



</style>

Efekt powinien być taki:

 

xTRsBIW.png

 

 

Oczywiście to jest jedynie namiastka tego, co można uzyskać dzięki CSS, ale idealnie obrazuje jego zastosowanie.

 

Podsumowując - HTML i CSS są głównym filarem stron www. Jeżeli chcesz stworzyć własną stronę - zacznij od tego i nie szukaj drogi na skróty.

 

Wybór edytora

 

Podczas nauki HTML i CSS (jak i następnych języków) z pewnością szybko zauważysz, że korzystanie z Notatnika do kodowania nie jest niczym przyjemnym. Kod będzie ciężki do odczytania, łatwo o błędy i przy większych projektach będzie można pogubić się we własnych zapisach. Na szczęście powstały specjalne edytory tekstu, zawierające bardzo przydatne funkcje. Oto parę z nich:

 

  • kolorowanie składni - podstawowa i bardzo ważna funkcjonalność. Znaczniki, selektory i bardziej skomplikowane właściwości języków, takie jak funkcje, instrukcje warunkowe (na razie nie musicie zaprzątać sobie tym głowy :P) są wyróżnione odpowiednimi kolorami, co znacząco poprawia czytelność kodu.
  • automatyczne domykanie znaczników - najprościej mówiąc, wystarczy napisać <h1> a program sam doda zamknięcie do znacznika, co jest pomocne przy bardziej rozbudowanych stronach, zawierających zagnieżdżenia znaczników.
  • pomoc w wychwytywaniu błędów - program często sam zaznacza wers, w którym znajduje sie nieporządany błąd negatywnie wpływający na działanie naszej strony.

0zm7hTt.png

 

Obrazek wyżej pokazuje przykładowy edytor - w tym wypadku Sublime Text 3.

 

Generalnie wybór edytora to sprawa osobista - korzystajcie z tego, który bardziej przypadł wam do gustu. Dla ułatwienia jednak podam kilka najbardziej znanych:

 

Sublime Text 3 - płatny, aczkolwiek wersja darmowa wyświetla nam jedynie co jakiś czas mało inwazyjną widomość z propozycją zakupu licencji. Jak dla mnie najlepszy edyor, korzystam z niego od dłuższego czasu i mogę tylko zachwalać.

http://www.sublimetext.com/3

Notepad++ - chyba najbardziej znany edytor tekstu dla programisów. Swego czasu korzystałem z niego przez długi czas.

https://notepad-plus-plus.org/

Adobe Brackets - edytor, który gości na rynku od stosunkowo niedługiego czasu, ale już znalazł niemałe grono programistów korzystajacych z niego. Sam zapoznałem się z tym tworem i gdyby nie fakt, że jest nastawiony głównie na kodowanie front-endu (potem wyjaśnię o co chodzi), to pewnie bym z niego korzystał.

http://brackets.io/

Pajączek - nie korzystałem, ale słyszałem, że jest bardzo przyjemny w użytkowaniu. AFAIR wersja darmowa jest bardzo okrojona.

http://www.creamsoft.com/pajaczek/download-web-editor.html

Znam już HTML i CSS - co dalej?

 

Jeżeli przebrnąłęś przez cały Kurs HTML i CSS i doszedłeś do poziomu, w którym potrafisz napisać szkielet strony i oprawić go w wygląd za pomocą CSS bez większych problemów, to przyszła pora na pójście o krok dalej i dodania trochę dynamiki do Twoich stron.

 

Kolejnym kamieniem milowym w nauce tworzenia stron, zaraz po HTML i CSS jest JavaScript.

 

JavaScript jest językiem, umożliwiajcym dodanie dynamicznych elementów do naszej strony, takich jak pop-upy (wyskakujące okienka), animacje, czy interaktywne elementy. Na początek polecam lekturę tego kursu, z racji tego, że mój poradnik podchodzi do tego zagadnienia bardzo ogólnie:

http://kursjs.pl/

JavaScript można już nazwać językiem programowania - umożliwia w końcu instrukcje do podejmowania decyzji, funkcje, zmienne i inne tego typu właściwości. W powyższym kursie wszystko to będzie wystarczająco dobrze wyjaśnione.

 

Front-end i Back-end

 

W końcu nadchodzi taki moment, że musisz zdecydować, czy chcesz zajmować się front-endem, czy back-endem, a może stać się człowiekiem-firmą.

 

  • Front-end: jest to nazwa dla procesu tworzenia warstwy wizualnej strony. Specjaliści od tego zagadnienia kodują w języku HTML, CSS, oraz JavaScript, wykorzystując do tego liczne biblioteki, jaki jQuery (https://pl.wikipedia.org/wiki/JQuery), oraz nie raz zajmują się grafiką, tworząc szablony, a następnie je kodując.
  • Back-end: czyli wszystko, co odpowiada za obsługę rządań użytkownika. Przykładem tego może być rejestracja, logowanie, obsługa formularzy, dodawanie artykułów, obsługa bazy danych etc. Ogólnie mówiąc - tworzenie systemu zarządzania treścią na stronie. Tutaj najważniejsze technologie to PHP, SQL, coraz częściej Ajax, oraz liczne frameworki, ułatwiające tworzenie aplikacji.

PHP i SQL

 

Jeżeli zdecydowałeś, że chcesz zająć się back-endem (front-end omówiłęm już wystarczająco dobrze we wcześniejszych punktach) czeka Cię niemało pracy. Po pierwsze - musisz poznać teorię programowania i podstawowe zagadnienia z algorytmiki. Kolejnym krokiem będzie rozpoczęcie właściwej nauki PHP. Najlepszym źródłem informacji o tym języku jest manual, dostępny w Internecie:

http://php.net/manual/en/index.php

Tak, jest po angielsku. Wiele osób narzeka na ten fakt i szuka źródeł informacji w ojczystym języku, ale prawda jest bolesna (dla tych, którzy przespali lekcje angielskiego) - bez umiejętności przyswojenia artykułu w języku angielskim i wyciągnięcia z niego interesujących nas informacji nie ma co pchać się do branży. Znacząca większość poradników, dokumentacji i zagadnień została spisana w języku angielskim i bez jego znajomości nie poradzimy sobie, jako programiści. Co prawda po polsku też znajdzie się kilka dobrych artykułów, ale jest to jedynie namiastek tego, co można znaleźć na zagranicznych stronach.

 

Wracając jednak do tematu. Samo PHP daje nam jednak niewiele, ale wystarczy dodać do niego obsługę baz danych, żeby móc tworzyć pełnokrwiste aplikacje internetowe.

 

Zapraszam tutaj:

http://webmade.org/kursy-online/kurs-mysql.php

Na początek wystarczy i pozwoli zrozumieć ideę takiego, a nie innego przechowywania danych.

 

Parę słów na koniec...

 

Powyższy poranik ma na celu jedynie przybliżenie procesu tworzenia stron dla osób, które wcześniej nie miały z tym styczności. Do większości zagadnień podszedłem bardzo ogólnie, naświetlając je jedynie. To dopiero początek nauki webmasteringu.

 

Bardzo ważną cechą dobrego programisty jest chęć stałego rozwoju i poszerzania horyzontów wiedzy. Technologie webowe ciagle się rozwijają, niemalże z dnia na dzień. Nowe wersje PHP, nowe standardy tworzenia stron, nowe wymagania, frameworki, biblioteki - cała masa informacji do przyswojenia. Jeżeli naprawdę chcesz być na bieżąco, musisz ciągle śledzić rozwój technolgii internetowych i przyswajać te, które uznasz za potrzebne do jak najlepszego wykonywania zakresu Twoich prac.

 

Nie ma drogi na skróty, to też ważna sprawa. Nie ma kodów, których wyuczysz się na pamięć - jest za to logika i wymóg rozwiązywania problemów we własnym zakresie (oczywiście w miarę możliwości można korzystać z gotowych wzorców projektowych).

 

Zacznij od podstaw, ucz się kolejnych technologii i języków, bądź na bieżąco i rozwijaj się - potem pójdzie z górki.

 

Garść linków

 

Jeszcze sypnę kilkoma przydatnymi stronami internetowymi i kończę wywód.

 

Stack Overflow - największe forum programistów. Jeżeli masz z czymś problem, a Google rzuciło linkiem do tej strony, to na pewno znajdziesz tam satysfakcjonującą odpowiedź.

http://stackoverflow.com/

Google Fonts - czcionki Google do implementacji na własnej stronie.

https://www.google.com/fonts

Font Squirrel - kolejne, darmowe czcionki.

http://www.fontsquirrel.com/

Github Gits - czasami jest potrzeba pokazania komuś swojego kodu, a to jest świetne rozwiązanie.

https://gist.github.com/

Imgur - najlepszy, jak dla mnie hosting obrazków.

http://imgur.com/

PHP: The Right Way - bardzo przydatne dla początkujących (i nie tylko) programistów PHP.

http://pl.phptherightway.com/

Subltle Patterns - zbiór darmowych teł na strony www.

http://subtlepatterns.com/

WEBroad - bardzo fajny blog z przydatnymi artykułami z zakresu tworzenia stron.

http://webroad.pl/

Livecoding - a to coś nowego. Platforma stramowa, umożliwiająca przyglądanie się pracy profesjonalnych programistów (jak i tworzenie własnych stramów) z dostępem do chatu, co daje możliwość zadawania pytań na bieżąco. Jak na razie wszystko to za darmo.

https://www.livecoding.tv

************

Poradnik stworzony wyłącznie dla MPCForum. Zabraniam kopiowania.




<?php


 



 //accurate debugging


 



 echo 'dupa';










[Poradnik] Własna strona internetowa






 


		

	


		
	


	
    


	




					
					
						



	
	



					
					
				

					

					
					







	

	

	

		

			

				


	
		Roths
	

				
				
					
						
Uczeń
					
				
			

		

		

			

				


Roths
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Uczeń
		
		




Roths
			
		



		




	

		

			

				
    
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
Dziękuję za poświęcony wkład pracy w stworzenie tego poradnika, z pewnością bardzo przyda się dla ludzi takich jak ja chcących tego wszystkiego się w końcu nauczyć.


			
		


		

		
			

	

		

		

			
rmklpmotoxqn.png

		

	


		
	


	
    


	




					
					
					
				

					

					
					







					
					
					
				

					

					
					







	

	

	

		

			

				


	
		Writen
	

				
				
					
						
Rekrut
					
				
			

		

		

			

				


Writen
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Rekrut
		
		




Writen
			
		



		




	

		

			

				
    
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
No masz ode mnie lajka.



Może twój tekst chociaż trochę uświadomi ludzi, że tworzenie stron to nie takie hop-siup. Chociaż ci bardziej słomiani zapaleńcy nawet nie zadadzą sobie trudu by to przeczytać do końca.



Miałbym pewnie masę uwag do tego poradnika, ale nie jest to na tyle istotne żebym musiał tracić swój i twój czas jego ponowną analizę.


 



Dziękuję za uwagę, Writen



			
		


		

		
			

	

		

		

			

	gamedevmania.com


		

	


		
	


	
    


	




					
					
					
				

					

					
					







					
					
					
				

					

					
					







	

	

	

		

			

				


	
		Yaren666
	

				
				
					
						
Uczeń
					
				
			

		

		

			

				


Yaren666
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Uczeń
		
		




Yaren666
			
		



		




	

		

			

				
    
					
						
  • Autor
    • 
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
@Vertoi, odpuściłem sobie technologie, których nie znam. W Javie nigdy nie programowałem, Ruby ledwo liznąłem, Python, .NET, C itp. to nie moja bajka, więc skupiłem się na najpopularniejszych technologiach, o których mogę coś powiedzieć. Ale fakt, mogłem dać chociaż spis innych technologii back-endowych, naprawię to.


			
		


		

		
			

	

		

		

			





<?php


 



 //accurate debugging


 



 echo 'dupa';










[Poradnik] Własna strona internetowa






 


		

	


		
	


	
    


	




					
					
					
				

					

					
					







	

	

	

		

			

				


	
		Burned123
	

				
				
					
						
Weteran
					
				
			

		

		

			

				


Burned123
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Weteran
		
		




Burned123
			
		



		




	

		

			

				
    
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
No poradnik rozbudowany. Oczywiście jak napisał Written posiada kilka błędów i można byłoby wizualnie poprawić go ale i tak dobra robota. Tylko czy aby na pewno podawanie linków do stron, które za nas mogą zrobić forum/portal to aby na pewno dobry pomysł? xD­


			
		


		

		
	


	
    


	




					
					
					
				

					

					
					







	

	

	

		

			

				


	
		Yaren666
	

				
				
					
						
Uczeń
					
				
			

		

		

			

				


Yaren666
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Uczeń
		
		




Yaren666
			
		



		




	

		

			

				
    
					
						
  • Autor
    • 
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
No poradnik rozbudowany. Oczywiście jak napisał Written posiada kilka błędów i można byłoby wizualnie poprawić go ale i tak dobra robota. Tylko czy aby na pewno podawanie linków do stron, które za nas mogą zrobić forum/portal to aby na pewno dobry pomysł? xD­


 


Tak, to dobry pomysł. Po coś w końcu powstały i korzysta z nich masa ludzi. Po co tworzyć coś od podstaw, jeżeli nie ma takiej potrzeby? Tak, jak napisałem w poradniku - jeżeli ktoś chce pochwalić się swoimi tekstami w internecie, to nie zatrudnia programistów/nie uczy się sam i nie tworzy bloga od podstaw, tylko zakłada go w darmowym hostingu.



			
		


		

		
			

	

		

		

			





<?php


 



 //accurate debugging


 



 echo 'dupa';










[Poradnik] Własna strona internetowa






 


		

	


		
	


	
    


	




					
					
					
				

					

					
					







					
					
					
				

					

					
					







					
					
					
				

					

					
					







	

	

	

		

			

				


	
		Tekonizacja
	

				
				
					
						
Odkrywca
					
				
			

		

		

			

				


Tekonizacja
			

			

			    Opublikowano 
				
			

		

	

	
	

		

		
			
Odkrywca
		
		




Tekonizacja
			
		



		




	

		

			

				
    
					
					
					
					
					
				

			

			
    
				
  • 
					
					
      
						
						
                        
						
						
						
							
								
							
							
							
							
							
							
						
					
    
				
    • 
				
			

		


		

		   
		   Opublikowano 
		   
			
			
				
				
			
		

	


	

    

	

		
		

			
Niby mam to w szkole ale i tak dalej nie mogę tego pojąć, jak się za to zabrać. Jak zrobić coś na 100% ? Lubię grzebać w Photoshopie i Ilustratorze ale za nic nie mogę ogarnąć jak zrobić stronę itp. 


Człowiek niby ma z przedmiotu ale nie wyobraża sobie jak znajdzie pracę, a raczej jej nie znajdzie bo nie da rady. 



			
		


		

		
	


	
    


	




					
					
					
				

					

					
					







					
					
					
				
			
			



		

	


	
	
	
		

			
Zarchiwizowany

			

				Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.
			

		

	
	
	

	







	

		
			
				Tematy
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Dodaj nową pozycję...
    •