הוסטס - פורום אחסון האתרים הגדול בישראל - הצגה

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - הצגה | כמה עבודות חיתוך שלי (https://hosts.co.il/forums/showthread.php?t=84850)

Y0gev-L

09-09-10 00:05

הצגה | כמה עבודות חיתוך שלי

http://artech.info
http://artech.info/works/SyWebs
http://artech.info/works/NetoGame
http://artech.info/works/Ultra-Serv

כל העבודות הינם עבודות חיתוך בלבד, העיצובים אינם שלי, אנא לא להתייחס אליהם.

BlueNosE

09-09-10 14:56

נחמד מאוד, החיתוכים עצמם חלקים וברמה גבוהה.

2 הערות לגבי זה: השימוש בmarquee יכול להתחלף בסקריפט של זה. אפשר עם jQuery או אפילו משהו יותר פשוט... בשביל ליצור תקינות של העמוד.
דבר נוסף, הייתי ממליץ לשמור את התמונות באמצעות הפונק' "Save for Web & Devices". זה יקטין את התעבורה ואת זמן טעינת העמוד.

בהצלחה ;)

Y0gev-L

09-09-10 16:27

אני יודע לגבי הmarquee ויש לי את הקובץ, פשוט כשקידדתי את Ultra הקובץ לא היה בהישג ידי..
ולגבי הפוטושופ החיתוך, אני עושה ככה, אבל אני שומר את זה כ png - 24

WebProject

10-09-10 09:28

הסתכלתי רק על עבודה אחת באופן פרטני -
www.artech.info/works/NetoGame/

ויש לי הערה, אמנם זה לא כל כך רציני אבל זה כן יראה אסטתי יותר - לקראת סוף הקוד יש לך כמה תגים שהוספת להם תכונת style, במקום זה פשוט תוסיף להם class דרך קובץ CSS - באתרים גדולים יותר זה יכול להשפיע יותר כי גודל הקובץ גדל ואיתו גם הכמות תעבורה .

סך הכל עבודות טובות, תמנע משימוש בmarquee כי הוא הוצא מהתקן לפני כמה שנים טובות - ומעבר לכך - תשתדל להוריד את גודל התמונות ולפעמים להחליף חלקים שאפשר בעזרת CSS ולא תמונה, זמן הטעינה ירד בהתאם

Y0gev-L

10-09-10 13:22

תודה, אבל בכלליות יותר, יש לי עתיד? :]
אני מקודד קצת יותר מחצי שנה..

WebProject

10-09-10 16:36

נתחיל מזה שאין דבר כזה 'מקודד' -> קידוד - encoding, אתה מדבר על חיתוך ומיפוי אתרים

וכן, אתה עובד נקי ויפה, אין יותר מדי לאן להתקדם מפה, בהצלחה בהמשך

Y0gev-L

10-09-10 17:07

אוקיי, צודק פשוט אני רגיל ולא כולם מבינים מה זה חיתוך אתר.
אני חושב שאני אתחיל ללמוד JS, AJAX, וקצת JQUERY זה יביא לי יתרונות על פני חותכי אתרים אחרים. וPHP & SQL אני יודע ברמה חלקית.
תודה רבה, חג שמח ושנה מעולה!

AlmogBaku

11-09-10 21:20

אני עם טל- סלייסינג(או חיתוך בעברית)! קידוד זה ממש בדיחה.

לגבי העבודות, הם טובות אבל לא pixel perfect. חסר פאדינגים במקומות מסויימים, סקרולרים בורחים, אי סימטריות וכו'.. רואים שאתה יודע לעשות את העבודה, אבל זה לא פיקסל פרפרקט, אל תחפף. הפרטים הקטנים והטופוגרפיה הכי חשובים.

Y0gev-L

12-09-10 16:13

תודה רבה, אני אשמח אם תוכל לתת לי עוד כמה עצות בפרטי, הרי ידע זה כוח, לא?
תודה רבה, שבוע מצוין ושנה מעולה!
יוגב. :]

Erez | TrustMedia.co.il

12-09-10 16:38

מבחינת קוד הכל אחלה, אבל יש בעיה נורא רצינית, נגיד בקידוד הבא:
http://www.artech.info/works/SyWebs/
הבלוק המרכזי של התוכן לא יכול להתארך מעבר למה שיש עכשיו, כי אם תסתכל בתמונת רקע שלו:
http://www.artech.info/works/SyWebs/images/block.png
חתכת את כל הבלוק לתמונה אחת במקום לחלק עליון וחלק תחתון, ככה התמונות גם ישקלו פחות וגם הבלוקים יוכלו להתארך לפי כמות התוכן ולא להשאר קבועים
והנה בחיתוכים נוספים:
http://www.artech.info/works/NetoGame/
http://www.artech.info/works/NetoGam...es/welcome.png
http://www.artech.info/works/NetoGam...es/p_basic.png

