Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Byturl.se - Behöver kritik och idéer

1 2 3 4 5 6
Skriv svar
Permalänk
Avstängd
●
Skrivet av fax110:

+1 på denna och för att reklamen ska respekteras så vill man att det ska vara bra reklam, detta kan ju vara svårt att komma på vad som är bra och dåligt men exempel på dålig reklam, knappar som det står "play,download,exit" osv och trycker man så laddas det hem nåt skit, "free virus scan/check you computers health" och trycker man så laddas det hem nåt skit (sånna här saker kan vara jobbigt att få bort från datorn för folk med lite mindre kunskap)
betal dejting sidor som går ut på att "få ligga ikväll/sluta runka dessa mammor behöver dig" osv är väl inte heller nån hit

Gå till inlägget

Jag kommer bara köra reklam internt mellan mina sidor så det blir inga "få ligga ikväll/sluta runka dessa mammor behöver dig" eller "play,download,exit" utan andra sidor jag driver.

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av qarek100:

Jag kommer bara köra reklam internt mellan mina sidor så det blir inga "få ligga ikväll/sluta runka dessa mammor behöver dig" eller "play,download,exit" utan andra sidor jag driver.

Gå till inlägget

Jag såg det efter att jag skrev, väldigt bra i alla fall!

och hemsidan ser väldigt bra ut också denna kommer jag börja använda!

Förresten får man nyfiket fråga vad mer för sidor du "driver"? (tänkte bara att denna är ju helt okej så du kanske har nåt annat vettigt även om detta blir lite offtopic)

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av fax110:

Jag såg det efter att jag skrev, väldigt bra i alla fall!

och hemsidan ser väldigt bra ut också denna kommer jag börja använda!

Förresten får man nyfiket fråga vad mer för sidor du "driver"? (tänkte bara att denna är ju helt okej så du kanske har nåt annat vettigt även om detta blir lite offtopic)

Gå till inlägget

http://horsekick.se
http://storabloggar.se
http://qrcode.se

Det är dom som är igång sedan äger jag fler domäner du kan se alla på http://iiii.se/domains.
Har köpt många men det tar tid och skapa innehåll

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av qarek100:

http://horsekick.se
http://storabloggar.se
http://qrcode.se

Det är dom som är igång sedan äger jag fler domäner du kan se alla på http://iiii.se/domains.
Har köpt många men det tar tid och skapa innehåll

Gå till inlägget

Mitt logobidrag, slängde ihop något lite slafsigt.

http://d.pr/i/WP3B

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av BuruZ:

Mitt logobidrag, slängde ihop något lite slafsigt.

http://d.pr/i/WP3B

Gå till inlägget

Tack det såg riktigt bra ut så vi använder det nu har du det som psd eller xcf ? Det skulle underlätta vid ändring

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av qarek100:

Tack det såg riktigt bra ut så vi använder det nu har du det som psd eller xcf ? Det skulle underlätta vid ändring

Gå till inlägget

Absolut, dock kanske det blir konstigt om du inte har fonten.

PSD nedan
http://d.pr/f/RkPB

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av BuruZ:

Absolut, dock kanske det blir konstigt om du inte har fonten.

PSD nedan
http://d.pr/f/RkPB

Gå till inlägget

Tack så hemskt mycket. Det funkade jag hade fonten.

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av qarek100:

Tack så hemskt mycket. Det funkade jag hade fonten.

Gå till inlägget

Ingen fara, blev lite bättre i alla fall tycker jag
Keep up the good work.

Btw med API så skulle man kunna köra något liknande.
www.byturl.se/api/?www.google.se och sedan så får man tillbaka en url.
Finns säkert någon som har nytta utav ett API, jag själv är inte så förtjust i just förkortningstjänster men det finns alltid folk som kan nyttja ett API till något roligt.

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●

Bort med Times New Roman!

Och jag skulle gärna se konsekvens med förkortningarna. Ibland står det URL, ibland url. Skriv URL på alla ställen, för det skrivs med versaler.

