به نظر شما برای طراحی این دیاگرام بهترین روش چیه !؟

بپرسید

0

{{ digitTrunc(content.likes) }}

سلام به دوستان طراح وب.در اداره از من خواستند که یک سری ارتباطات اون ها رو به صورت شکیل با Power Point به صورت اسلاید ایجاد کنم.من هم جوگیر شدم و گفتم چرا اسلاید و من طراحی وب بلدم و قدیما کارکردم و یه چیز شیک درست میکنم.اونها میخوان ارتباطات یه سری سایت و شعبه رو روی نقشه نشون بدن.من اول خواستم از Arc GIS for Web استفاده کنم.ولی دیدم چون GIS کار نکردم و کار با نقشه در وب برام سخته تصمیم گرفتم همین طوری ساده باشه ولی کمی Interactive باشه و کمی صفحه پویا و متحرک باشه.شکل یک دیاگرام از نقاطی که اونها به من دادند که درست کنم ، اینه :

سلام به دوستان طراح وب.در اداره از من خواستند که یک سری ارتباطات اون ها رو به صورت شکیل با Power Point به صورت اسلاید ایجاد کنم.من هم جوگیر شدم و گفتم چرا اسلاید و من طراحی وب بلدم و قدیما کارکردم و یه چیز شیک درست میکنم.اونها میخوان ارتباطات یه سری سایت و شعبه رو روی نقشه نشون بدن.من اول خواستم از Arc GIS for Web استفاده کنم.ولی دیدم چون GIS کار نکردم و کار با نقشه در وب برام سخته تصمیم گرفتم همین طوری ساده باشه ولی کمی Interactive باشه و کمی صفحه پویا و متحرک باشه.شکل یک دیاگرام از نقاطی که اونها به من دادند که درست کنم ، اینه : 
||http://tosinso.com/files/get/01080922-e3c0-4fcd-8a70-81e640654e2b||

من هم به کمک HTML و CSS و کتابخانه jQuery فقط یک سایت از اون دیاگرام رو طراحی کردم.میخوام اگر کاربر بر روی اون سایت مخابراتی کلیک کنه ، بره به صفحه دیگه و محل جغرافیایی اون سایت رو روی نقشه نشون بده .سر سوزن ذوقی که داشتم روی طراحی یک نماد برای سایت مخابراتی (دکل مخابراتی)گذاشتم و کلی هم دردسر داشت.خواستم بدونم راه سریعتر و بهتری وجود نداره !؟ اصلاً راه رو درست رفتم !؟ باید باقی نقاط رو هم درست کنم و برای فلش ها هم یه فلش متحرکی چیزی |مثل این درست کنم !؟::https://carto.com/learn/guides/styling/animating-maps-with-point-data|
من کدهایی که برای این دکل مخابراتی زدم اینها هستند.این که سریعترین راه رو میخوام علت اینه که من کارهای برنامه نویسی رو بوسیدم گذاشتم کنار.و چون جوگیر شدم و همچنین دستور رییس کل واحدمون بود تصمیم گرفتم دوباره طراحی وب انجام بدم.وگرنه هیچ وقت سراغ طراحی وب نمیومدم.چون که معتقدم یا برنامه نویسی یا شبکه.نمیشه هر دو تارو یادگرفت و انجام داد.من الان میخوام زودتر تموم شه سراغ مطالعات شبکه ام برم.لطفاً کمک کنید.

خودتون استادید.ولی میگم برای کسانی که مثل من دانششون کمه.اگر میخواهید نتیجه کدها رو توی مرورگر ببینید.باید این کدها رو توی یه فایل htm ذخیره کنید و نیز کتابخانه jquery-1.7.2.min.js را کنار فایل html بزارید.

<htm>
<html>
<head>
	<meta charset=UTF-8 />
	<style type=text/css>
		.st1{fill:#00FFFF;}
		.station:hover{cursor:pointer}
		.station{fill:#ffffff} 
		.station-name{font-family:'b titr';font-size:38px;fill:#ffffff}
		body{background: #002000;}
	</style>
	<script type=text/javascript src=jquery-1.7.2.min.js></script>
	<script type=text/javascript>
	s=true;
		window.onload=function()
		{
			
			setInterval(f,2000);
		}
		
		function f()
		{
			$(#r6).hide(1000);
			$(#r6).show();
			$(#r12).hide(1000);
			$(#r12).show();
			$(#r5).show();
			$(#r5).hide(1200);
			$(#r11).show();
			$(#r11).hide(1200);
			$(#r4).show();
			$(#r4).hide(1400);
			$(#r10).show();
			$(#r10).hide(1400);
			$(#r3).show();
			$(#r3).hide(1600);
			$(#r9).show();
			$(#r9).hide(1600);
			$(#r2).show();
			$(#r2).hide(1800);
			$(#r8).show();
			$(#r8).hide(1800);
			$(#r1).show();
			$(#r1).hide(2000);
			$(#r7).show();
			$(#r7).hide(2000);
		}
		
	</script>
</head>
<body lang=fa dir=rtl>

<svg version=1.1 id=Layer_1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px viewBox=0 0 1920 1080 style=enable-background:new 0 0 1920 1080; xml:space=preserve>
<g class=station id=station onclick=stationStatus()>
	
	<circle class=st1 cx=960.8 cy=388.7 r=8/>	
	<rect x=957.9 y=396.7 width=5.3 height=18.5/>
	<path d=M960.8,399.3c-5.9,0-10.6-4.8-10.6-10.6s4.8-10.6,10.6-10.6c5.9,0,10.6,4.8,10.6,10.6S966.7,399.3,960.8,399.3zM960.8,383.4c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C966.1,385.8,963.7,383.4,960.8,383.4z/>
	<g id=r>
		<rect id=r1 x=976.8 y=385.7 class=st1 width=5.3 height=5.7/>
		<rect id=r2 x=989.6 y=380.7 class=st1 width=5.3 height=16/>
		<rect id=r3 x=1002.7 y=375.8 class=st1 width=5.3 height=25.9/>
		<rect id=r4 x=1016.6 y=370.1 class=st1 width=5.3 height=37.3/>
		<rect id=r5 x=1029.7 y=365.1 class=st1 width=5.3 height=47.3/>
		<rect id=r6 x=1042.5 y=359.8 class=st1 width=5.3 height=58.3/>
		<rect id=r7 x=939.1 y=385.7 class=st1 width=5.3 height=5.7/>
		<rect id=r8 x=926 y=380.7 class=st1 width=5.3 height=16/>
		<rect id=r9 x=913.2 y=375.8 class=st1 width=5.3 height=25.9/>
		<rect id=r10 x=899.7 y=370.1 class=st1 width=5.3 height=37.3/>
		<rect id=r11 x=886.5 y=365.1 class=st1 width=5.3 height=47.3/>
		<rect id=r12 x=873 y=359.8 class=st1 width=5.3 height=58.3/>
	</g>

	<path d=M985.1,510.1l2.2,17l5.3-0.7l-12.9-97.7h4.8v-5.3h-21.3V418h-5.3v5.3h-21.3v5.3h5.2L929,526.4l5.3,0.7l2.2-17l24.3-10.2L985.1,510.1z M967.7,497l14.9-6.3l1.7,13.3L967.7,497z M943.8,454.7l17-7.3l17,7.3l0.6,4.3l-18.9,7.8l-16.3-7.7L943.8,454.7zM944.6,448.5l1-7.7l8.4,3.6L944.6,448.5z M977,448.5l-9.4-4l8.4-3.6L977,448.5z M979.1,464.5l1.6,12.3l-14.8-6.9L979.1,464.5zM952.8,469.5l-11.6,4.8l1.3-9.6L952.8,469.5z M940.4,480.4l18.9-7.8l22.3,10.5l0.3,2.1l-21,8.9l-21-8.9L940.4,480.4z M974.4,428.7l0.9,6.6l-14.5,6.2l-14.5-6.2l0.9-6.6H974.4z M937.3,504l1.7-13.3l14.9,6.3L937.3,504z/>
	<g>
		<rect x=923.5 y=524.7 width=16 height=5.3/>
		<rect x=982.1 y=524.7 width=16 height=5.3/>
	</g>
	<text transform=matrix(1 0 0 1 1030 570) class=station-name>Site Test</text>
</g>

</svg>
</body>
</html>
<htm>

من هم به کمک HTML و CSS و کتابخانه jQuery فقط یک سایت از اون دیاگرام رو طراحی کردم.میخوام اگر کاربر بر روی اون سایت مخابراتی کلیک کنه ، بره به صفحه دیگه و محل جغرافیایی اون سایت رو روی نقشه نشون بده .سر سوزن ذوقی که داشتم روی طراحی یک نماد برای سایت مخابراتی (دکل مخابراتی)گذاشتم و کلی هم دردسر داشت.خواستم بدونم راه سریعتر و بهتری وجود نداره !؟ اصلاً راه رو درست رفتم !؟ باید باقی نقاط رو هم درست کنم و برای فلش ها هم یه فلش متحرکی چیزی مثل این درست کنم !؟

من کدهایی که برای این دکل مخابراتی زدم اینها هستند.این که سریعترین راه رو میخوام علت اینه که من کارهای برنامه نویسی رو بوسیدم گذاشتم کنار.و چون جوگیر شدم و همچنین دستور رییس کل واحدمون بود تصمیم گرفتم دوباره طراحی وب انجام بدم.وگرنه هیچ وقت سراغ طراحی وب نمیومدم.چون که معتقدم یا برنامه نویسی یا شبکه.نمیشه هر دو تارو یادگرفت و انجام داد.من الان میخوام زودتر تموم شه سراغ مطالعات شبکه ام برم.لطفاً کمک کنید.

خودتون استادید.ولی میگم برای کسانی که مثل من دانششون کمه.اگر میخواهید نتیجه کدها رو توی مرورگر ببینید.باید این کدها رو توی یه فایل htm ذخیره کنید و نیز کتابخانه jquery-1.7.2.min.js را کنار فایل html بزارید.

<html>
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		.st1{fill:#00FFFF;}
		.station:hover{cursor:pointer}
		.station{fill:#ffffff} 
		.station-name{font-family:'b titr';font-size:38px;fill:#ffffff}
		body{background: #002000;}
	</style>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	s=true;
		window.onload=function()
		{
			
			setInterval(f,2000);
		}
		
		function f()
		{
			$("#r6").hide(1000);
			$("#r6").show();
			$("#r12").hide(1000);
			$("#r12").show();
			$("#r5").show();
			$("#r5").hide(1200);
			$("#r11").show();
			$("#r11").hide(1200);
			$("#r4").show();
			$("#r4").hide(1400);
			$("#r10").show();
			$("#r10").hide(1400);
			$("#r3").show();
			$("#r3").hide(1600);
			$("#r9").show();
			$("#r9").hide(1600);
			$("#r2").show();
			$("#r2").hide(1800);
			$("#r8").show();
			$("#r8").hide(1800);
			$("#r1").show();
			$("#r1").hide(2000);
			$("#r7").show();
			$("#r7").hide(2000);
		}
		
	</script>
</head>
<body lang="fa" dir="rtl">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g class="station" id="station" onclick="stationStatus()">
	
	<circle class="st1" cx="960.8" cy="388.7" r="8"/>	
	<rect x="957.9" y="396.7" width="5.3" height="18.5"/>
	<path d="M960.8,399.3c-5.9,0-10.6-4.8-10.6-10.6s4.8-10.6,10.6-10.6c5.9,0,10.6,4.8,10.6,10.6S966.7,399.3,960.8,399.3zM960.8,383.4c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C966.1,385.8,963.7,383.4,960.8,383.4z"/>
	<g id="r">
		<rect id="r1" x="976.8" y="385.7" class="st1" width="5.3" height="5.7"/>
		<rect id="r2" x="989.6" y="380.7" class="st1" width="5.3" height="16"/>
		<rect id="r3" x="1002.7" y="375.8" class="st1" width="5.3" height="25.9"/>
		<rect id="r4" x="1016.6" y="370.1" class="st1" width="5.3" height="37.3"/>
		<rect id="r5" x="1029.7" y="365.1" class="st1" width="5.3" height="47.3"/>
		<rect id="r6" x="1042.5" y="359.8" class="st1" width="5.3" height="58.3"/>
		<rect id="r7" x="939.1" y="385.7" class="st1" width="5.3" height="5.7"/>
		<rect id="r8" x="926" y="380.7" class="st1" width="5.3" height="16"/>
		<rect id="r9" x="913.2" y="375.8" class="st1" width="5.3" height="25.9"/>
		<rect id="r10" x="899.7" y="370.1" class="st1" width="5.3" height="37.3"/>
		<rect id="r11" x="886.5" y="365.1" class="st1" width="5.3" height="47.3"/>
		<rect id="r12" x="873" y="359.8" class="st1" width="5.3" height="58.3"/>
	</g>

	<path d="M985.1,510.1l2.2,17l5.3-0.7l-12.9-97.7h4.8v-5.3h-21.3V418h-5.3v5.3h-21.3v5.3h5.2L929,526.4l5.3,0.7l2.2-17l24.3-10.2L985.1,510.1z M967.7,497l14.9-6.3l1.7,13.3L967.7,497z M943.8,454.7l17-7.3l17,7.3l0.6,4.3l-18.9,7.8l-16.3-7.7L943.8,454.7zM944.6,448.5l1-7.7l8.4,3.6L944.6,448.5z M977,448.5l-9.4-4l8.4-3.6L977,448.5z M979.1,464.5l1.6,12.3l-14.8-6.9L979.1,464.5zM952.8,469.5l-11.6,4.8l1.3-9.6L952.8,469.5z M940.4,480.4l18.9-7.8l22.3,10.5l0.3,2.1l-21,8.9l-21-8.9L940.4,480.4z M974.4,428.7l0.9,6.6l-14.5,6.2l-14.5-6.2l0.9-6.6H974.4z M937.3,504l1.7-13.3l14.9,6.3L937.3,504z"/>
	<g>
		<rect x="923.5" y="524.7" width="16" height="5.3"/>
		<rect x="982.1" y="524.7" width="16" height="5.3"/>
	</g>
	<text transform="matrix(1 0 0 1 1030 570)" class="station-name">Site Test</text>
</g>

</svg>
</body>
</html>
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

پاسخ ها به این سوال

پاسخ ها به این سوال

{{ digitTrunc(post.likes) }}

این پست در تاریخ {{ dateString(new Date(post.deleteDate)) }} توسط {{ post.deletedByUser }} حذف شده است.

دلیل حذف: {{ post.deleteReason ?? 'نامشخص' }}

{{ err }}
{{ post.userAchivements.rhodiumAchievements }}
{{ post.userAchivements.platinumAchievements }}
{{ post.userAchivements.goldAchievements }}
{{ post.userAchivements.silverAchievements }}
{{ post.userAchivements.bronzeAchievements }}
{{ timeSince(new Date(post.date)) }} قبل

برای ثبت پاسخ خود در وب سایت وارد حساب کاربری خود شوید
قابلیت ارسال مطلب توسط مدیریت سایت غیر فعال شده است