20 כלים מבריקים לעיצוב ופיתוח אתרים

מְחַבֵּר: Peter Berry
תאריך הבריאה: 19 יולי 2021
תאריך עדכון: 11 מאי 2024
Anonim
The Groucho Marx Show: American Television Quiz Show - Hand / Head / House Episodes
וִידֵאוֹ: The Groucho Marx Show: American Television Quiz Show - Hand / Head / House Episodes

תוֹכֶן

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

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

כלי נישה

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

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

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


  • קרא כאן את כל התכונות הקשורות לכלי העיצוב שלנו

01. בוגרד

מחיר: חינם- $ 99 לחודש עבור 25 חברים

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

BugHerd מספק דרך מסודרת ומאורגנת לטפל במשוב, תיקוני באגים ובקשות תכונות - ללא תקורת הדוא"ל. כלול .js פשוט ומבקרים באתר מקבלים כפתור משוב. אורחי הפרויקט יכולים להגיש באגים ובקשות, חברים יכולים לנהל את כל השבנג מממשק ידידותי ואינטואיטיבי. התקדמות באגים מדוח לפעולה ועד לסיום עדיפה בהרבה על המצב האלטרנטיבי: הצטברות הדרגתית שבסופו של דבר תציף.


הוספת משימות קלה במיוחד עם BugHerd

02. פונטלו

מחיר: חינם

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

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

03. פרוטו.יו

מחיר: חינם - $ 49 לחודש

כלי אבות טיפוס טוב אמור לאפשר לכם לעלות מהר ולפעול אך גם לספק מספיק עומק שתוכלו לשכלל את הרעיונות שלכם עד כדי כך שהם לא זקוקים לכם כדי להישען על כתפו של משתמש ולהגיד דברים כמו "פשוט תתעלמו מקטע זה לעת עתה" . Proto.io עושה בדיוק את זה.

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


04. יסוד 3

מחיר: חינם

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

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

המהדורה האחרונה מציגה מבנה רשת פשוט ועושה את הקפיצה ל- SASS / Compass, מה שמאפשר גישה גמישה יותר לסטיילינג. למרות שזה הגיוני לעבוד עם SASS אם אתה מתכנן להסתכל על קרן 3, ההורדה הניתנת להתאמה אישית נועדה כדי לאפשר גם גרסת CSS ישרה.

5. Dreamweaver CS6

מחיר: מ- 344.32 ליש"ט

פריסות נוזלים, מעברי CSS3 ותמיכה משופרת ב- PhoneGap מובילים את החיוב בעדכון האחרון למגוון הכלים של עיצוב אתרים של אדובי. אין להכחיש ש- Dreamweaver CS6 פוגע בקרקע.

הבעיה שתמיד היה ל- Dreamweaver היא הקושי לאזן בין פונקציונליות לרוחב עם הצורך להרחיק מהדרך של המשתמש. CS6 למעשה מצליח לזה די טוב.

פריסות הנוזל החדשות שימושיות אך למעשה הן התכונה החדשה הכי פחות משכנעת. ההוקרה הזו כנראה מגיעה למעברי CSS3, שכיף לחקור בעזרת Dreamweaver.

06. Cloud9 IDE

מחיר: חינם / $ 12 לחודש פרימיום

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

עורך הקוד מאוד שמיש. השלמת קוד, עצי מסמך גרור ושחרר חכמים, שילוב FTP וכל זה, אבל הקישוריות היא שהופכת את Cloud9: אם צוות פורץ את אותו הקובץ, כל משתמש מזוהה על ידי הסמן הצבעוני שלו. מודול צ'אט סוגר את לולאת המשוב.

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

07. סנצ'ה טאץ '2

מחיר: חינם

אין להכחיש שמכשיר הסלולר / המגע שינה את פיתוח האינטרנט לתמיד. זה עולם רחב יותר והטרוגני יותר וכולם רוצים חתיכת פעולה. Sencha Touch 2 שואף להכניס את החלום הזה להישג ידם של מפתחי HTML5.

ממשק API משופר, מסמכים וחומרי הדרכה חזקים יותר, כמו גם שילוב מקומי מהודק עם מכשירים מובילים רבים הופכים את Sencha Touch 2 למתמודד רציני למסגרת הפיתוח הניידת הנבחרת. ישנה עקומת למידה, אך מכיוון שסנצ'ה מכוון להיות חבילה מקצה לקצה, לפחות יש רק מדרון אחד לטפס עליו.

08. אדג'י אדג 'בדוק

מחיר: חינם

אפליקציה קטנה ונהדרת למפתחים ניידים, שבעבר נקראה Adobe Shadow, שמקצצת כמות עצומה מתהליך העיצוב. פשוט התאם את המכשירים שלך (Android ו- iOS) למכונה הראשית שלך. ואז האתרים שאליהם אתה גולש מהדהדים ישירות לכל מכשיר מחובר.

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

09. סוגריים

מחיר: חינם

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

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

ואם תרצה חוויה מתוגברת, כעת תוכל להירשם לענן היצירתי של אדובי ולקבל קוד אדג '. בנוי על סוגריים, Edge Edge מוסיף כמה תכונות מצוינות לטיפוגרפיה ו- PhoneGap.

10. מודרניזר 2.6

מחיר: חינם

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

גרסה 2.6 של כלי איתור יכולות הדפדפן הפופולרי מעדכן גם כמה תלות, אך הנפח הגדול ביותר של זיהוי חדש מגיע מהקהילה. הרשימה עצמה עושה קריאה מעניינת: css-backgroundposition-xy, css-subpixelfont, svg-filters, ויברציה ...

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

11. טרלו

מחיר: חינם

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

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


12. TypeCast בטא

מחיר: חינם בזמן בטא

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

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

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


13. רשת רשת

מחיר: 12 דולר לערכה / 18 דולר לחודש

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

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


14. יאומן

מחיר: חינם

נראה כי פיתוח אתרים מודרני מתלכד סביב מספר פרויקטים וכלים קטנים של קוד פתוח. כמו Bootstrap, Compass ו- PhantomJS. כל חבילה שתורמת היבט אחד לעבודה חדשה - יכולה להיות בדיקות, מסגרות CSS או אוסף קוד.

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

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

15. אמט

מחיר: חינם

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

החל את התחביר הפשוט: 'p.class_name' נותן לך 'p> / p>'. הקינון פשוט: 'div> p.class_name' הופך ל'div> p> / p> / div> '. אתה מקבל את התמונה. אתה יכול אפילו להטמיע טקסט של לורם שזיף, ליצור רשימות וברגע שאתה מרגיש את הדברים, ליצור קיצורי דרך ומבני קטע משלך.

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

16. טקסט נשגב 2

מחיר: $59

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

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

שפות רבות נתמכות, כולל C ++, Clojure ו- Markdown, תכונות עריכה כמו כניסות שקוד מתמוטט מטופלות יפה ו- Minimap מעניק לך ניווט מהיר בעמוד.

17. WebMatrix של מיקרוסופט 2

מחיר: חינם

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

WebMatrix 2 הוא IDE נהדר לעבוד איתו, ללא קשר לשפה שאתה מעדיף או למסגרת שאתה פועל בה. זה נקי למראה, מהיר לשימוש, מועיל אך לא פולשני. ואם במקרה אתה חסיד .NET, אז זה יקל על חייך.

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

18. PhoneGap 2.0

מחיר: חינם

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

PhoneGap 2, המהדורה הראשונה מאז אדובי השתלטה על המושכות, היא התקדמות משמעותית משתי סיבות לפחות. הראשון הוא הגידול הפשוט בפלטפורמות שהגיעו אליהם, כולל טלפון Windows 8. השנייה היא הזמינות של PhoneGap Build, המעניקה למפתחים נקודת קומפילציה אחת המסוגלת להגיע לכל פלטפורמה. לא פלא שיש כל כך הרבה אפליקציות.

19. פיירפוקס 18

מחיר: חינם

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

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

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


20. פוטון

מחיר: חינם

זה פרויקט מהנה. פוטון יוצר אפקט תאורה פשוט עבור אלמנטים DOM המוצגים בחלל תלת ממדי. זה מתאפשר על ידי מאפיין ה- Transform החדש של CSS הניצב. או כמו שזה ידוע יותר נכון המאפיין '[קידומת הספק] - transform'.

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

אהבתי את זה? תקרא את זה!

  • כיצד לבנות אפליקציה
  • הורד את הגופנים הטובים ביותר בחינם
  • גופני האינטרנט החינמיים הטובים ביותר עבור מעצבים
  • גלה מה הבא למציאות רבודה

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


פופולרי הודעות
כיצד להוריד בחינם את Boot Camp ולהתקין את Windows 10 ב- Mac
קרא עוד

כיצד להוריד בחינם את Boot Camp ולהתקין את Windows 10 ב- Mac

כולם יודעים שמחשבים ניידים של אפל פועלים על מערכת ההפעלה שלהם. איזה MacO. אך להיות אחד ממערכת ההפעלה הפופולרית והקלה ביותר לשימוש. לחלונות יש אטרקטיביות טבעית משלה. במשך זמן רב האמינו כי המוצר של אפל ...
3 מסירי סיסמאות ה- VBA הטובים ביותר בשנת 2020
קרא עוד

3 מסירי סיסמאות ה- VBA הטובים ביותר בשנת 2020

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

נפתחה שכחתי סיסמת טאבלט - אין עוד מסך נעילה

הטאבלט שלי ננעל; שכחתי את הסיסמה לטאבלט מכיוון ששיניתי את קוד קוד הטלפון ושכחתי לציין את הסיכה. אתה יכול להראות לי דרך קלה לפתוח אותה? " שכחת סיסמת טאבלט היא אחד הדברים המעצבנים ביותר שאפשר להתמו...