Diseño web con software libre

Lenguaje publicitario parte. 2

josewebmasterlibre — Sat, 19 Feb 2011 02:46:06 +0000

Otro detalle es que en el lenguaje publicitario,ahi que usar el castellano,no el español puro,mucha mas gente habla castellano y los que hablan español tambien entienden perfectamente el castellano.

Cuando vas a vender un servicio tienes que evitar usar modismos como:

tio
wey
chacho

y terminos como:

fracaso (aunque para referirse a evitarlo)
tratar (a un cliente le gusta lo seguro,asi que elige algo posible y ofrecelo firmamente)
SEO ( habla sobre posicionamiento en buscadores como el producto,en la descripcion puedes usarlo)
marcadeo (todo el mundo prefiere “marketing”,al cliente le suena mejor)

evita cosas imposibles o demasiado obvias como:

le garantizo el primer puesto en google (NADIE lo garantiza,solo se podria tener un 70% de posibilidades trabajando durante muc ho tiempo con link building y optimizando el contenido,ademas de añadir tu enlace a algun articulo de wikipedia como “relacionado”)
Le garantizo una buena maquetacion,porque soy un experto en html (gracias capitan obvio,para trabajar en cualquier area del diseño ahi que saber html)
Nuestros diseñadores web se encargaran de diseñar su sitio web (demasiado obvio y ya lo e visto por ahi,creanme)

Sin olvidar el practicar la vaguedad de contenidos,es decir,no explicar hasta el punto en que se revelen las posibles desventajas o cualquier tipo de punto negativo.

Tambien,debes ser directo y evitar texto redundante,debe ser corto y objetivo (por algo los buenos SEO y publicistas estudian casi por completo el periodismo).

y bueno creo que con eso culmino con el tema,espero que les haya servido.

El lenguaje publicitario

josewebmasterlibre — Mon, 14 Feb 2011 04:24:11 +0000

Seguro entramos en una pagina o vemos un cartel y leemos algo así: “le ofrecemos los mejores servicios,de la mano de profesionales”,esto es el llamado lenguaje publicitario,aunque en si,el truco es usar un lenguaje semi-tecnico con una gramática y ortografía bastante fina. Dentro de el lenguaje publicitario ciertas cosas cambian,como por ejemplo,el significado de ciertas palabras. Como un ejemplo tomemos la palabra “profesional”,todos la toman como calidad,responsabilidad y demás cuando el concepto de calidad es tan simple como: “persona que se dedica a una profesión”,es decir,puede haber un profesional que no tenga talento y/o conocimientos de su área. Otro ejemplo es el uso de un lenguaje mas neutral posible con dialecto mas español que castellano. Usar palabras complejas pero fáciles de entender para todos,es decir,parecer filosofo,con un texto para nada coloquial pero que sea atendible para la gente,es decir,para el target. En la web tenemos cierto conflicto con esto,porque?,porque debe ser corto pero muy bien posicionado tanto en la web como términos de SEO,es decir ahí que buscar todos los posibles sinónimos y analizarlos a fondo con las herramientas de elección de keywords de google. Y bueno,no quiero alargar mas y tengo sueño así les dejo el tema así como esta,un pequeño resumen sobre este asunto.

Análisis sobre los menús desplegables

josewebmasterlibre — Thu, 03 Feb 2011 21:50:30 +0000

pues primero que nada tengo que decir sobre que hablaremos,el tema son los menús desplegables,haré un buen análisis sobre el tema.

Usabilidad:

Ventajas:

-Permite ordenar muchas opciones en un reducido tiempo,es muy recomendable para webs de software,por ejemplo,o para foros.

Desventajas:

-Las opciones no están del todo visible todo el tiempo asique el usuario tendra que buscar y tardara tiempo encontrar las opciones indicadas.

Accesibilidad:

Ventajas:

-ninguna,la verdad.

Desventajas:

-El uso de ellos hace que tu web sea innavegable en navegadores sin Javascript o para moviles (solo si usas JS).

-Las personas con deficiencia motora tendrán problemas con tu sitio.

SEO:

Ventajas:

-Toda tu web puede estar ínter-conectada así que junto con un sitemap.xml tendrás todo unido. (el uso de CSS es recomendable).

Desventajas:

-Al usar ciertos detalles con AJAX,el contenido ser no ser indexado por algunos buscadores (aunque se puede usar un buen sitemap.xml y listo).

Limpieza de código:

Ventajas:

-Con un código tabulado y semántico,puedes hacer menús desplegables con código muy limpio y semántico.

Desventajas:

-El código puede ser muy largo si necesitamos varias opciones (a que no haz visto un código de uno de 3 niveles).

Validación:

Ventajas:

-ninguna,es en realidad neutral en este tema.

Desventajas:

-Un pequeñísimo descuido puede causar muchísimos errores de validación.

Espero que les sea útil,saludos.

Que DEBERIA saber un diseñador/maquetador web

josewebmasterlibre — Sun, 23 Jan 2011 05:52:10 +0000

primero que nada,tengamos claro todo,no es lo mismo un diseñador web a un maquetador web pero en si dejando de lado lo que realizen igual necesitaran unos conocimientos de varios temas.

Entre ellos:

usabilidad
accesiblidad
SEO (aunque tengan un consultor SEO propio,saber SEO aumentara la calidad de los diseños listos antes los bots de los navegadores)
redes (toda persona que trabaje con web debe saber que es apache,ISS,Server-side,DNS,FTP,Samba,etc)
lenguajes de marcado (HTML,XHTML,XML,SGML,como minimo)
lenguaje de hoja de estilos (CSS)
Lenguajes de scrips client side (javascript)
Lenguajes de server-side (PHP y si lo deseas,asp.net. al menos a nivel basico)
Edicion de imagenes ~~(ni hace falta opinar)~~
SVG (es el futuro,se espera que pronto lo usen sistemas como google maps y muchos otros,a diferencia de flash,es 100% indexable,se puede buscar y mucho mas en el)

y bueno,con eso concluyo.

Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil.

josewebmasterlibre — Fri, 14 Jan 2011 23:25:52 +0000

Primero definamos algo: Cuanto de ancho y alto,en mi caso,sera de 96x96px.

Comencemos con el HTML,que sera simplemente una imagen metida dentro de un link,con su respectivo alt y demás:

ahora,como veran,la imagen lleva a una imagen png,esta imagen tendra el tamaño del thumbnail (en mi caso 96×96) y estara vacia,pero no sera blanca sino que todo lo que tendra sera el canal alpha.

Una vez hecho esto,vamos a hacer las imagen del thumbnail en mi caso sera una simple foto mia re-escala y con bordes redondeados (se los recomiendo,tambien podrian hacer que el thumb paresca un pin).

Ahora,el siguiente paso,en cualquier editor imágenes (yo uso gimp pero ustedes pueden usar photoshop o lo que sea) tomen el thumbnail que hicieron y subanle el brillo mas o menos un 35% para que quede bastante claro.

Supongamos que la imagen del thumb original sea “thumb_1.png”,la version mucho mas clara es la “thumb_1_ligth.png” y la totalmente transparente es “thumbtrans.png”.

Bueno,entonces demos lo dinámico con el todo poderoso CSS:

.thumb { height: 96px; width: 96px; } #thumb_scatman { background-image: url(img/thumb_1_ligth.png); } #thumb_scatman:hover { background-image: url(img/thumb_1.png); }

usar variables en el CSS con php

josewebmasterlibre — Sun, 09 Jan 2011 03:37:12 +0000

Hola,ahí algo que nos plantea el css3: las variables pero vamos,es aun un boceto que aun no esta listo,el html5 es renderizado por los navegadores modernos,pero el css3 aun no es usable sin hacks ni usar funciones experimentales no standars según el navegador,ninguna maneja el boceto actual completamente,Opera y Internet explorer son los unicos que acepta de manera standart.

Yo no soy fanático de IE ni del software privativo pero ahi que apreciar que sus programadores hicieron bien trabajaron para que IE use CSS3 de buena manera,lo de opera también es un logro,ademas opera siempre a sido innovador,aunque aveces innova con cosas inútiles que nunca llegan a ser standart.

cambiemos de tema,como no podremos usar aun las variables CSS3 que para aprovechar esta idea,les propongo usar un poco de PHP,empecemos. Primero enlazamos de manera standart el css pero envés de darle formato CSS al archivo le damos formato PHP:

ahora hagamos que PHP haga que el resultado sea leído como CSS,de la siguiente manera:

header(“Content-type: text/css; charset: UTF-8″);

ahora,declaremos las variables que usaremos,por ejemplo,yo usare estos:

$negro = “#000000″;

y en el CSS,por ejemplo seria:

p {

echo “color: $negro;”

}

a mi quedo el código PHP y CSS así:

header(“Content-type: text/css; charset: UTF-8″);

$negro = “#000000″;

echo “color: $negro;”

y me escribió este código:

color: #000000;

funciona 100%,espero que les sirva,aca algunas cosas que puedes hacer:

ahorrar tiempo y automatizar operaciones
hacer un sistema de temas para foros,etc.
Programar y diseñar menús en la mitad del tiempo.

Espero les allá gustado.

10 tips para tener un codigo (x)html limpio y legible

josewebmasterlibre — Thu, 06 Jan 2011 17:28:59 +0000

usa doctypes strict: entre mas estricto sea el doctype mejor,ya que quita elementos innecesarios.
no usar tablas para maquetar: no solo es inaccesible y complicado si no usas un editor en modo vista diseño,sino que ademas tardan mas en cargar que los div y te obligan a usar muchas etiquetas con atributos innecesarios aunque intentes darles estilo con css.
Auto-sangrado: usar un editor con auto-sangrado ofrece ventajas que hacen mas legible el codigo.
nada de “one-lining”: esa tecnica que se usa en la programacion para hacer muchos trabajos en una sola linea,en el html la usan para poner varios elementos y contenidos porque piensan que es mas logico.
codigo valido es codigo feliz: escribir codigo valido implica cerrar bien las etiquetas,usar los elementos en el lugar adecuado,etc y ademas vuelve tu sitio mas accesible y da mejor resultados a la hora de cargar la pagina ya que el navegador no gasta tiempo ni recursos en buscar formas de renderizar codigo erroreo,sino que lo hace directamente.
evita las divitis: si eres un maquetador web mediamente calificado sabras que es la divitis,por favor,se semantico.
K.I.S.S: K.I.S.S son las iniciales de “keep it simple,stupid”,se trata de intentar hacer todo la forma mas simple y por ello la mas eficaz,rapida,correcta y standart posible.
evita comentarios en el (x)html: en el html no es necesario (todavia,aunque con html5 puede ser),solo ocupa mas en la pantalla a la hora de ver el codigo y no sirve para nada,ya que un codigo html semantico con ids y clases adecuadas es legible y obvio.
Display table: las tablas ajustan su alto muy facilmente y automaticamente segun el contenido,las div no,asi que para arreglar esto y ahorrarnos muchisimas lineas de codigo,usemos “display: table”.
definir lenguajes: en caso de usar en un parrafo o texto un idioma distinto a el de la pag entera,indicalo mediante el atributo lang en el html,asi sera mas legible y accesible.

Saludos,espero que les haya servido

mi regalo para el a;o nuevo

josewebmasterlibre — Wed, 29 Dec 2010 01:22:22 +0000

bueno,en la pestana “plantilla gratuitas” esta mi relago,una nueva plantilla,la tercera viene camino,si alguien me ayudara estarian listas en un mes cada una.

Otra cosa,el de a;o nuevo sera mejor todavia,esperenlo.

feliz navidad y ya soy linuxero

josewebmasterlibre — Thu, 23 Dec 2010 00:38:11 +0000

me e finalmente instalado linux puppy,me gusta y de se hacer ya muchas cosas con el terminal,dentro de poco me paso a debian,donde me quedare.

pero ante todo:

FELIZ NAVIDAD ( y hanuka por si ahi algun judio )

flujo de trabajo para diseño web con Software libre

josewebmasterlibre — Sat, 18 Dec 2010 01:40:18 +0000

Acá mostrare como es el flujo de trabajo en el caso de un diseñador web que use software libre,oh,Al menos el mio.

El software que uso en mi caso es:

Geany (o cualquier editor de texto o IDE)
Gimp (como alternativa en el software libre tenemos Krita)
OpenOffice (lo uso y lo usare hasta que LibreOffice sea estable y mas ligero,su alternativa propietaria puede ser Microsoft Office o Lotus de IBM)
Inkscape (editor de graficos essencial,ademas de que es el mas standart en cuanto a SVG,no tiene alternativa por este motivo aunque illustrator puede hacer casi lo mismo)
Dia (para diagramas y organigramas,un alternativa podria ser Microsoft Visio)
Gpick (para generar esquemas de color)
Firefox (gracias a sus complentos)

Paso 2: Diagramacion
Software usado: Gnome Dia

Este paso parece facil pero ahi que tener en cuenta CIENTOS DE NORMAS DE USABILIDAD,obviamente no se las dire por ser algo muy largas y que se recopila a partir de leer muchos libros (no niego que capaz ahi algunas que aun no se),se trata de preparar una simple presentacion de como ser ordenara todo,este paso es propio de un diagramador web,aca les muestro una estructura de ejemplo para un foro:

como sabran,use Dia y luego lo exporte a PNG.

Paso 2: Organización
Software usado: El sistema operativo….

lo principal: crear una carpeta para las base de datos,otra para las imágenes,otra para la documentación,otra para las hojas de estilos y si quieres otra para codigos Javascript.

Paso 3: Pre-diseño

Software usado: Gpick,GIMP

Esta me gusta mucho y es tal vez el mas importante,tomen en cuenta mis consejos sobre marketing y elección de color,tendremos que crear una serie de colores que sean apropiados,lo mejor es sacarlos del logotipo de la empresa o el cliente.

Y luego de tomar los colores los guardamos y hacemos una nueva imagen en gimp que sean cuadrados con colores dentro,acá ahí un ejemplo:
(es un ejemplo con colores al azar)

Paso 4: Diseño Web
Software usado: Inkscape,GIMP

Pues,desde hace tiempo uso la misma técnica que jesusda:

voy armando todo (colores,imagenes,etc) en inkscape,las imagenes y fotos las preparo en GIMP,luego exporto los objetos (no las cajas y los colores) y luego paso a marquetar (paso cuyo nombre es confundido con Diseño web por muchos),otra cosa,recuerda la usabilidad

Recomendación: Usa las paletas pantano con el esquema de color que elegiste para mantener un mejor rendimiento y mejores resultados

Paso 5: Maquetacion
Software usado: Geany
Escribamos el codigo (X)HTML y CSS,recuerda generar un codigo accesible,valido,etc.

Paso 6: Documentacion
Software usado: OpenOffice

Escribimos la imformacion necesaria y demas,este paso es muy importante,no esta de mas leer libros sobre escritura, y periodismo.