Mostrando entradas con la etiqueta Software Diseño Web. Mostrar todas las entradas
Mostrando entradas con la etiqueta Software Diseño Web. Mostrar todas las entradas

Como darle a su Web el diseño 2.0: 3ra parte

Sans Serif (Arial, Helvetica, ...)

Es que el particular estilo de fuente que ha sido en torno a las edades de ahora. Recuerdo un momento en que era absolutamente y "Nerdy" Arial a utilizar para cualquier cosa que usted escribió. Simplemente porque geeks intentó separar a sí mismos a partir de la cada día los usuarios procesador de textos, que fueron la elección de Arial, ya que la mayoría de fácil lectura, además de Times New Roman. Y ahora, wohoo, los principales regresar. Literalmente Arial (y Helvetica, y similares ...) se ha convertido en una norma de simple, pero de gran apariencia de diseño web. Font-size 8 a 10 es un fresco que hay que hacer recientemente. Ahora estamos hablando de tamaños de 14 y hasta. No es broma. Si alguien me pidió el diseño de una página web para que los visitantes afectada lo más probable es que creó un sitio web 2.0Culture. A pesar de que no era muy popular a ceñirse a "una navegación fácil y legible el contenido" en los últimos días, las cosas han cambiado gran momento por el día de hoy. No más font-size 8 100% Flash - Por favor, espere mientras pre-carga del 1% - los sitios web. Me congratulo de ello. Webdesign tiende a ser fácil con este enfoque. Suponiendo CSS3 es realmente van a hacer las cosas más fáciles, por supuesto. No se olvide de marcar todo el contenido con los términos como "partidas", "listas", "links", los "apartados". Más información sobre la que entonces más abajo. Sólo un rápido resumen de esta norma Arial:

* Use una base de tamaño de la fuente de su sitio web. Y hacer todas las otras fuentes con respecto a que uno (por ejemplo, font-size: 115%). Esto permite a los usuarios obtener Foxy con su rueda del ratón para girar a través de los tamaños de fuente -, mientras que su sitio web todavía ve bien.

* Siempre definir su fuente ajustes pertinentes dentro de un archivo CSS.

* Como de costumbre: una fuente PER página web está totalmente bien, confiar en mí.

* Nunca use más de 3 diferentes tamaños de fuente.

Pastell v2.0

Esto ha sido muy conocido por un largo tiempo. La única además de que es una combinación de colores pastell con 100% verde, azul o rojo. Mantenga su sitio web los antecedentes y elementos de la interfaz en gris, blanco o muy pastell colores de la luz. Y ahora, usted podría ser capaz de utilizar un 100% Verde barra de encabezado. O (por favor, note la O, Y no) uso de un rojo de navegación con enlaces blanco. Seguir adelante y hacer la descarga vínculos cielo azul. Va a la regla. Pero de nuevo, mire a su alrededor y obtener una primera impresión sobre cómo se ve en este 2.0Culturals profesional. Esto debería obtener su comenzado bastante rápido. Simplemente no exagerar, que es la razón por la que debería realmente cuenta de la "O". Creo que encontrará su camino a través.

Se ha convertido en uno que debe tener. Pies de página. La mayoría de los usuarios ni siquiera se percaten. Puede que nunca han hecho clic en uno también. Pero todavía, que necesitan estar allí para hacer un sitio web profesional buscar. Sin ellos, todo el mundo da por supuesto que se ejecute un sitio web personal. Creer o no, pruebe y vea usted mismo. Oh sí, y por favor, no pensar nunca de hacer de su pie de página se adhieren a la parte inferior de la pantalla, totalmente impresionan comportarse de desplazamiento. Eso es un no no. Eso es demasiado geek, me temo. Hay dos grandes tipos de pies de página, tiene que decidir usted mismo, que uno es más adecuado para su particular diseño. He preparado dos enlaces con los dos grandes implementaciones para usted:

Botones

Dentro de los principales tendencia de pasar de un ordenador en casa interfaz de aplicación a todo el mundo acogió una aplicación basada en web, el diseño, también se encuentra el origen de los recientes avistamientos de botón-como elementos de navegación. No, no estoy hablando de aquellos-ir al infierno-applet Java botones. Brrr, congelación. Estoy hablando de "botones de imagen". O bien redondeadas o estrictamente en forma de rectángulo. Y en su mayor parte bastante grandes también. El número uno de utilización de estos botones es el deber-tener: botón Descargar. Cuando se utiliza en la navegación por el sitio, los botones parecen ser un poco menor. Y no se olvide de utilizar Arial para subtítulos, te lo dije.

