2010 24 juillet 2010

Bande passante - court et simple!

Je lisais un blog de ​​mes préférés, Nettuts + et trouvé ceci pour être la plus simple explication pour la bande passante. Merci Andrew Burgess!

Lorsque vous cherchez un hébergeur, vous verrez souvent le stockage et la main dans la main de la bande passante. Qu'est-ce que la bande passante? C'est la quantité de données que votre hôte vous permettra de vos visiteurs et de charger et télécharger (cumulativement) dans un mois donné. Supposons que votre site est de 1 mégaoctet de données et de votre bande passante mensuelle est de 10 MB. Au début du mois, vous téléchargez l'ensemble du site, maintenant que vous avez utilisé un Mo de bande passante. Si un visiteur de votre site considère chaque page, ils ont téléchargé 1 Mo de données. Cela signifie que vous pouvez avoir jusqu'à 9 visiteurs au cours du mois (en supposant que chaque point de vue ensemble de votre site). Après cela, votre hébergeur soit pas permettre aux visiteurs, pas plus, ou (plus probablement) vous facturer supplémentaire par Mo. Bien sûr, votre bande passante est quelque chose que vous aurez envie de garder un œil sur, surtout si vous exécutez un site assez populaire ou de faire quelque chose des médias intensifs comme hôte de votre propre vidéo, ou des photos haute résolution). Tout comme le stockage, certains hôtes proposent «illimité» de la bande passante, de nouveau, si vous pensez que vous serez dans une zone grise, connaître les limites ou choisir un hébergeur qui définit le bar où tout le monde peut le voir.

Part

2010 5 février 2010

Conception de sites Web et des piles de polices

Je lisais mon train-train quotidien de blogs de conception et le tutoriel d'aujourd'hui et suis tombé sur cet excellent article sur la typographie web. Avec les polices tant là-bas à utiliser, pourquoi utiliser les mêmes "sûrs" ceux tout le temps dans votre conception? Il ya d'innombrables autres qui viennent norme sur le PC et le Mac.

Voici une couler de l'auteur Amrinder Sandhu de son article de la pile de polices révisée . Les piles de police et les statistiques à la fois pour serif et sans serif sont plus après le saut.

Piles de police révisées

* Certaines des polices, comme: Garamond, Baskerville et Didot ne sont pas aussi lisible sur l'écran comme la Géorgie. N'hésitez pas à faire votre propre sélection.
* En raison de plus petite hauteur x; Caslon, Didot, Garamond, Baskerville et Hoefler Text doit être réglé au minimum de 14 pixels ou plus.
* Lucida Grande, Futura et Tahoma sont mécaniquement obliqua à simuler une italique.
* Genève, Baskerville Old Face et Big Caslon n'a pas gras et en italique. Ils sont truquées pour mettre en gras et en italique.
* Évitez d'utiliser Helvetica Neue Helvetica ou pour le corps du texte, en particulier en dessous 14px.
* Futura, Gill Sans et Franklin Gothic Medium devrait être soigneusement empilés et utilisés en raison de leur poids inhabituel.

Continuer la lecture

Part

2010 4 janvier 2010

Tweener classe pour Flash

Tweener qui dites-vous? Eh bien, je dois te dire après avoir ce nouveau travail que je fais plus de travail de Flash que jamais! Je ne me souviens très bien de leur faire savoir que je ne suis pas en aucune façon un programmeur Flash, et leur réponse a été: «Ne vous inquiétez pas, nous allons vous montrer."

Eh bien un examen rapide 15 minutes l'observation d'une compatriote concepteur au siège social alors qu'il pendant 2 semaines, n'était tout simplement pas assez pour moi. Je suis resté à mes propres intelligence et d'un fichier FLA qu'il a faites à la volée pour m'aider avec le code. C'est juste la façon de commencer qui m'a eu dans un dilemme.

En bref, au lieu d'utiliser le calendrier et Flash est construit dans Classe Tween, Tweener est une autre classe sur elle-même. Cela rend les choses si facile et si vous voulez quelque chose à se déplacer à travers l'écran, tout en faisant tourner et arrête à un endroit précis, puis la facilité en arrière comme sur une bande élastique, Tweener est votre nouvel ami. Vous dites qu'il quoi, quand et où et il le fait pour vous - sans que vous ayez de connaître le langage Action Script et autres du code Flash back-end. Simpliste et envoyé par Dieu.

Tous les documents, fichiers, etc peut être trouvée en cliquant sur l'image ci-dessus Tweener! Ce sont les gars qui ont créé ce script merveilleux: Zeh Fernando (maître d'ouvrage), Nate Chatellier (membre du projet), et Arthur Debert (membre du projet). J'ai trouvé la documentation initiale un peu vague et juste besoin d'un tutoriel en ma-face pour me faire de visualiser la façon de l'initier. Voici deux sites que j'ai trouvé pour m'aider avec ceci:

Amusez-vous, la transmettre et être bien. J'ai besoin de me remettre au travail!

Part

2009 7 décembre 2009

J'aime Jack Daniels donne l'aide de code?

Assis au comptoir d'un nouveau co-travailleur d'aujourd'hui, j'ai remarqué sur son mur était une feuille de triche pour un peu de code HTML. Rien grande je pensais jusqu'à ce que mes yeux gravitait vers le bas de la feuille: Fabriqué par www.ilovejackdaniels.com Hmmmm intrigante effet je pensais!
J'ai regardé le site et a été accueilli par ce message: Le site anciennement hébergé à ILoveJackDaniels.com a, à la demande de l'équipe de marque Jack Daniel a, été déplacé vers le AddedBytes.com nouveau domaine. S'il vous plaît mettre à jour vos liens, signets, carnets d'adresses et des notes mentales. S'il vous plaît adresser vos questions, commentaires ou problèmes à dave@addedbytes.com .
Screen shot 2009-12-07 at 7.04.57 PM

et re-dirigé vers AddedBytes.com où j'ai trouvé toutes sortes de feuilles de triche utiles pour le codage HTML, PHP, CSS, etc. Profitez de concepteurs de sites Web et les développeurs collègues!

cs

AddedBytes.com est le terrain de jeu en ligne de l'enfant Dave ( dave@addedbytes.com ), un développeur web et du marketing Internet de Brighton, sur la côte sud du Royaume-Uni. En Savoir plus sur Dave et bytes Ajouté . Merci Dave!

Part

2009 3 décembre 2009

HIG Ventures annonce un investissement important dans la Triade Digital Media

HIG_Ventures_RGB_logo Un communiqué de presse très excitant à mon nouvel emploi dès aujourd'hui!

HIG Ventures, LLC a annoncé aujourd'hui que l'un de ses affiliés a complété un investissement de croissance significative du capital dans la Triade Digital Media, LLC, une Tampa, Floride basée sur la publicité en ligne société de services.

Fondée en 2004, Triad Digital Media est le leader sur le marché dans la création, gestion et exploitation en ligne des programmes des médias pour principal détaillant et sites e-commerce. Partenaires triade avec de grands sites de commerce électronique tels que Walmart.com, CVS.com, Dell.com et SamsClub.com et d'autres pour les aider à monétiser leur trafic en ligne par l'intermédiaire de placements publicitaires ciblés et le contenu. Triade crée, héberge et gère les sections ciblées de sites Web de chacun des partenaires et utilise contextuelle et le ciblage comportemental pour mettre un groupe démographique très pertinent pour les annonceurs. Approche Triade, qui, en plus du contenu personnalisé comprend des bannières publicitaires et des programmes de parrainage, atteint des clients qui se trouvent dans un secteur très recherché après 'shopping' état d'esprit. Cette offre fournit une grande valeur pour les annonceurs et est unique dans le marché des médias de la publicité numérique d'aujourd'hui.
Continuer la lecture

Part

2009 16 novembre 2009

Conseils Photoshop je suis tombé sur

Screen-shot-2009-11-16-at-11.25.17-AM Voici quelques conseils que j'ai pris récemment pour aider à accélérer la conception et l'aspect patience des processus de production redondantes:
  • Tracez une sélection, puis utilisez le raccourci Shift + CMD + C pour copier avec fusion. Cela prend chaque couche dans le découpage, plutôt que simplement la sélection du calque actuel.
  • Allez dans Fichier> Scripts> Chargement des fichiers dans la pile d'ouvrir un tas d'images et de les placer automatiquement sur des couches individuelles.
  • Avec l'outil Pinceau sélectionnée, appuyez sur les touches [et] pour augmenter ou diminuer la taille du pinceau.
  • Une autre astuce pratique pour les utilisateurs de Mac. Faites défiler les différents modes plein écran en appuyant sur la touche F.
  • Augmenter la taille de votre zone de travail en faisant basculer hors des palettes à l'aide de la touche Tab. Survolez les bords de l'écran pour ramener palettes, qui seront ensuite disparaître à nouveau lorsque la souris est éloignée.
  • Double-cliquez sur la loupe sur l'icône de Zoom pour revenir à 100%.
  • Faites glisser une sélection avec l'outil Rectangle de sélection, mais avant de relâcher le bouton de la souris, appuyez et maintenez la barre d'espace pour déplacer la sélection.
Part

2009 17 octobre 2009

Partir d'un fichier Photoshop en HTML / CSS pour WordPress série

Screen shot 2009-10-17 at 4.59.04 PM Je m'ennuie d'avoir le temps de lire mes blogs quotidiens comme j'avais l'habitude de, mais il est venu dans cette grande série d'un de mes favoris: Chris Coyier, dont un site CSS-Tricks m'a aidé énormément.

Dans la série, il vous emmène du processus de conception de faire une mise en page web, à l'opération de tranchage et de codage - où CSS rend la conception viennent à la vie. Ensuite, il vous emmène à travers le processus d'intégration que le code dans un CMS (content management system) comme WordPress. De cette façon, tout ce que (les messages, les aliments, mises à jour) sont dynamiques et le site entier. J'espère que vous vous abonnez à son flux RSS, consultez ses autres blogs et profiter de la série.

J'ai fait remarquer que je l'espérais il y avait un 4ème dans la série pour nous montrer le processus en préparant et en codant la galerie de photos, formulaire de contact, panier et Twitter. Nous aurons tous à vérifier pour voir!

Partie 1 commence à partir de zéro absolu dans Photoshop, avec seulement quelques ressources fournies par le client. Nous concevons la page d'accueil et de la peau pour le site.

Screen shot 2009-10-17 at 4.47.42 PM

Partie 2 montre comment découper la conception à partir de Photoshop en XHTML / CSS.

Screen shot 2009-10-17 at 4.47.28 PM

Partie 3 montre comment le convertir en un modèle de WordPress.

Screen shot 2009-10-17 at 4.45.57 PM

Part

2009 1 septembre 2009

Anubis débuts sur le blog de ​​Creative imjustcreative!

Il ya quelques semaines un concepteur et blogueur, j'ai été à la suite, ainsi que très actif de Twitter , Graham Smith de imjustcreative , a annoncé une série de rafles logo, il a été l'affichage. J'ai pensé que je prenais un coup d'oeil et j'ai trouvé ces mots:

C'est la partie 10 de la conception du logo Round-Up série. Cette série en cours présente une collection de logos et les marques de la marque, l'auto présenté par un groupe de designers indépendants et folkloriques créative dans de nombreux domaines créatifs. Ces concepteurs utilisent les logos de vendre, de promouvoir, de marque et de commercialiser leurs diverses compétences. Si vous voulez faire partie de cette série conception de logo, puis les détails peuvent être trouvé au bas de ce post.

