ocena strony i kodu

pytanie zadane 24 sierpnia 2017 w HTML i CSS przez michalos Nowicjusz (180 p.)

Witam wszystkich,

czy mógłby ktoś z was ocenić wygląd jak i kod strony?

komentarz 24 sierpnia 2017 przez Benek Szeryf (91,010 p.)

Brak linku.

komentarz 24 sierpnia 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Jakiej strony? :)

komentarz 24 sierpnia 2017 przez michalos Nowicjusz (180 p.)
przeniesione 24 sierpnia 2017 przez Arkadiusz Waluk

Proszę, oto link: http://divcom24.pl/

komentarz 24 sierpnia 2017 przez Eimens Maniak (69,240 p.)
przeniesione 24 sierpnia 2017 przez Arkadiusz Waluk

Widzę że klasyczny numer :D

4 odpowiedzi

odpowiedź 24 sierpnia 2017 przez niezalogowany

Strona na starcie ładuje dwa slajdy - po 2.4 MB każdy. Skompresuj te obrazki.

Dodaj jakieś ciemniejsze tło - wbrew pozorom czytanie czarnego tekstu na białym tle jest męczące.

Czcionka jest brzydka, ale może to wina mojego splugawionego gustu.

Na głównej stronie przy zmianie slajdów psują ci się przyciski "enter" i "contact" (zanikają i pojawiają się razem ze slajdami). Warto by było też dodać tam choćby jedno zdanie mówiące użytkownikowi, gdzie trafi po kliknięciu "enter".

odpowiedź 24 sierpnia 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

odpowiedź 24 sierpnia 2017 przez Mariusz08 Maniak (62,300 p.)

2 razy rozpoczynajacy tag html
skrypty js na koniec strony
zmienne po angielsku
zamiast body onload listener
```
<div id="slider">fjij</div>
```
podstrona kontakt - brak tagu rzpoczynajacego body
poza tym to zdjecia zmieniaja sie troche za szybko

komentarz 24 sierpnia 2017 przez michalos Nowicjusz (180 p.)

Ok, dzięki za rady, jeszcze jedno, w jaki sposób podmienić obrazki slidera przy mniejszych rozdzielczościach?

komentarz 24 sierpnia 2017 przez Mariusz08 Maniak (62,300 p.)

Przykro mi, ja slabo znam js, nie pomoge Ci. Ale mozesz sie zwrocic z tym pytaniem na irc do np. commandera.

komentarz 24 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)

Do tego nie trzeba JS'a - wystarczy @media screen

komentarz 24 sierpnia 2017 przez michalos Nowicjusz (180 p.)

W .css można podmienić obraz który jest częścią html? Wiem że można podmienić tło ale jak podmienić obrazek?

komentarz 24 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)

A chociażby w taki sposób można to wykonać. Wybrane rozmiary i nazewnictwo przypadkowe.

<style>

@media screen and (max-width: 500px) {

#slider-desktop { 

display: none;

}

}

@media screen and (min-width: 500px) {

#slider-mobile {

display: none;

}

}
</style>

<img src="#" id="slider-mobile" />

<img src="#" id="slider-desktop" />

komentarz 24 sierpnia 2017 przez michalos Nowicjusz (180 p.)

W jaki sposób można to zastosować w tym sliderze?

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8" />

		<style>
			body
			{
				margin: 0!important;
				height: 100%;
			}
			img{width: 100%;height: 100%;}
			html{height: 100%;}
			#slider{height: 100%;}
			.nap{position: fixed;width: 100%;height: 100%;}
			.start{float: left;background-color:#fbc37a;opacity: 0.8;padding: 5px; color: black;font-family: 'Indie Flower', cursive;
			margin-left: 20px;width: 100px;text-align: center;font-weight: -600; letter-spacing: 1.2px;}
			.cal{width: 280px;margin: auto auto;padding-top: 30%;}
			.start:hover{cursor: pointer;border:2px solid #fbc37a;background-color: #fff;transition: all 0.7s;}
			a{text-decoration: none;color: black;}
			@media (max-width: 710px)
			{
				.cal{padding-top: 30%;}
			}
		</style>

		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

		<script type="text/javascript">

			var numer = Math.floor(Math.random()*2)+1;

			var timer1 = 0;
			var timer2 = 0;

			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;

				schowaj();
				setTimeout("zmienslajd()", 500);

			}

			function schowaj()
			{
				$("#slider").fadeOut(500);
			}

			function zmienslajd()
			{
				numer++; if (numer>2) numer=1;

				var plik = "<img src=\"<?php bloginfo('template_directory'); ?>/slajdy/slajd" + numer + ".png\" />";

				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);

				timer1 = setTimeout("zmienslajd()", 4000);
				timer2 = setTimeout("schowaj()", 3500);

			}

		</script>

	</head>
	<body onload="zmienslajd()">

<div class="nap"><div class="cal"><div class="start"><a href="http://divcom24.pl/sample-page/">ENTER</a></div><div class="start"><a href="http://divcom24.pl/contact/">CONTACT</a></div></div></div>

		<div id="slider"></div>

	</body>
</html>

komentarz 24 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)

var plik = <img id="slider-desktop" src=\"<?php ścieżka do obrazu ?>/slajdy/slajd" + numer + ".png\" /><img id="slider-mobile" src=\"<?php ścieżka do obrazu ?>/slajdy/slajd" + numer + ".png\" />

Ja bym zrobił to w ten sposób, nie wiem jak to będzie działać, bo nie operuję fizycznie na tym kodzie, a tylko na tym co udostępniasz.

komentarz 24 sierpnia 2017 przez michalos Nowicjusz (180 p.)

jakoś mi to nie działa,

cały kod slidera tylko w html

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				margin: 0!important;
				height: 100%;
			}
			img{width: 100%;height: 100%;}
			html{height: 100%;}
			#slider{height: 100%;}
			.nap{position: fixed;width: 100%;height: 100%;}
			.start{float: left;background-color:#fbc37a;opacity: 0.8;padding: 5px; color: black;font-family: 'Indie Flower', cursive;
			margin-left: 20px;width: 100px;text-align: center;font-weight: -600; letter-spacing: 1.2px;}
			.cal{width: 280px;margin: auto auto;padding-top: 30%;}
			.start:hover{cursor: pointer;border:2px solid #fbc37a;background-color: #fff;transition: all 0.7s;}
			a{text-decoration: none;color: black;}
			@media (max-width: 710px)
			{
				.cal{padding-top: 30%;}
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var numer = Math.floor(Math.random()*5)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;
				
				schowaj();
				setTimeout("zmienslajd()", 500);
				
			}
			
			function schowaj()
			{
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>2) numer=1;
				
				
var plik = <img id="slider-desktop" src=\"slajdy/slajd" + numer + ".png\" /><img id="slider-mobile" src=\slajdy/slajd" + numer + ".png\" />				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="zmienslajd()">
	

		
		<div id="slider"></div>
		
	</body>
</html>