Prueba de concepto:
Font-size: Tarjetones

MHM. Derecho. Enorme fuentes. A no no no en los días de héroes y Frontpage libre webspace aficionados a la "Mira mamá, tengo un sitio web!". Pero los tiempos cambian. Johnny Cash está muerto y las grandes fuentes están de vuelta. Deseo que era el revés, pero vamos a conseguir nosotros mismos actualizado a 2.0 y aceptar fuentes de gran tamaño. No gran cosa con ello, simplemente recordar a establecer todos los ajustes de su fuente, dentro de su archivo CSS y definir una base de la fuente y el tamaño, mientras que utilizando tamaños relativos después de eso. Eso es procedimiento común. Si usted es totalmente incómodo con eso, me podría usted a punto de un 2.0Culture compatible el trabajo en torno a:

* Use las grandes partidas, los hacen destacar
* Use mediano sub-rúbricas como un fundido de las grandes líneas de contenido a la normalidad.
* Use el contenido de tamaño normal.
* Evite largo bloques de texto a continuación, esto es crucial.
* Trate de separar su contenido en cajas medianas

Véase aquí: http://clipmarks.com/ o http://www.banshee-project.org/Main_Page

Descriptivo HTML (estilo XML)

Por último, pero nunca menos - aburrido normas. Parar! No esta vez. Esto es un debe debe debe. Deje a cabo y permitir a su sitio web se ahogan en el navegador de compatibilidad de las guerras. Odio el término, pero es más apropiado aquí: KISS. Sí, le mantenga pequeño y simple. Si intenta obtener uno de los muy, muy antiguo diseño de la web los libros, la enseñanza sobre cómo aplicar "a href" y los párrafos, listas, títulos - que tomar en serio. Recuerdo cuando leí a través de esos artículos en ese entonces, pensando que este podría ser ok para "profesor de la Universidad de diseño de la web", pero no para enfriar - Soy un geek - cuestiones de diseño. ¿Cómo me fue mal. Retro estilo está caliente de nuevo. No porque se ve bien, pero mucho más porque es perfectamente descriptiva. Ok, a fin de comprender esto, puede que tenga que han hecho algunos primeros pasos en XML para obtener una idea. Como Jeff Bezos puso recientemente: Web 2.0 está haciendo la web más legible para ordenadores. Esa es la razón real detrás. Examen de las APIs de su sitio web tienen que ser conectados a que enfoque descriptivo. Imagínense que estaba usando una Web 2.0, mientras que la API de tener que ajustar su diseño global a ese contenido. Uhw, feo. Simple contenido Web 2.0 sea hecha de las listas, párrafos, secciones (muy importante) y no a javascript enlaces. Muy simple, no es la misma. Otro beneficio de utilizar este enfoque es una mejor integración en los motores de búsqueda. Echa un vistazo a los foros SEO y encontrarás la verdad. Google ama a los sitios web básicos. Usted es un héroe de Google si su sitio web comienza con una simple H1-como las partidas. Pruebe usted mismo. No exagere con los cuadros o similares. El plan debe ser sencillo, si usted quiere tener 2.0Culture.

Tipografía con CSS: 2 Parte

Continuando con la explicacion anterior del uso del font stack, he aqui una forma de trabajar sobre los titulos y los párrafos correspondientes:

Títulos [superior a 12px]:

Familia tipográfica: Ideal, alternativa, común, genérica;
1. Ideal - Su selección no tiene porque ser obligatoria a lo que se considera universalmente como “seguro para web“. Hay bastantes tipografías que tienen una alta penetración en el mercado. Simplemente no hay que escoger nada muy rebuscado o serás el único en visualizarlo correctamente.
2. Alternativas - Cuando selecciones tipografías para encabezados y título, recuerda que las familias tipográficas serán más notorias y, por lo mismo, es necesario que selecciones una alternativa que esté más cerca del espíritu que del tamaño o del valor relativo. Para encontrar a esta “alma gemela” puede que desees buscar algo cercano en la clasificación tipográfica o buscar alguna creada por el mismo diseñador de tipos. Busca similitudes en las formas y contraformas de las letras.
3. Común - Solo necesitas algo ligeramente parecido y que no vaya a romper con tu diseño.
4. Genéricas - Esto es para los fanáticos que no creen en la instalación de fuentes.

Párrafos [inferior o igual a 12px]:

Familia tipográfica: Ideal, muy cercana, común, genérico;
1. Ideal - Incluso si tienes la intención de que los textos extensos o párrafos sean coherentes con los títulos, puede que desees considerar la legibilidad del tipo de letra según el largo de los párrafos. Por ejemplo: Helvetica Neue y Arial son más adecuadas para ser leídas en pequeños tamaños en pantalla que Helvetica.
2. Muy cercana - Encuentra algo que esté bien representada, una tipo multi-plataforma que no hunda tu diseño. Por ejemplo: Hay alrededor de 2 puntos de diferencia entre el ancho de Times New Roman y Georgia. Esto se multiplica por el número de caracteres total de sus párrafos y puede significar un desastre para tu otrora-bonita-web.
3. Común - Algo similar en sabor y presentación.
4. Genéricas - Una vez más, acabar con la clasificación genérica.
Ten en cuenta que si tu tipografía ideal está solo en Mac, puede que quieras usar una alternativa que sea más frecuente en Windows.

Organiza tu cascada tipográfica.

Ahora, según estas directrices y basándose en la experiencia de “tipos” más sabios, se han compilado varias lista de cascadas de familias tipográficas que abren más posibilidades para los diseñadores web y que se espera ofrezcan sustitutos apropiados:
p - ideales para párrafos o textos extensos.
t - ideales para encabezados o títulos.
Arial, Helvetica Neue, Helvetica, sans-serif - p, t
Baskerville, Times New Roman, Times, serif - p
Baskerville, Times, Times New Roman, serif - t
Cambria, Georgia, Times, Times New Roman, serif - p, t
Century Gothic, Apple Gothic, sans-serif - p, t
Consolas, Lucida Console, Monaco, monospace - p, t
Copperplate Light, Copperplate Gothic Light, serif - p, t
Courier New, Courier, monospace - p, t
Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t
Futura, Century Gothic, AppleGothic, sans-serif - p, t
Garamond, Hoefler Text, Times New Roman, Times, serif - p
Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t
Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p
Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t
Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p
Georgia, Times, Times New Roman, serif - t
GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t
Helvetica Neue, Arial, Helvetica, sans-serif - p
Helvetica, Helvetica Neue, Arial, sans-serif - t
Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t
Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t
Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p
Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t
Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t
Times, Times New Roman, Georgia, serif - p, t
Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t
Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t

Deliberadamente se dejó algunos “bodrios tipográficos” fuera (Comic Sans), porque no se sustentan según lo explicado anteriormente.
Estas cascadas de familias tipográficas son solo ejemplos y recomendaciones de lo que se puede lograr, por lo mismo no resuelven todos los aspectos del diseño web.
Para una comparación más completa, descarga el pdf. Ahí encontrarás ejemplos de títulos y textos extensos, según las familias expuestas anteriormente.

Servicio para crear paginas web Gratis de Google

Nuevo Servicio de Google para crear paginas web Gratis
Google Sites, como se llama el nuevo sistema, es una versión reducida de JotSpot, un servicio fácil de editar para que organizaciones y particulares construyan y editen páginas web y que Google adquirió hace 16 meses bajo condiciones no publicadas.

El nuevo servicio marca el último paso de la empresa en su estrategia de entrada en el mercado empresarial y educativo.

La iniciativa permite a los usuarios no entendidos en la materia organizar y compartir información digital como enlaces web, calendarios, fotos, videos, presentaciones, archivos adjuntos y otros documentos en una página fácil de mantener, o crear su propia "intranet" para gestionar proyectos en equipo.

"Crear una página web para un equipo siempre ha sido demasiado complicado, requería hardware especializado y software, así como conocimientos de programación," dijo Dave Gorouard, director general de la unidad Enterprise de Google, dirigida a trabajadores de oficinas.

Google Sites es una versión reducida del programa SharePoint de Microsoft, que permite a los usuarios de una organización compartir documentos y mantener calendarios en páginas web seguras, pero es mucho más complejo de construir y mantener.

Las páginas son gratis o con una pequeña cuota en función del número de usuarios, dependiendo de si las organizaciones han adquirido versiones completas de Google Apps, un paquete de software que incluye procesador de textos, hoja de cálculo y un programa de presentaciones, además de correo electrónico y herramientas sencillas de publicación web.

"La idea es que los departamentos de Tecnologías de la Información no tengan que hacer nada salvo facilitar a los usuarios valerse por sí mismos," indicó Gorouard.

A diferencia de SharePoint, que normalmente exige a las organizaciones comprar y mantener su propio hardware y software, con un gasto que puede oscilar entre decenas y cientos de miles de dólares para cien usuarios, Google Sites está alojada en los ordenadores de Google y es gratis para los usuarios de Google Apps.

Según Google, más de 500.000 empresas y varios miles de escuelas y universidades adoptaron Google Apps durante el año pasado.

Herramientas para programar HTML

Que herramientas o programas necesitamos para programar HTML se preguntara...

Respuesta: Ninguna herramienta es espacial. Cualquier editor de texto simple como el Bloc de Notas de Windows (Notepad) servira ya que el HTML es texto puro, no necesita compilarse ni agregarse nada especial.

Siemplemente escribimos el codigo en el Bloc de Notas y lo guardamos con la extension HTM o HTML y listo.
mas info en http://curso-html.blogspot.com

Interface Dreamweaver 8


La interface del Dreamweaver 8 es similar a las de sus predecesores. Si nunca la vio o quiere hacerse una idea de como es y que herramientas tiene un documento nuevo HGA CLICK EN EL GRAFICO PARA AMPLIAR

NVU Software libre para paginas web


El Macromedia Dreamweaver es una de las principales herramientas del mercado para realizar paginas web. Pero funciona solamente para Windows y a veces su costo puede resultar inaccesible sobre todo si uno se esta iniciando y no tiene totalmente asumida la dedicacion

Recomendamos el software NVU
Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola en una interesante opción para diseñar sitios web.

El creador de este proyecto es Daniel Glazman. NVU es un editor de páginas web WYSIWYG (es un acrónimo "lo que ves es lo que obtienes", en inglés) es un programa que se puede utilizar en diferentes Sistemas Operativos o sea que es multiplataforma. Se encuentra basado en Mozilla Composer, pero de ejecución independiente.

Inicialmente pensado para rivalizar con aplicaciones como Dreamweaver o FrontPage, Nvu es una alternativa para los que no tienen un gran dominio del HTML.

Informe Completo sobre sus caracteristicas e Instalacion



Aprende Editores Web

Editores y Conversores

En el presente documento, se provee de algunos comentarios acerca del uso de herramientas automatizadas para la generación de páginas Web: editores de páginas y conversores desde otros formatos.

* Editores (Macromedia Dreamweaver . Microsoft Frontpage)
* Conversores ( EL mas habitual Microsoft Word)


Lo principal es lo siguiente: aprender HTML primero, luego utilizar un editor. No ocupar un editor que esté relacionado a un browser (jamás Microsoft FrontPage ni Netscape Composer) porque ambos editores generan código incompatible con el otro browser. Los más recomendados son: Macromedia Dreamweaver y Adobe PageMill.

Editores

Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ?

La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética o ocupar una calculadora: ambas cosas no se contraponen entre sí.

Un editor HTML es una gran ayuda al diseñador Web:

brinda la posibilidad de disponer y ver la página mientras se crea, y de observar inmediatamente cómo apareceran distribuídos los colores y los elementos dentro del documento. es una ayuda para recordar los comandos y sus atributos.

sin embargo; puede resultar inadecuado por lo siguiente:

Poca flexibilidad El set de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga browsers, o puede estar obsoleto. El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento.

Yo no uso editores HTML porque se pierde mucha flexibilidad y el código que generan en general es difícil de editar o mantener. Lo que uso es un editor de texto (vi) en el cual se pueden definir macros o "atajos de teclado" para ahorrar tipeo.

Sin embargo, no todos tienen los mismos gustos: lo que yo recomiendo es comenzar por lo básico, procurando aprender HTML bien, creando documentos con editores de texto plano. Después si se desea se puede ocupar una combinación editor de texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades de ambos sistemas.
Los editores HTML se clasifican en dos tipos:

Wysywyg "what you see is what you get" en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.

No Wywywyg Ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Mixtos Presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final.

Conversores

Las herramientas de conversión permiten transformar un documento escrito en otro formato a un documento HTML.

El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con algún grado de truculencia.

¿ Cuándo usarlos ? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo previo en otro sistema.

¿ Cómo usarlos ? la idea básica es simplificar al máximo el documento (eliminar las sangrías, uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento HTML.

Fuente: Tejedores del Web