Eh bien, j'étais excité et se mit au travail en suivant les spécifications de présenter et de rédiger un résumé rapide sur le traitement du logo pour mon entreprise personnelle Anubis Creative . Hey, la publicité gratuite et un lien à partir d'un site de blog bien connu, qui ne serait pas, non?

Après une longue journée au travail, j'ai décidé de vérifier certains e-mail, lire quelques-uns de mes blogs préférés et Retweet quelques informations précieuses pour la communauté du design et ... Eh bien à mon grand étonnement Graham posté une annonce sur les dernières soumissions! Anubis Creative était sur ​​le blog de ​​la partie 11 de couleur vivant . J'étais excité envoyé un texto à un ami et espérant que les gens faire des commentaires sympathiques. Peut-être même un nouveau projet serait formidable, la visibilité est merveilleux et très apprécié - d'où le poster ici parler lui-toi!

Se souvenir cependant que comme Graham l'a dit: "Ce n'est pas une compétition, ce n'est pas un best of, ce n'est pas un qui a le meilleur logo, ce n'est pas une collection de logos que j'ai choisis Ils sont les logos fournis par ceux qui voulaient. faire partie de ce poste. Et un grand merci à tous ceux qui ont soumis. "

Part

2009 18 août 2009

Front-End Développer Conseils pour vivre.

Picture 1 Ce qui suit est un article que j'ai lu sur un blog à propos de développeurs front-end et les pratiques de codage et pensé que je pourrais lui transmettre. Il est par Doug Neiner, un rédacteur en chef à alimenter vos Codage et est président de Design Studio graphique pixel . Il est accro aux nouvelles technologies, et aime particulièrement passer du temps avec WordPress, Ruby on Rails et jQuery.

Ce qui suit est une série de 10 choses à retenir et à pratiquer sur chaque projet de développement web. Je les ai énumérés ici par ordre d'importance que la plupart des étapes se renforcent mutuellement. Si vous ne prenez rien d'autre loin de la lecture, s'il vous plaît prendre Règles # 1 et # 2 à coeur et de les pratiquer. Je pense que la résolution de ces deux problèmes conduira à une meilleure conception et une meilleure mise en œuvre dans les sites Web à travers l'Internet.

1. Une charge suffisante, et puis certains

Surtout dans les périodes économiques difficiles, les entreprises et les particuliers cherchent à réduire les coûts et maintenir les projets à un minimum. En raison de cette connaissance, nous en tant que développeurs web essayez de déplacer à travers chaque phase le plus rapidement possible. De développement de bout avant, cependant, prendre une quantité importante de temps si c'est fait correctement. Pas suffisamment de charge pour que le temps nous mène en tant que développeurs de sauter sur les choses que nous connaissons sont importants juste pour garder le projet dans le budget. La règle est simple ... vous n'aurez normalement pas prendre le temps de bien faire les choses si vous n'avez pas le temps de prendre. La seule façon d'obtenir plus de «temps» en tant que développeur, est de garantir le temps nous faisons des dépenses est correctement indemnisés. À ce moment-là seul peut nos cœurs et les esprits être complètement insérée dans nos projets ... et alors seulement, pouvons-nous prendre le temps de suivre les 9 autres règles.

2. Éduquer Le Designer

Pour ceux qui sont un concepteur / développeur tout-en-une machine, celle-ci devrait être facile. Toutefois, les codeurs qui travaillent avec ou pour un designer ont une responsabilité unique. Comme de nombreux créateurs issus d'un milieu d'impression, il est à vous, le développeur, pour les renseigner sur les possibilités qui s'offrent à leurs desseins. Non ... Je n'ai pas dit de leur faire connaître les plugins jQuery 150 + que vous utilisez, ou vos pensées sur l'utilisation d'un combo UL / LI vs une série de balises A. Je l'ai dit de les éduquer sur les possibilités. Aidez-les à comprendre comment leur conception peut afficher sur différents appareils. Aidez-les à comprendre comment tirer parti des milieux répétitifs et les modèles de tuiles pour réaliser de grands desseins avec la taille de fichier minimale.

Ne laissez pas la créativité uniquement pour le concepteur ou l'autre! Ceci est votre chance de prouver que vous êtes créatif et en trouvant les solutions technologiques parfaits pour répondre aux besoins du concepteur. En leur disant «qu'il ne se fait pas de cette façon» pour chaque demande est un moyen sûr-le-feu pour causer des frustrations des deux côtés. Mettez votre esprit de travailler à trouver des moyens autour des obstacles.

Note: les règles 3 à 10 construire à partir de ces deux premières règles. Certaines des règles suivantes besoin de graphiques supplémentaires à partir du concepteur, et toutes les règles de prendre le temps de suivre. Prendre un engagement à des règles 1 et 2, et les règles restantes seront à la fois du sens et faire de votre produit fini beaucoup mieux.

3. Pensez en couches, non en tranches

Même aujourd'hui, nous utilisons encore l'expression «couper la conception» pour décrire le processus de déplacement d'un dessin à partir d'Illustrator ou Photoshop dans le produit fini HTML / CSS mise en page. Bien que ce soit encore largement précise, son nom dément l'ancien concept de trancher un design en morceaux et le remontage (habituellement dans un tableau) de retour sur la page HTML.

C'était l'ancienne bande. Le nouveau site Web utilise le concept de stratification, d'empilage, et z-index pour réaliser des conceptions avec la profondeur. En tant que codeur, être sûr d'obtenir des fichiers PSD en couches ou couches fichiers AI à partir du concepteur par rapport à un design plat. Cela vous permettra d'avoir une plus grande flexibilité dans la façon dont vous mettez sur pied un site web. Rappelez-vous, lorsque vous travaillez en couches, examiner les éléments HTML qui sont essentiels à la structure avant de recourir à l'ajout de divs supplémentaires et des portées. Vous pouvez utiliser un motif répétitif verticale sur le html élément, et un fond de répéter horizontale sur le body l'élément sans mettre le redoutable div#wrapper pour résoudre vos problèmes de fond.

Continuer la lecture

Part

2009 13 août 2009

MacGyver sur le lâche

macgyver2rs OK, voici un exemple de la façon dont je trouve des choses ...

1. J'ai entendu d'abord un signal sonore sur mon TweetDeck et j'ai vu un tweet de mon favori Coyier blogueur Chris de trucs CSS .
Il a dit qu'il vient de publier un screencast sur la façon de recréer un truc CSS sur cet autre site.
2. J'ai regardé la vidéo, pensé que c'était cool, et défile à la fin de la poste pour voir les messages ou commentaires d'autres.
3. Ensuite, je défile passé celui où il a commenté revenir à quelqu'un et Nosy-moi voulions savoir ce qui se passait.
4. J'ai lu à la fois et suis tombé sur cette
Picture 1
Jack Franklin dit:

Great stuff Chris.

J'ai remarqué que vous avez l'icône Ipsum HTML dans votre barre de menu, où puis-je obtenir ce programme à partir, j'ai été chercher pendant des siècles et je ne peux pas le trouver : (

Merci,

Jack

Chris Coyier dit:

Utilisez fluid.app et de faire une app barre de menu à partir de cette URL http://html-ipsum.com/fluid/

header

5. J'ai donc googlé l'application et ... vérifier cela et revoir la première vidéo 1 minute sur la barre latérale. Très cool ...

http://fluidapp.com/

6. L'application html ipsum il parlait est cool aussi

C'est ainsi que je trouve ces choses-là, une chose en entraîne toujours un autre ...

Part