http://www.artech.info/works/Ultra-Serv/
http://www.artech.info/works/Ultra-S...es/welcome.png

~The_Sultan~

12-09-10 20:16

קידוד גם רלוונטי לתחום הזה ("רישום קודים"): http://milon.walla.co.il/ts.cgi?tssc...F7%E9%E3%E5%E3
הסתכלתי בקוד מקור של הקישור הראשון - קידוד מצויין: קידוד DIVים מסודר עם ID רלוונטי, אתה עובד עם כותרות ו-UL וכו' כמו שצריך מה שעושה את הקידוד אפילו טוב יותר למנועי חיפוש. משהו אחד שלא אהבתי זה את השורה הזו:
<h1><span style="color: #ffbd00;">פתרונות עיצוב</span> </h1>
שיכולת פשוט לעצב את ה-H1 עם ה-color הזה מראש וככה היית יכולה להיפטר מתגית ה-span המיותרת (לדעתי) הזו.. גם אם רק פה אתה צריך את הערך color הזה, יכולה להגדיר ב-CSS משהו כמו div#welcome h1 בשביל לסדר את זה.
בכל מקרה הרשמת אותי..

AlmogBaku

13-09-10 00:19

ח'ברה בנוגע לנושא של הקידוד שמידוד. יש מושגים מוכרים בתחום. אי אפשר סתם לקחת מילה עם משמעות קרובה ולהדביק לה משמעות. זה מושג טכנולוגי.. אני יכול לקרוא לזה גם הקלדה או קלייונט מהמילה קליינט(קליינט סייד) אבל מה הרעיון? בכל העולם נהוג לקרוא לזה בתחום סלייסינג. בעברית חיתוך.

עקשנים? לכו על זה!

~The_Sultan~

13-09-10 07:24

קלייונט בכלל לא יהיה קשור. בעיקר כי אין מילה כזו ואתה לא יכול סתם לבוא ולהמציא עצמים. לפותח האשכול עוד משהו ששכחתי, תנקה את האתרים שלך מהגדרת ה-BOM..

Y0gev-L

13-09-10 15:09

אני לא מבין, אז אתה אומר בעצם לחתוך את הכותרת לבד ואת הבלוק לבד?

Erez | TrustMedia.co.il

13-09-10 15:30

ציטוט:

נכתב במקור על ידי Y0gev-L (פרסם 779093)

אני לא מבין, אז אתה אומר בעצם לחתוך את הכותרת לבד ואת הבלוק לבד?

חלק עליון לבד, חלק תחתון וחלק אמצעי שישתכפל

AlmogBaku

13-09-10 21:24

כנ"ל לגבי ה"טאב". הוא לא יכול להיות כחלק מהרקע! הוא צריך להיות גנרי.

Y0gev-L

14-09-10 14:54

ציטוט:

נכתב במקור על ידי WiPi (פרסם 779097)

חלק עליון לבד, חלק תחתון וחלק אמצעי שישתכפל

מצוין, אני אשתמש בזה.
אבל זה לא גורם לתמונות להטען יותר לאט? אגב, לשמור בפורמט PNG או JPG?

Erez | TrustMedia.co.il

14-09-10 15:00

ציטוט:

נכתב במקור על ידי Y0gev-L (פרסם 779250)

מצוין, אני אשתמש בזה.
אבל זה לא גורם לתמונות להטען יותר לאט? אגב, לשמור בפורמט PNG או JPG?

מה אתה מעדיף, עוד עשירית שנייה בטעינה וקידוד שאפשר לרשום בו תוכן כמה שרוצים והבלוקים יתארכו, או טעינה רגילה אבל יהיה לך מגבלת תוכן בבלוק?
ואני שומר בPNG כדי שתהיה איכות טובה יותר, אבל גם JPG טוב

Y0gev-L

14-09-10 16:59

אוקיי, אם זה פורטפוליו או אתר קטן אני אשמור בPNG אם לא כנראה שנלך על JPG.
בכ"מ תודה רבה.

~The_Sultan~

15-09-10 18:50