Fixa så att man måste skriva in en korrekt URL. Nu går det till och med att inte skriva något alls. Tvinga användaren att skriva något och använd ett regex för att kontrollera att det är en URL.

Bakgrundsbilden är snygg men man kan ana att den repeterar sig vilket gör att det ser rutigt ut eller hur man ska säga. Inget stort problem, men om det går att fixa så kanske du kan göra det.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●

Något som kan vara en extra funktion är att när man fått sin http://byturl.se/oaiu8 skulle man kunna ha en text ruta där man själv skriver en egen förkortning som hamnar efter snedstrecket. Typ byturl.se/bilderpåkatter och båda skulle peka på samma långa länk.

Onödigt kanske?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HeeK:

Något som kan vara en extra funktion är att när man fått sin http://byturl.se/oaiu8 skulle man kunna ha en text ruta där man själv skriver en egen förkortning som hamnar efter snedstrecket. Typ byturl.se/bilderpåkatter och båda skulle peka på samma långa länk.

Onödigt kanske?

Gå till inlägget

Jag skulle uppskatta den funktionen mycket!

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av BuruZ:

Ingen fara, blev lite bättre i alla fall tycker jag
Keep up the good work.

Btw med API så skulle man kunna köra något liknande.
www.byturl.se/api/?www.google.se och sedan så får man tillbaka en url.
Finns säkert någon som har nytta utav ett API, jag själv är inte så förtjust i just förkortningstjänster men det finns alltid folk som kan nyttja ett API till något roligt.

Gå till inlägget

Jag håller på med ett api men vet ej riktigt hur man ska lösa så man kan skicka in "&" tecken utan att det misslyckas.
Tack

Skrivet av HurMycket:

Bort med Times New Roman!

Och jag skulle gärna se konsekvens med förkortningarna. Ibland står det URL, ibland url. Skriv URL på alla ställen, för det skrivs med versaler.

Fixa så att man måste skriva in en korrekt URL. Nu går det till och med att inte skriva något alls. Tvinga användaren att skriva något och använd ett regex för att kontrollera att det är en URL.

Bakgrundsbilden är snygg men man kan ana att den repeterar sig vilket gör att det ser rutigt ut eller hur man ska säga. Inget stort problem, men om det går att fixa så kanske du kan göra det.

Gå till inlägget

Nu har jag löst allt förutom Times New Roman och bakgrundsbilden.
Har du tips på vad jag kan använda för font?
Jag använder en lite bakgrundsbild för att det ska ladda fort hos alla men ifall du är sugen på att skapa en backgrunds bild så hade jag använt den.
Tack för din hjälp!

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av qarek100:

Nu har jag lagt till urlförlängning. Tack för tipset det var riktigt bra.
Klicka här för att testa den

Gå till inlägget

fint
kanske man vågar sig in på några länkar

Visa signatur

"Med datorer kan man lösa problem
man inte hade tidigare" anonym

Redigera
Citera flera Citera
Permalänk
Medlem
●

Skulle det gå att få bort de där exempel rutorna för att få det mer stilrent? Ungefär så här:

Dold text

Också att lägga till en förläng knapp bredvid search boxen istället för att gå in på en enskild sida för den.

Visa signatur

Beyerdynamic DT770 Pro 80 Ω
CM Storm Quick Fire TK Brown
Zowie FK1+

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av azz0n^:

Skulle det gå att få bort de där exempel rutorna för att få det mer stilrent? Ungefär så här:

http://i.imgur.com/pTlnIk7.png?1

Dold text

Också att lägga till en förläng knapp bredvid search boxen istället för att gå in på en enskild sida för den.

Gå till inlägget

Jag ska fundera på det. Google tycker om text på sidor och ifall jag inte har det så kommer det vara svårt att hitta sidan på google men annars hade det funkat skit bra.

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●

Använd helst inte typsnitt med serif. Prova något enkelt som Tahoma eller liknande.

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av Niklas62:

Använd helst inte typsnitt med serif. Prova något enkelt som Tahoma eller liknande.

Gå till inlägget

Tack det ser mycket bättre ut nu
Kör på Tahoma

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av qarek100:

Nu har jag löst allt förutom Times New Roman och bakgrundsbilden.
Har du tips på vad jag kan använda för font?
Jag använder en lite bakgrundsbild för att det ska ladda fort hos alla men ifall du är sugen på att skapa en backgrunds bild så hade jag använt den.
Tack för din hjälp!

Gå till inlägget 
font-family: Helvetica, sans-serif;

Bra standardfont och betydligt bättre än TNR. sans-serif är en enkel fallback om användaren saknar Helvetica.

Jo, jag förstår det. Den ser riktigt bra ut! Bara pyttelite tydligt att den repeteras. Inget stort problem som sagt.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av HurMycket: 
font-family: Helvetica, sans-serif;

Bra standardfont och betydligt bättre än TNR. sans-serif är en enkel fallback om användaren saknar Helvetica.

Jo, jag förstår det. Den ser riktigt bra ut! Bara pyttelite tydligt att den repeteras. Inget stort problem som sagt.

Gå till inlägget

Byter font ofta men nu är jag riktigt nöjd
Tack!!!

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vet inte om någon redan skrivit det men en "bugg" uppstår genom att spamma "förkorta" knappen, fönstret som dyker upp åker upp det antal gånger man tryckt på förkorta.

Annars gillar jag idén, men designen är inget vidare överlag. Tycker proportionerna på saker och ting är helt fel.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sidan ser otroligt mycket bättre ut nu än tidigare idag när du startade tråden.
Kul att följa utvecklingen av den, keep it up!

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av plajton:

Vet inte om någon redan skrivit det men en "bugg" uppstår genom att spamma "förkorta" knappen, fönstret som dyker upp åker upp det antal gånger man tryckt på förkorta.

Annars gillar jag idén, men designen är inget vidare överlag. Tycker proportionerna på saker och ting är helt fel.

Gå till inlägget

Nu har jag fixat så man inte kan spamma lika mycket
Har du några tips på hur jag kan förbättra designen ?
Tack för att du hjälper

Skrivet av kalkih:

Sidan ser otroligt mycket bättre ut nu än tidigare idag när du startade tråden.
Kul att följa utvecklingen av den, keep it up!

Gå till inlägget

Tack

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett tips är att du kör på responsiv design så att man får en annan sida om man är på mobilen, allt blir väldigt smått annars!

Skickades från m.sweclockers.com

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

Vad gäller att se information om en förkortad URL så är det många tjänster som använder formatet motsvarande:

för att direkt komma till informationssidan för en förkortad URL; dvs om adressen slutar på ett "+" så visas info:

Vad gäller sidans kod så deklarerar du HTML5, men använder egentligen inte dess fördelar. Istf:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

så kan du tydligare skriva

<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

Se <meta charset='utf-8'> vs <meta http-equiv='Content-Type'> och Is type=“text/css” necessary in a <link> tag?. Notera också att det är bra att sätta charset före <title>, då denna också påverkas av detta atttribut.

Dessutom så behöver du inte på XHTML-vis ha självstängande taggar för <input> eller något annat: HTML är inte XHTML. HTML5 tillåter XHTML-stilen av kompatibilitetsskäl, men det behövs inte (först lär de alla att använda självstängande taggar i XHTML, och sedan säger de till alla att sluta med dessa 10 år senare ).

Istf att skriva

<div class="text"><p>Text</p></div>

så kan man också lika gärna bara skriva

<p class="text">Text</p>

vilket blir tydligare (för den delen: vad beskriver <p> om inte "text" i detta fall? Du kanske inte behöver någon klass alls om det är det enda taggen ändå används till; det blir automatiskt semantiskt).

HTML5 ger dig också taggar som t ex <footer> som du kan använda i stället för

<div id="footer" style="z-index:-1;"><span style="float:right;margin-right:20px;">© 2013 Byt Url - Förkortar din URL</div>

(och du har glömt stänga <span>-taggen här) och alltså helt enkelt skriva

<footer>© 2013 Byt Url - Förkortar din URL</footer>

All "styling" kan/bör/ska du sköta i din länkade CSS-fil.

En annan notis är att du definierar kodningen som UTF-8, men ändå använder du HTML-entiteter. Du skulle helt enkelt kunna skriva "©" (u00a9) istf "©": din kod blir kortare och enklare att läsa. Och när jag ändå är här: bindestrecket i din footer borde vara en em dash, vilket du får genom — eller återigen direkt med UTF-8: — (u2014). Sammantaget:

<footer>© 2013 Byt Url — Förkortar din URL</footer>

Av någon anledning så står det också "<html >" istf "<html>" i översta taggen på alla sidor.

Om du sätter attributet "required" på ditt inputfält så kommer webbläsaren automatiskt ge en visuell indikation om det inte är ifyllt. Du kan även med fördel använda type="url" för att förenkla för användare.

Jag förväntar mig att kunna skriva in data i ett formulär och sedan kunna trycka <Enter> för att skicka detta, men det går inte. Till att börja med har du ingen <form>-tagg runt formuläret.

Meningen:

Citat:

Har du fått en förkortad URL av någon och du undrar vart den leder och inte riktigt vågar klicka in på den. Då kan du använda vår urlförlängning. <a>Klicka här för att komma till urlförlängningen</a>

borde snarare vara

Citat:

Har du fått en förkortad URL som du inte vågar följa förrän du vet vart den leder? Använd <a>vår URL-förlängning</a>.

"Klicka här för att…"-mönstret är i stort sett alltid onödigt. Vi vet vad en länk är, webläsaren gör det tydligt på en mängd sätt; vi behöver inte utbildas i hur man klickar på saker på internet .

Som nämndes: ta bort alla style-taggar i HTML-dokumentet och sköt det i stället i din CSS-fil. Med class och id så ska detta inte vara något problem. En praktisk fördel är att man på flertalet sidor kan dela på en CSS-fil som cacheas efter besöket på första sidan, vilket minimerar mängden redundant kod som behöver överföras, vilket ger snabbare sidor och lägre dataförbrukning. Minst lika viktigt är förståelsen för hur man bör segmentera material, uppmärkning och presentation.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du vill göra det mer minimalt kan du ju också ta bort "förkorta"-knappen, och bara låta oss använda enterknappen via en form som nämnts ovan. Skulle även vara trevligt om du kunde, som någon tidigare nämnt, implementera urlförlängningen i samma fält. Det du får göra då (om du tar bort knappar för förkortning/förlängning) blir att analysera vad det är för url; börjar den på byturl så vet du att den ska förlänga urlen och får då köra koden för din förlängare, skulle vara riktigt coolt. Och så bör du ha några väldigt korta instruktioner ovanför! Bra sida än så länge!

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av phroggyy:

Ett tips är att du kör på responsiv design så att man får en annan sida om man är på mobilen, allt blir väldigt smått annars!

Skickades från m.sweclockers.com

Gå till inlägget

Nu har jag fixat så det ser ut bättre på mobiler
tack för tipset

Skrivet av phz:

Vad gäller att se information om en förkortad URL så är det många tjänster som använder formatet motsvarande:

för att direkt komma till informationssidan för en förkortad URL; dvs om adressen slutar på ett "+" så visas info:

Vad gäller sidans kod så deklarerar du HTML5, men använder egentligen inte dess fördelar. Istf:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

så kan du tydligare skriva

<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

Se <meta charset='utf-8'> vs <meta http-equiv='Content-Type'> och Is type=“text/css” necessary in a <link> tag?. Notera också att det är bra att sätta charset före <title>, då denna också påverkas av detta atttribut.

Dessutom så behöver du inte på XHTML-vis ha självstängande taggar för <input> eller något annat: HTML är inte XHTML. HTML5 tillåter XHTML-stilen av kompatibilitetsskäl, men det behövs inte (först lär de alla att använda självstängande taggar i XHTML, och sedan säger de till alla att sluta med dessa 10 år senare ).

Istf att skriva

<div class="text"><p>Text</p></div>

så kan man också lika gärna bara skriva

<p class="text">Text</p>

vilket blir tydligare (för den delen: vad beskriver <p> om inte "text" i detta fall? Du kanske inte behöver någon klass alls om det är det enda taggen ändå används till; det blir automatiskt semantiskt).

HTML5 ger dig också taggar som t ex <footer> som du kan använda i stället för

<div id="footer" style="z-index:-1;"><span style="float:right;margin-right:20px;">© 2013 Byt Url - Förkortar din URL</div>

(och du har glömt stänga <span>-taggen här) och alltså helt enkelt skriva

<footer>© 2013 Byt Url - Förkortar din URL</footer>

All "styling" kan/bör/ska du sköta i din länkade CSS-fil.

En annan notis är att du definierar kodningen som UTF-8, men ändå använder du HTML-entiteter. Du skulle helt enkelt kunna skriva "©" (u00a9) istf "©": din kod blir kortare och enklare att läsa. Och när jag ändå är här: bindestrecket i din footer borde vara en em dash, vilket du får genom — eller återigen direkt med UTF-8: — (u2014). Sammantaget:

<footer>© 2013 Byt Url — Förkortar din URL</footer>

Av någon anledning så står det också "<html >" istf "<html>" i översta taggen på alla sidor.

Om du sätter attributet "required" på ditt inputfält så kommer webbläsaren automatiskt ge en visuell indikation om det inte är ifyllt. Du kan även med fördel använda type="url" för att förenkla för användare.

Jag förväntar mig att kunna skriva in data i ett formulär och sedan kunna trycka <Enter> för att skicka detta, men det går inte. Till att börja med har du ingen <form>-tagg runt formuläret.

Meningen:

borde snarare vara

"Klicka här för att…"-mönstret är i stort sett alltid onödigt. Vi vet vad en länk är, webläsaren gör det tydligt på en mängd sätt; vi behöver inte utbildas i hur man klickar på saker på internet .

Som nämndes: ta bort alla style-taggar i HTML-dokumentet och sköt det i stället i din CSS-fil. Med class och id så ska detta inte vara något problem. En praktisk fördel är att man på flertalet sidor kan dela på en CSS-fil som cacheas efter besöket på första sidan, vilket minimerar mängden redundant kod som behöver överföras, vilket ger snabbare sidor och lägre dataförbrukning. Minst lika viktigt är förståelsen för hur man bör segmentera material, uppmärkning och presentation.

Gå till inlägget

Tack för att du tog din tid jag har fixat allt

Skrivet av phroggyy:

Om du vill göra det mer minimalt kan du ju också ta bort "förkorta"-knappen, och bara låta oss använda enterknappen via en form som nämnts ovan. Skulle även vara trevligt om du kunde, som någon tidigare nämnt, implementera urlförlängningen i samma fält. Det du får göra då (om du tar bort knappar för förkortning/förlängning) blir att analysera vad det är för url; börjar den på byturl så vet du att den ska förlänga urlen och får då köra koden för din förlängare, skulle vara riktigt coolt. Och så bör du ha några väldigt korta instruktioner ovanför! Bra sida än så länge!

Gå till inlägget

Nu har jag fixat både enterknappen och urlförlängningen
Tack för att ni hjälper

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Medlem
●

Snyggt!
Det här kommer jag börja använda!

Jag är själv riktigt usel på design, men kan i alla fall säga att jag uppskattar den.

Visa signatur

Indieutvecklare? - Visa upp dina skapelser hos http://www.programbank.se

Redigera
Citera flera Citera
Permalänk
Avstängd
●
Skrivet av Programbank:

Snyggt!
Det här kommer jag börja använda!

Jag är själv riktigt usel på design, men kan i alla fall säga att jag uppskattar den.

Gå till inlägget

Låter riktigt bra tack

Visa signatur

Är du trött på långa url adresser? BytURL.se
Ska du till DreamHack? Då har du chansen att vinna en Byturl T-shirt! Facebook
Citera för svar

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

Här kommer en modifierad, indenterad och kommenterad variant av framsidans källkod. Den funkar inte identiskt rakt av, men troligen med väldigt små modifikationer i ditt CSS.

Mycket handlar om att använda rätt taggar på rätt plats. Man kan prata länge om historiken gällande vad HTML utvecklades för, hur det användes till fel saker, hur CSS tillkom för att fixa detta, hur det introducerade andra problem, hur XHTML skulle lösa dessa, vad explosionen av alternativa agenter gjort (mobiler, konsoler, etc.), insticksprogrammens död, etc., men utan att göra det så kan man kortfattat säga just: använd taggar till det de är till för. Använd inte <div> som en sorts "generell" tagg för allt bara för att det (under specifika omständigheter) går att få detta att fungera grafiskt.

Både [html]- och [php]-uppmärkning på SweClockers ger rätt hemska resultat i detta fall, så jag rekommenderar att läsa dokumentet på Pastebin i stället om du är intresserad. Infogar det även nedan i [code]-taggar för fullständighet.

<!DOCTYPE html>
<!--Bort med onödigt mellanslag i <html>-taggen-->
<html>
<!--Använd indrag för att logiskt dela upp sidans struktur för att enkelt själv
kunna följa flödet.-->
<head>
	<meta charset="utf-8">
	<!--"Rätt" streck (em dash) även i titeln-->
	<title>Byt Url — Förkortar din URL</title>
	<!--Vi behöver inga självslutande taggar i HTML5!-->
	<meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" media="(min-device-width: 480px)" href="style.css">
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css">
	<meta name="keywords" content="url, kortare, förkorta">
</head>

