10 Tips for Designing with Type on a Photo One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully. You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. 1. Text has to be readable to be successful. Contrast can also refer to the size of text in relationship to what is happening in the image. 2. Sometimes it just works that text becomes – or is – part of the image you are working with. 3. Working with the visual flow of an image is one of the most important tips when it comes to working with text and photos. In terms of visual flow, look for spaces for text where the subjects of the image would look. 4. One of the simplest tools you can have in your kit is the ability to blur part of an image. 5. Choose a shape – you can see a rectangle and circle above – that works with your word choices and image. 6. 7. 8. 9. 10.
Conceptos básicos: Direcciones electronicas Subir ¿Qué son? Las direcciones electrónicas son la forma de ubicar unívocamente a cada persona y computadora en la Red. ¿Cómo funcionan realmente? Las direcciones electrónicas que se conocen y utilizan a diario han sido diseñadas para el uso de los humanos: su formato intenta adecuarse al hecho de que es más fácil recordar palabras que números. La información que circula por Internet se basa en la dirección IP de cada computadora de destino. Direcciones de Computadoras Todo recurso de Internet está alojado en una computadora servidor (server o host) que tiene asignada una o varias direcciones electrónicas. El esquema básico sería, Dominio=computadora.organización.tipo.país Por ejemplo: www.arrakis.es Computadora (también llamado server o host) Si la organización es grande y tiene varias computadoras servidores conectadas a Internet, se utiliza esta parte. Organización Es una identificación de la organización o empresa a la que pertenece el dominio y que siempre está presente. Tipo .com .edu
Page contact : conseils et ressources webdesign Une page de contact représente souvent la porte d’entrée d’un utilisateur chez une marque. Pour maximiser la conversation et offrir la meilleure expérience possible, je vous propose de (re)-découvrir quelques bonnes pratiques. Cela semble évident mais un formulaire de contact réfléchi, fonctionnel et original vous permet d’augmenter significativement le nombre de demandes qualifiées. Même si les réseaux sociaux ont aujourd’hui aisément complété la page de contact classique sur un site, celle-ci n’est pas encore obsolète pour autant. Bien définir le rôle de la page et du formulaire : Trouver des prospects, des contacts ? L’utilisateur avant tout : Aujourd’hui de simples champs de formulaires ne suffisent plus. Pour inciter les internautes a compléter vos champs, accompagnez-les et récompensez-les à chaque étape réussie. Autre chose, si votre formulaire doit comporter plusieurs étapes, utilisez des barres de progression, des onglets, voir un accordéon. Quelques exemples concrets : Sweetscoops
Web Form Design Awards Close Complete List of Rules JotForm Web Design Contest Rules 1. 2. 3. 4. 5.1 Sign in to your JotForm Account. 5.2 Visit the JotForm Form Designer landing page to get an idea what you can do with it. a. b. 6. (1) Design (2) Functionality (3) Ease of use Each form design determined by the judges to be successfully completed will be deemed a completed form design. In the event that no completed form designs are received, no prizes will be awarded. 7. 8. 9. 10. 11. 12. 13. For residents of the EU: pursuant to EU law pertaining to data collection and processing, you are informed that: the data controller is JotForm and the data recipient is JotForm; your data is collected for purposes of administration of the promotion and for marketing purposes; you have a right of access to and withdrawal of your personal data. 14. 15. 16. 17. 18.
Qué es el DOM El DOM es la estructura de objetos que genera el navegador cuando se carga un documento y se puede alterar mediante Javascript para cambiar dinámicamente los contenidos y aspecto de la página. DOM es una abreviatura de Document Objet Model. En español podríamos traducirlo por Modelo de Objeto de Documento, aunque en DesarrolloWeb.com nos hemos referido al DOM habitualmente con el nombre de jerarquía de objetos del navegador, porque realmente es una estructura jerárquica donde existen varios objetos y unos dependen de otros. Los objetos del DOM modelizan tanto la ventana del navegador como el historial, el documento o página web, y todos los elementos que pueda tener dentro la propia página, como párrafos, divisiones, tablas, formularios y sus campos, etc. A través del DOM se puede acceder, por medio de Javascript, a cualquiera de estos elementos, es decir a sus correspondientes objetos para alterar sus propiedades o invocar a sus métodos.
Ampersands and validation Unencoded ampersands in query strings are seen by many as “OK” to let slip through validation. That’s up to everyone to decide for themselves. However, if you decide that encoding ampersands isn’t worth it, you may want to go to the W3C document Character entity references in HTML 4 and print it out. Especially Character entity references for ISO 8859-1 characters contains a lot of variable names you need to avoid in query strings if you’re interested in having your site work in browsers like Safari, Mozilla, Firefox, IE/Mac, and OmniWeb. All those browsers will convert an unencoded ampersand followed by a character entity reference, followed by an equals sign, to the corresponding character. Let’s say you have a link that looks like this: <a href="index.html? If you’re using one of the browsers mentioned earlier, check the status bar with your cursor positioned over this link the link in this test document, or follow the link and check the location/address field.
Web development mistakes When I visit a website, especially if it’s the site of a competitor or a prospective client, I like viewing source and take a look at what’s under the hood. It’s one of my not-so-secret obsessions. And I am way too often absolutely disgusted by what I see. The web is overflowing with sites that use horribly invalid, broken, and inaccessible markup. Even sites built by people who have been in the web business for many years, and who really should know better, are full of problems that shouldn’t be there. Here’s a list, in no particular order, of some of the most common mistakes that even experienced web professionals tend to make: DOCTYPE confusion Completely missing, incorrect, or in the wrong place. <span> mania A common way of styling something with CSS is to wrap it in a <span> element with a class attribute and use that to hook up the styling. (too much) Visual thinking Lack of semantics Non-semantic markup. Character encoding mismatches Bad alt-attributes Missing or useless. For CSS:
Tienes problemas al visualizar una página web en #Safari? | Switcher Start | El blog para el usuario Mac. Si utilizas Safari y tienes problemas al cargar paginas web, puede ser por que dicha página no esta adaptada o actualizada para el uso con Safari. Para ayudarnos podemos seguir estos sencillos pasos; Abrir las preferencias de safari con un sencillo shurtcut (cmd + key , )Hacemos click en la pestaña de Avanzado y habilitamos la opción de “Mostrar menú desarrollo en la barra de menús” Con esto habilitamos una opción con más herramientas extras para los desarrolladores Web, pero nosotros sólo vamos a ocupar la opción de “Agente de usuario y escogemos la versión del navegador” el más común en Internet Explorer. De esta forma Safari carga la pagina utilizando los protocolos de la pagina señalada y así tratar de cargar la pagina Web Me gusta: Me gusta Cargando...
5 pasos para hacer tu web más legible Publicado el 29 septiembre 2010 por Daniel Rodríguez. En la web podemos hacer muchas cosas, pero una de las más frecuentes es leer. Tener un texto optimizado para la lectura es fundamental, no sólo por presencia en pantalla sino por eficiencia para el lector. Un texto legible se lee rápido, se comprende mejor. He aquí cómo conseguirlo… 5 fáciles pasos Alineado horizontal: Cualquier párrafo de texto debería comenzar a una distancia del margen izquierdo de la página situada entre los 300px y los 600px. En definitiva, aplicando estos consejos en tu actual o próxima web conseguirás un texto más legible. Por último… ¿Que es eso de los ems? Realmente, los ems son la solución a todos los males relacionados con ajustar el tamaño de un texto para la web. Por cierto… ¿Conoces Typetester.org? Tags: Escribir para la web, Legibilidad
Columnas, anchos de línea y legibilidad Los principales motivos por los que los usuarios leen mejor unas páginas que otras dependiendo de su formato de párrafos. Los usuarios leen más rápido los textos con renglones de tamaño medio (60-80 cpl), que los de renglones cortos o largos. También son los de tamaño medio sus preferidos. Ello, junto a que sólo los lectores avezados leen mejor en dos columnas de texto que en una, sugiere que sigue siendo acertado utilizar el modelo de maquetación basado en tres columnas de elementos: barra de navegación, texto y opciones secundarias respectivamente. Esa maquetación funciona aún mejor usando márgenes e interlineado y, para resoluciones de pantalla de tamaño medio, empleando un ajuste líquido, que abarque todo el ancho de pantalla . Un aspecto importante a la hora de maquetar los contenidos de un sitio web es decidir cómo se ha de presentar la información textual para que su comprensión y legibilidad sean máximas. El ancho de línea Número idóneo de columnas "Streamline the page design.
Ideal line length for content Date: 3 May 2003 Author: Russ Weakley Is there an ideal line length for content? To quote a passage from “Web Style Guide – Basic design principles for creating web sites”. The ideal line length for text layout is based on the physiology of the human eye… At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. The challenge I’d like to design a site that uses optimal line lengths. Layout methods Fixed-width columns can be used to set column widths that are ideal if users have their fonts set to browser defaults. A solution
What You Need to Know About Open Graph Meta Tags for Total Facebook and Twitter Mastery Marketers create a lot of content. Yes, content is king, but a king is powerless without followers. So, what’s the first thing that comes to mind when you want to reach a broader audience with your awesome new post? Sharing on social media, of course. The huge audiences of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential? Why was Open Graph Created? Facebook introduced Open Graph in 2010. Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). Now, other social media sites also are taking advantage of social meta tags. Why Marketers Need to Know about Open Graph Social media sites are the major drivers of most of the web’s traffic. For example, have you ever shared a link on Facebook only to find that the thumbnail was missing, or there was a totally different picture than you expected? Facebook tags og:title Example: og:url
W3Schools? No gracias. Elige bien tus referencias y fuentes de información W3Schools es una página veterana utilizada por muchas personas como referente. Acuden a ella en busca de información o para resolver sus dudas. A menudo se cita y enlaza como verificación de opiniones o sustento de afirmaciones con la buena voluntad de creer que estás refrendado por una página "oficial" del consorcio W3c. Quizás tu seas uno más de los muchos usuarios de esa página. El primer problema: su nombre W3Schools.com no está afiliada a la W3C en modo alguno. Es lo manifestado por un grupo de miembros de de la "Front-end Dev Community" ya en 2.011. Segundo problema: sus certificados W3Schools ofrece certificaciones cuyo valor es más que discutible ... W3Schools afirma en su página sobre ellos que son "muy recomendados" por más de 100 universidades y Colegios mayores: El primer enlace es a una página sobre recursos de la Universidad de Alabama, y lo que te encuentras es que W3Schools aparece incluida entre una amplia lista de recursos generales. ¿Nueva? Qué puedes hacer Es sencillo.
W3Fools – Better web education for all