וויפי לא מדובר ב-10 מאיות מדובר בהרבה יותר. במיוחד אם שומרים ב-PNG ולא ב-JPG, ש-PNG בכלל לא דוחס את התמונה לעומת JPG. אני בכלל הייתי הולך על GIF אם זו לא תמונה שהאיכות שלה תיפגע בפורמט הזה. JPEG אני שומר על איכות 80 בדר"כ.

Erez | TrustMedia.co.il

15-09-10 19:48

ציטוט:

נכתב במקור על ידי ~The_Sultan~ (פרסם 779408)

תלוי איך אתה שומר את זה, אם אתה משתמש בsprites ככה שבמקום 3 תמונות יש 2 (אחת של חלק עליון+תחתון, ואחת אמצעית), וגם מכווץ את התמונות אז אין סיבה שזה ישפיע יותר מדי(אולי הגזמתי בעשירת שנייה, אבל זה לא משהו שירגישו ממש)

BlueNosE

15-09-10 20:19

דווקא בתחום של תמונות אני מסכים עם הסולטן. זמן הטעינה יכול להיות קריטי לפעמים וצריך לבצע פשרות.. גם אני שומר על JPEG 80 ברוב האתרים, ואפילו GIF כשאין איבוד צבעים/איבוד הצבעים מינימלי

AlmogBaku

16-09-10 02:26

לא משתמשים בGIF נקודה. האיכות ירודה והשקיפות לוקה בחסר. אם כבר אז JPEG אבל גם..
אנחנו משתמשים רק בPNG.
עושים קאשינג כמו שצריך והכל עובד יפה

http://www.bradleyandcompany.com/blo...s-gif-jpg-png/

BlueNosE

16-09-10 09:36

איזו איכות ירודה יש לGIF אם בתמונה פחות מ-256 צבעים? זה ממש לא נכון.

להשתמש רק ב-PNG זה נחמד, אבל כשאתה חושב על תעבורה ומהירות טעינה ולא על "יואו איזה יופי הצל הזה יוצא כששומרים ב-PNG", לפעמים GIF/JPEG לוקחים. מה גם, שאני אישית התרגלתי להימנע מ-PNG כיוון שIE החל לתמוך בו בצורה נורמלית רק מגירסא 7 (ואני מתכנת עוד מהרבה לפני). השיקול הזה אמנם לא רלוונטי לרוב האנשים, אבל עוד יש מערכות שמשתמשות בIE6 (ברוב המקומות הציבוריים, למען האמת).

מעבר לזה, ברור שזה כיף לעבוד עם PNG והרבה יותר נוח, אבל מעבר לנוחות בבנייה הראשונית - מה יוצא לך מזה הלאה? (אלא אם אתה באמת צריך את היכולות של PNG בשקיפות, שזה ברור למה שום פורמט לא יכול להתחרות איתו)

עריכה: ובוא אני אצטט לך קטעים נבחרים מהמאמר ששלחת, ההחלטה בידיים שלך...

ציטוט:

More compression means smaller, faster loading images on your website. This is good. The bad is that too much compression means the quality of the image will suffer as the level of compression is increased. The key is to select the right amount of compression so that the image still looks good, while the size of the image does not slow how fast the web page renders. In short how much to compress an image in Photoshop really is a balancing act.

The drawback of PNG-24 is a file size that is significantly bigger than images created using JPG or GIF. For this reason PNG files are saved as PNG-8 unless there is a need for saving as a PNG-24.

במילים אחרות: יש חסרון ל-PNG-24 לעומת JPEG מבחינת גודל התמונה, וPNG-8 לעומת GIF זה פחות או יותר אותו דבר. אז למה PNG, אם אין לך משהו ספציפי לעשות איתו?

AlmogBaku

16-09-10 22:12

ציטוט:

נכתב במקור על ידי BlueNosE (פרסם 779482)

קודם כל המאמר הזה מקיף, אבל מבחינה מעשית לבדוק כל פעם אם צריך GIF או JPEG או PNG זה כאב ראש.
ואני יכול להגיד לך שהרבה מקרים יש אצלנו לפחות צורך שקיפות- כך שזה הרבה פחות כאב ראש.
עושים קאשינג וספרייטים כמו שצריך והמצב טוב יותר.

Y0gev-L

17-09-10 11:14

אוקיי קצת סדר בעניינים, אם רוצים שקיפות זה PNG.
אם רוצים טעינה מהירה לוקחים GIF בתנאי שזה לא פוגע בצבעים.
אם רוצים טעינה מהירה וה GIF פוגע בצבעים אז לוקחים JPG.
אני צודק?