<body>
<div id="container">
	<!--Använd <h1> runt ditt sidnamn för att sökmotorer ska hitta sidan
	bättre — se <http://youtu.be/fBLvn_WkDJ4>-->
	<!--Jag satte id="logo" här istf id="logo_image" på bilden. Tydligare
	så. Bilden kommer du åt via "#logo img" i CSS likväl.-->
	<h1 id="logo">
		<a href="http://byturl.se">
			<!--Glöm inte alt-text! Återigen för sökmotorer, men
			även för alternativa sätt att se sidan. God sed.-->
			<!--Logon säger "BytUrl.se", men i övrigt refererar du
			till sidan som "Byt Url". Du borde likrikta detta —
			antingen allid "byturl.se" eller alltid "Byt Url".-->
			<img src="img/byturl.png" alt="Byt Url">
		</a>
	</h1>

	<!--Berätta för webläsaren att detta är ett formulär. Återigen för
	sökmotorer och alternativa åtkomstsätt. Det vore inte heller fel att
	kunna låta formuläret användas på "vanligt sätt" för de som inte har
	Javascript aktiverat (ja, dessa personer finns, av olika anledningar).
	Du kan använda din JQuery-metod som primär funktion, men använda
	klassisk HTML-POST som fallback.-->
	<form id="forkorta">
		<!--type="url" är ett tillägg i HTML5 som gör att webbläsaren
		automatiskt förstår att det är en URL som ska in i fältet.
		Detta gör skillnad för t ex mobilers skärmtangentbord.-->
		<input id="url" type="url" name="URL" title="Ange URL som ska förkortas." placeholder="http://dinurl.se/SomÄrLång">
		<input id="shorten" type="submit" name="submit" value="Förkorta din URL / Förläng en förkortad URL">
	</form>

	<!--<div id="correct"> och "error" skulle säkert lika gärna kunna
	vara <p id="correct"> osv. Det skulle bli tydligare i funktion.-->
	<div id="correct"></div>
	<div id="error"></div>
	<!--Ändrade formuleringen en aning. Kort och kärnfullt är nästan alltid
	bättre — personer orkar inte läsa speciellt många tecken.-->
	<p class="text mobile">Är du trött på långa webbadresser? Då har du kommit rätt. Genom att skriva in en URL i textfältet ovan skapas en kort URL som pekar rätt och aldrig slutar fungera.</p>
	<!--Du hade en </a>-tagg i denna mening som inte hade någon
	"kompis".-->
	<p class="text mobile">Har du fått en förkortad URL som du inte vågar följa förrän du vet vart den leder? Använd vår URL-förlängning genom att skriva in din förkortade URL i sökrutan.</p>
	<div class="text mobile">
		<!--Här var det <h3> innan, men du hade varken <h1> eller <h2>.
		Stylingen sköts genom CSS ändå, så det är semantiskt mer
		korrekt att ha <h2> här: din andra rubriknivå.-->
		<h2>Ett exempel</h2>
		<!--Denna text låg inte inom en <p>-tagg innan, utan direkt
		under <div>, som inte är en text-container.-->
		<p>
			<!--Så här slipper vi fula <br>- och helt onödiga
			<span>-taggar: sätt "a.exampleUrl{display: block;}" i
			din CSS-fil.-->
			Original-URL:
			<!--Roligare att göra länkarna till faktiska länkar,
			och inte bara stylea dem så att de _ser ut_ som länkar
			som tidigare. Det bara förvirrar användare — alla är
			vana vid att URL:er som är blåa är klickbara.-->
			<!--Notera också att jag escapeat "&" i både href=""
			och i texten till "&". Gör man inte det skulle man
			med lite otur kunna få en URL som webbläsaren kommer
			tolka som en entitet och då skicka användaren fel/visa
			fel text.-->
			<a class="exampleUrl" href="https://www.google.se/search?q=byt+url&aq=f&oq=byt+url&ie=UTF...">https://www.google.se/search?q=byt+url&aq=f&oq=byt+url&ie=UTF...</a>
			Förkortad URL:
			<a class="exampleUrl" href="http://byturl.se/itlxa">http://byturl.se/itlxa</a>
		</p>
	</div>
</div>

<footer>© 2013 Byt Url — Förkortar din URL</footer>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<!--Konsekvent indrag. Notera att det inte är _helt_ konsekvent iom att jag
inte gjort extra indrag för <html> respektive <body>, men det är bara ett
personligt stilval. Jag tycker att det är lätt att dokumentet blir
oöverblickbart med dessa extra två indragsnivåer som detta medför gällande hela
dokumentet.-->
<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-38765575-3']);
	_gaq.push(['_trackPageview']);
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
</script>

</body>
</html>
Dold text

EDIT: direkt när jag postat så kom jag på att <h1>-taggen inte behöver ha något id-attribut öht egentligen: det är ju bara den som är <h1> per definition.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Skulle ta bort denna gröna ruta:

"Du har kommit till rätt ställe ifall du är trött på långa webbadresser. Genom att skriva in en URL i textfältet ovan kommer vi skapa en webbadress som är kort och aldrig slutar fungera."

Ser lite plottrigt ut annars. Annars skulle jag sammanfoga dem i samma gröna ruta och inte dela upp del i smårutor (ser plottrigt ut).

Skulle även vilja lägga till där du kan skriva egen text efter istället för något random.

t.ex: http://byturl.se/tozzi

Visa signatur

HTPC - Bygglogg; http://www.sweclockers.com/album/?id=2902
HTPC - Galleri; http://www.sweclockers.com/galleri/6562-htpc-galleribilder
42U - Bygglogg; http://www.sweclockers.com/galleri/7862-42u-rackskap-i-hemmet
i7 8700K, Antec kühler 620, Asus ROG Strix Z370-I Gaming, Corsair Vengeance RGB DDR4-2666 2x16GB RAM, ASUS GTX 1070

Redigera
Citera flera Citera
1 2 3 4 5 6
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara