Inlägg

Tyvärr inte, ser att du använder .hide och .show, och efter att ha läst lite om dessa inser jag att de inte verkar gå att specifiera riktning på, men ska se om jag hittar något! Om vi inte hittar en lösning på det här skulle jag ändå föreslå någon animation, t ex att rutan har en fade in, blir snyggare än att den bara kommer upp

Sidan har för övrigt blivit riktigt trevlig sedan du började, otroligt vad den har förbättrats!

Edit: det här kanske kan hjälpa, eller? http://stackoverflow.com/questions/7099191/jquery-showslow-di...

Bra gjort! Bara en liten kommentar (det är inget viktigt alls, utan bara rent estetiskt): öppningen av hjälp-dialogen är inte längre animerad, animera bara från höger till vänster så blir det riktigt snyggt!

Även bra gjort med att "du måste ange en URL" försvinner när man skriver. Du skulle kunna utveckla det här till att fungera för "ange en alias" samt knappen för att skapa länken, dvs att fältet samt knappen försvinner om man tar bort det man skrivit ur fältet!

Skulle för övrigt vara riktigt kul om du eller någon annan har screenshots på hur det sett ut längs vägen, så man verkligen kan se hur det utvecklats, tror att det finns många här på forumet som då lättare kan uppskatta allt arbete som lagts ner, och det kan vara lite kul att se hur det utvecklats, och se hur man bidragit, bara en kul idé!

nu funkar allting helt okej igen, dock tycker jag att du ska ändra färgen på länken man får till svart, för kopierar man den rakt av som man får den nu och skriver in den på vissa forum som har vit bakgrund så syns inte länken och på just det forumet jag skulle skriva länken på så kunden man inte ändra färg på texten heller, så jag var tvungen att klistra in länken i min webbläsare och kopiera den igen (lite extra omständigt)

Om du inte behöver några fancy text-effekter som inte går att uppnå med CSS (vilket du inte har nu) tycker jag att du ska göra "loggan" enbart med text/kod istället för att ha en bild, på det sättet kommer den skala indefinitely oavsett upplösning, utan kvalitetsförluster, men kom då ihåg att ange font-size i em och inte px/pt! Tycker för övrigt att det varit sjukt kul att se sidan utvecklas från en sida med begränsade funktioner och mycket text till en helt nedskalad sida, mycket snyggare nu än i början!

Edit: dock bör du ändra din hjälp-text så att den blir grammatiskt korrekt, samt inte referera till "förkorta URL"-knappen som inte existerar längre!

En rekommendation är att byta

till

eller liknande. (Angav 'långa' i hakparantes för att den kanske inte är nödvändig, du får välja själv, hakparantesen ska självklart inte stå i den slutgiltiga versionen)

Edit 2: Såg nu även att "hjälp"-rutan kommer från vänstra hörnet av textrutan man fyller i, tycker personligen att det skulle vara så att "hjälp"-rutan animerades från texten "hjälp?" åt vänster. Dvs från höger till vänster istället för vänster till höger som det är nu

Edit 3: såg att knappen förkorta/förläng url kommer upp när man börjar skriva!

Vidare tycker jag att "du måste ange en URL" ska försvinna när man börjar skriva, för det kan bli väldigt mycket med allt öppet, och kanske att "hjälp"-rutan ska försvinna när man börjar skriva (om den är öppen), annars kan det nämligen se ut så här:

http://img831.imageshack.us/img831/3555/screenshot20130331at9...

Ser nu också att texten "hjälp?" inte verkar ha någon CSS på mobilen, den är nämligen understruken, blå och med ett fult serif-typsnitt, men detta kanske är meningen (dock borde du åtminstone ändra typsnitt)!

Ytterligare en edit: ser nu att du ändrat loggan till endast, text, bra gjort! Dock skulle du kunna ge länken ett id för att sedan applicera följande CSS för att göra så att användaren inte kan markera textern i loggan!

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Simpelt, helt okej font, enkel bakgrund och lite modern design med den rundade boxen. Ser inga fel på den. Snyggt jobbat.

Nu funkar det ja men när jag har gett ett alias och sen vill ändra allias igen så blir det samma alias igen som förra gången även fast jag bytte namn denna gången

Varför denna begränsning? Lagringsutrymmet bör vara försumbart — varför inte lagra saker för evigt?

Nu ser den med eftertryck MYCKET seriösare ut bra jobbat. Får se om det blir någt jag använder i framtiden!

Varför denna begränsning? Lagringsutrymmet bör vara försumbart — varför inte lagra saker för evigt?

"För evigt" är givetvis en stark förenkling i vilket fall: kortlänkarna är ju bara kvar så länge sidan sköts. Detta är något som ligger en så här liten sida i fatet jfr m Googles och andras alternativ — de backas av så stora och välanvända organisationer att de rimligen inte kommer försvinna. Vad gäller ren funktionalitet så erbjuder de även statistik över länkanvändandet för de som är intresserade av detta (via formatet http://goo.gl/F0pE+ som nämndes i tidigare post).

En notis vad gäller länklängd är att goo.gl, som troligen har hundratals miljoner adresser sparade, ändå bara har 5 tecken i sina förkortade ID-nummer, vilket byturl.se redan genererar. När tanken är just att få så kort URL som möjligt så är längden hårdvaluta.

Driftsäkerheten samt även eventuellt URL-längden beroende på hur algoritmen skalar är saker som potentiellt kan få användare att välja andra tjänster. Det vore nog bra att åtminstone "garantera" länkarnas livslängd så länge sidan finns iaf.

Hemsidan funkar nu inte alls för mig,

jag kan varken trycka på "vanlig, avancerad, hjälp" eller skriva in en länk och trycka enter, gör jag något laddas sidan snabbt til byturl.se/# (bara första gången) men allt blir det samma,

på telefonen funkade det för en stund sedan och då tyckte jag att det som stog i "hjälp" var alldeles för dåligt,
om man tänker sig att någon som inte vet nånting om sånt här trycker hjälp och så står det bara "skriv in din långa url här och tryck xxxxx" (och då kan man inte ens se någon knapp som man skulle kunna trycka på utan det måste ju vara enter man ska trycka)

och nu funkar det heller inte på mobilen men tidigare och nu också är det så på mobilen att första gången jag laddar sidan så är den i "dator läge" och laddar jag om sidan så optimeras den efter mobilen och blir väldigt ihop tryckt och då står det under rutan hjälp?avanceradvanlig utan mellanrum,

ber om ursäkt för dålig svenska..

Funkar inte alls.

Använd Arial eller helvetica och gör den mindre, inget mer krävs

Du borde också fundera på att köpa domänen byt.nu eller dylikt, såsom bit.ly (vilket du säkert kollat in)
Skulle också vara bra om du skrev något om hur länge du sparade förkortningarna, så att man eventuellt törs ha med dem på en powerpoint.

Måste säga att typsnittet på loggan inte är speciellt snyggt eller ger ett seriöst intryck.
Annars helt ok!

Kan säga att det blev grymt bra med "alias", tummen upp på den! (tänkte igentligen bara passa på och bumpa upp tråden)

Woho, det var snabbt fixat! (Testa min länk nu som va exempel) ;D

Den fungerar enbart att förlänga URL's i formatet "http://byturl.se/xxxx". Det vill säga, skriver man in byturl-urlen i formaten "http://www.byturl.se/xxxx" eller "www.byturl.se/xxxx" så fungerar det inte att förlänga utan man får upp "URL hittades inte".

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>

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.

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

Ser jättebra ut nu! Skall självklart rekommenderas till alla jag känner!

Din "förläng URL" fungerar inte om man skriver in "www.byturl.se/xxxx", eller "http://www.byturl.se/xxxxx".

Du får nog arbeta lite mer på att anpassa sidan för mobiler, den anpassas inte alls på min Lumia 920.

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.

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

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

http://byturl.se/itlxa+

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

• http://bit.ly/VDcn+

• http://goo.gl/F0pE+

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.

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!

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.

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!

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.

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

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

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.

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.

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.

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

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

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

http://d.pr/i/WP3B