BlueNosE

17-09-10 12:31

גם לא בדיוק, אם רוצים שקיפות של פיקסל אחד לפעמים עדיף GIF, אם רוצים שקיפות ALPHA משתמשים תמיד בPNG ולעיתים רחוקות PNG-24 משתלם מ-JPEG. כל מקרה לגופו, ואם אין לך כוח לבדוק - אל תשתמש בPNG-24 אם אין לך סיבה מיוחדת (זו דעתי לפחות).

RS324

17-09-10 12:47

אני אישית משתמש הרבה ב PNG
בכל מקרה , מעניין שאף אחד לא הזכיר שפוטושופ שומר הרבה מאד האדרים בתוך התמונה שלפעמים מגיעים למשקל של עד 20 אחוז מהמשקל של התמונה
ואת זה אפשר לבטל בקלות...

AlmogBaku

17-09-10 16:09

מעניין לגבי הפוטושופ. אשמח אם תרחיב או תפנה לקישור.. לא ידעתי את זה

אני חושב בכל מקרה שהקיצור ההולם ביותר הוא "אם אתה רוצה כאב ראש תתחיל לחשוב כל פעם איזה סוג לשמור".

ronka

18-09-10 13:34

ציטוט:

נכתב במקור על ידי WiPi (פרסם 779254)

אתה יכול לתת דוגמא לאיך לבצע את זה? לחלק את הקופסא ל3 DIVים?

astricks

18-09-10 17:37

@ronka
אתה יוצר אלמנט ובתוכו שלוש אלמנטים אחרים (לצורך הדוגמא, 3 דיבים), כל דיב בשורה משלו כאשר את שם דגש על margin 0 שלא תהיה הפרדה ביניהם

AlmogBaku

18-09-10 20:53

ציטוט:

נכתב במקור על ידי astricks (פרסם 779762)

התכוונת PADDING, המרג'ין לא ממש משנה

Erez | TrustMedia.co.il

18-09-10 21:24

ציטוט:

נכתב במקור על ידי RS324 (פרסם 779661)

אתה יכול לקשר למקור שמאמת את זה? ובכל מקרה איך אפשר לבטל את זה?

Y0gev-L

19-09-10 15:15

ציטוט:

נכתב במקור על ידי WiPi (פרסם 779813)

אתה יכול לקשר למקור שמאמת את זה? ובכל מקרה איך אפשר לבטל את זה?

מצטרף לשאלה.

ronka

19-09-10 19:30

ציטוט:

נכתב במקור על ידי astricks (פרסם 779762)

כמו שחשבתי .. שונא להשתמש בהרבה דיבים |Lol|

Y0gev-L

20-09-10 13:48

ציטוט:

נכתב במקור על ידי ronka (פרסם 779971)

כמו שחשבתי .. שונא להשתמש בהרבה דיבים |Lol|

כנ"ל, זה מרגיש כאילו העמסת על החיתוך..

חג סוכות שמח :]

daMn	20-09-10 22:01

כל הבלוקים שלך ממה שראיתי מורכים ממאפיין margin עם פרמטרים מטורפים כאלה

קוד:

margin: -5px 570px 0px 0px;

אם יש לך ערך margin,padding שעולה על 20-30 px, כדי שתבדוק אם יש דרך טובה יותר לבצע את מה שאתה מנסה.
לא עובדים ככה,
תקרא על float

Y0gev-L

22-09-10 09:02

אני float מצוין, אבל הבעיה שלא מצליח לי, ברגע שאני עושה FLOAT זה כן מעלה לי את הבלוק ללמעלה אבל הוא נמצא ישר על הבלוק הקודם וזה הורס ועדיין הפרמטרים יהיו קצת מוגזמים..

BlueNosE

22-09-10 13:27

הפתרון: style='clear:both;' על הבלוק שקופץ למעלה

Y0gev-L

22-09-10 15:01

לא, לפני סגירת דיב הmain (הדיב הראשי שמחזיק את כל האתר) אני שם דיב וסוגר, ונותן לו את הסטייל הזה..
אבל הבלוק עולה לי על הבלוק הקודם..

לדוגמא:
(ככה זה אמור להיות):
[בלוק I][בלוק II]

(לפני הFLOAT)
[בלוק I]
[בלוק II]

(אחרי ה FLOAT]
[בלוק[בלוק II] I]

אם אתה מבין אותי, הבלוק II עולה על II בFLOAT.. ^^

כל הזמנים הם GMT +2. הזמן כעת הוא 04:11.

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד