Google está realizando en los últimos días una campaña, llama Good to Know, en la que pretender enseñar a los internautas a proteger sus datos en la web mediante consejos y sugerencias sencillas y la utilización de algunas herramientas.

Los consejos vienen agrupados en 4 bloques generales:

1. Utiliza Internet de Forma Segura.

En este apartado encontraremos consejos y sugerencias para protegernos mejor en la Web. Podemos encontrar desde como podemos hacer  nuestras contraseñas más seguras hasta herramientas de seguridad Google.

2. Tus datos en Internet.

Podemos ver cómo conseguir que los sitios webs sean más útiles. Qué son las Cookies, Direcciones IP y Cuentas .

3.  Tus datos en Google.

¿Cómo conseguir que los servicios de Google sean más útiles? En este apartado podemos aprender desde el tiempo límite que Google almacena los datos de nuestras búsquedas hasta cómo influyen nuestras búsquedas en un buscador para determinar si ciertos núcleos de población están pasando la gripe.

4. Administra tus datos.

En este cuarto apartado, nos ofrecen un conjunto de herramientas de privacidad . Desde cómo administrar nuestra Cookies, cómo crear y compartir documentos online con Google Docs o qué son Google+ y sus Círculos.

Centro de Seguridad Familiar

Consejos y sugerencias, para las familias, relacionados con la seguridad en Internet. Con estas herramientas Google pretende que podamos utilizar el control parental de una manera sencilla y eficaz, como por ejemplo con SafeSearch.

Para poder leer el contenido completo podemos dirigirnos a:

“Consejos de Google para proteger nuestros datos en la Red”. Pulsar aquí.

“Centro de Seguridad Familiar”. Pulsar aquí.

Las imágenes y alguna descripción  utilizadas para éste artículo son propiedad de Google.

Format Factory y FastStone. Programas de edición gratuitos.

Con éstos programas podemos redimensionar, renombrar, ponerles una marca de agua y retocar nuestras imágenes para subirlas a nuestra web.

Estos programas son totalmente gratuitos y podemos descargarlos en la web del autor:

Format Factory: http://www.formatoz.com/ES/index.html
Faststone: http://www.faststone.org/download.htm

Format Factory.

Con Format Factory también podemos transformar nuestros archivos de video y audio a otros formatos, por lo que puede sernos útil a la hora de transformar nuestros propios videos.

Primero tenemos que elegir el tipo de imágenes que queremos obtener. Para ello nos vamos al menú vertical de la izquierda donde pone “Imagen”.

A continuación le damos a “Agregar Archivo” para elegir la imagen. También podemos guardar las fotos que queramos transformar en una carpeta y darle a “Agregar Carpeta”.

Si hemos incluido la carpeta equivocada podemos usar el botón de limpiar lista y si queremos elegir la carpeta destino podemos hacerlo en la parte inferior del menú.
Una vez seleccionadas las fotos tenemos que irnos al botón “Ajustar Salida” donde se mostrarán las siguientes opciones:

No es recomendable pasar de 1200px en el Ancho máximo de la imagen. Una buen tamaño seria de 1200 x 800 px.

La opción de Cadena de Etiqueta la usaremos para insertar una marca de agua introduciendo el texto que queramos.

Opciones y Carpeta de salida.

En la barra superior de la aplicación nos encontramos con el botón “Opciones”, donde podemos elegir desde la carpeta de salida en la que queremos que se guarden las imágenes hasta opciones a seguir tras la conversión como Apagar el equipo o la emisión de un sonido al finalizar.

Una vez elegidas las fotos y configurados los parámetros de salida tenemos que irnos a la parte superior de la pantalla y hacer click en “Iniciar”.
Tras finalizar el proceso podeis comprobar cómo han quedado vuestras imágenes.

FastStone.

FastStone es un visualizador de imágenes y videos con muchas posibilidades de edición. Podemos editar imágenes en formato RAW, redimensionarlas, renombrarlas, clasificarlas y un montón de opciones más. El aspecto que viene por defecto es Windows Vista / Windows 7. Para cambiarlo y ponerle el fondo oscuro tenemos que ir a Ajustes -> Cambio de aspecto y elegir Windows Dark.

La primera vez que iniciemos el programa debemos irnos a Marca -> Permitir marcado de archivo. Para que se nos muestre la opción de mostrar sólo archivos marcados.

Redimensionar imágen con FastStone.

Para redimencionar una imagen con FastStone nos vamos a Editar –> Redimensionar/Muestrear. Si lo hacemos desde aquí solo deja redimensionar las imágenes una a una aunque las tengamos todas seleccionadas.

Redimensionar por lotes.

Para redimensionar por lote tenemos que hacer lo siguiente:

- Seleccionamos todas las imágenes.
- Vamos a Herramientas -> Convertir / Renombrar en lotes.

- Marcamos la opción de: Usar opciones avanzadas (Redimensionar…) y le damos a Opciones Avanzadas.

- Cuando hacemos click en Opciones Avanzadas nos sale el formulario para que elijamos el tamaño de la pantalla como podemos ver a continuación:

- Tras elegir el tamaño no debemos olvidar especificar la carpeta de salida donde se crearan nuevas imágenes redimensionadas sin afectar a las originales.

Marcas de agua.

También entraremos en la opción de Usar Opciones Avanzadas como en el apartado anterior y nos dirigimos a la pestaña de Marca de Agua. Desde aquí podemos elegir un logotipo o la imagen que queramos e insertarla como marca de agua, incluirle sombras e incluso elegir la opacidad con la que queremos que aparezca. Para ponerle un texto lo tenemos que hacer introduciendo una imagen que contenga el texto.

Imágenes tutorial.

Las imágenes de éste tutorial son capturas de pantalla de los programas Format Factory y FastStone. Todas las imágenes han sido redimensionadas y tratadas con FastStone.

La web hecha en Responsive Design es aquella web que se adapta a la resolución y tamaño de pantalla del dispositivo, donde se está visualizando, sin necesidad de hacer una web distinta para cada dispositivo. Esto lo logramos haciendo una versión reducida más sencilla cambiando el tamaño de los elementos, su posición o incluso ocultando alguno de los elementos que no son tan importantes. A partir de esta versión reducida iremos diseñando el resto.

Uso de Media Queries CSS3 en la creación de páginas webs.

 Gracias a los media queries CSS3, podemos hacer que nuestra web vaya adaptando su contenido en función del tamaño de la pantalla del dispositivo donde la visualicemos sin necesidad de tener que estar usando el zoom continuamente. Para ello usaremos en el css  max-width y min-width para indicar el ancho máximo y mínimo en la que se mostrará la web.

Para ver diseños de webs hechas con media queries, Dani Martínez nos recomendó la web de mediaqueri.es

Pasos a seguir.

El primer paso es crear el HTML5, por ejemplo con una cabecera, que contenga una imagen de fondo y un body con un texto y una imagen. La guardaremos como index.html.

En nuestra hoja de estilos, llamada estilos.css, crearemos reglas “media query” para modificar la forma en la que se visualizará la web con @media screen {}.

Para pantallas muy grandes podemos poner:

Y para pantallas pequeñas como la de móviles podemos usar:

Ambas reglas las incluiremos en el mismo CSS.

Resolución de nuestros dispositivos.
En el Webcast también se habló un poco de las resoluciones que tenian los distintos dispositivos tales como iPad, iPhone, etc. Nosotros os dejamos el enlace de phone-size, donde podeis consultar la resolución de pantalla que usan diferentes modelos de teléfonos móviles.

Boilerplate

Boilerplate es un excelente punto de partida para construir sitios HTML, CSS y JS. En el podemos descargar estructuras HTML con comentarios o sin ellos para iniciarnos en nuestro proyectos.

FitText
También se hizo mención a FitText, un plugin Jquery para hacer flexible el tamaño de las fuentes que usemos en la web.

Para ver todos los tweets del webcast de ayer podeis hacerlo en el hashtag de Twitter #dwresponsive.

Desde Clave Web esperamos que el artículo sea de vuestro agrado para animaros a seguir con vuestra formación de responsive. Para consultas podeis contactar con nosotros a través del blog y de nuestros perfiles en las redes sociales:

@claveweb

http://www.facebook.com/claveweb

Un saludo a todos.

Nuestro perfil de presentación Online

Desde Clave Web queremos presentaros about.me, un portal donde podemos mostrar todas nuestras direcciones web y redes sociales en forma de presentación online.

Con este perfil, podemos mostrar en una sola pantalla toda nuestra información de una forma directa, permitiendo acceder a ella con un solo clic.

1. Pasos a seguir.

Lo primero que haremos es entrar en la página de about.me . Una vez dentro, nos dirigiremos al botón de “Crea tu página”. La web está en inglés, pero podemos  traducirla con Google.

2. Datos de nuestra página.

En este apartado pondremos nuestro nombre y apellidos, una pequeña biografía y unas etiquetas. También  podemos elegir si queremos reservar nuestra dirección de correo electrónico, que nos proporciona about.me, y si queremos que otras personas nos encuentren por nuestra dirección de correo electrónico.

En muchas ocasiones, podemos encontrar páginas web que incluyen imágenes obtenidas de internet, de baja resolución, dando poca calidad y profesionalidad a nuestro sitio. Con ello también podemos encontrarnos que nuestras imágenes sean las mismas que las de otra web y con problemas de derechos de imagen.

Para no caer en el error de imágenes de poca calidad y que pongan en peligro la vida de nuestra web, podemos acudir a bancos de imágenes, libres de derecho de autor, o a la contratación de un reportaje fotográfico profesional que haga que nuestra web esté llena de vida y sobre todo que la haga única.

Banco de imágenes.

La opción del banco de imágenes sería la opción más económica, ya que por unos pocos euros, podemos obtener imágenes de calidad y con buena resolución,  aportando frescura a nuestra web, aunque podría existir también coincidencia de contenido con otras webs que opten por esta opción.

El precio medio de descarga de una imagen para web oscila entre 1 y 5 € dependiendo del sitio de donde la descarguemos. También existen sitios donde hay banco de imágenes gratuitas, pero limita un poco más todavía la exclusividad.

Algunos bancos de imágenes donde podemos descargarnos imágenes para nuestras webs son Fotolia, iStockphoto o  depositphotos entre otros.

Contratación de un reportaje fotográfico profesional.

La opción de la contratación de un reportaje fotográfico profesional es la opción menos económica pero sin duda es la que va a hacer que nuestra web sea única y que consiga un resultado exclusivo.

Dar precios de un reportaje fotográfico es algo más arriesgado, ya que va a depender del profesional de la fotografía al que contratemos, pero existen sesiones fotográficas por jornadas laborales, en las que los precios pueden ir desde 200 € + IVA, dependiendo del reportaje que queramos hacer.

]]> http://claveweb.com/blog/index.php/2012/04/importancia-fotografias-web/feed/ 0 http://claveweb.com/blog/index.php/2012/02/obtener-el-valor-de-un-parametro-pasado-por-la-url-mediante-javascript/ http://claveweb.com/blog/index.php/2012/02/obtener-el-valor-de-un-parametro-pasado-por-la-url-mediante-javascript/#comments Fri, 24 Feb 2012 16:05:13 +0000 Clave Web http://claveweb.com/blog/?p=363 Nos hacía falta poder obtener valores desde una página html y hemos encontrado esta función que es realmente muy útil para estos menesteres:

   1:  function GetQueryStringByName(name) {

   2:      name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

   3:      var regexS = "[\\?&]" + name + "=([^&#]*)";

   4:      var regex = new RegExp(regexS);

   5:      var results = regex.exec(window.location.href);

   6:      if (results == null)

   7:          return "";

   8:      else

   9:          return decodeURIComponent(results[1].replace(/\+/g, " "))

  10:  }

Más información en: http://www.hectorminaya.com/2011/02/obtener-el-valor-de-un-parametro-del.html

1º Usar como servidor “smtp.google.com”

2º Cambiar el típico puerto 25 por el valor 587

3º indicar que se use SSL en el envío

Quedando un código como el siguiente:

public static void mandar_mail()
{
//siempre el from y el smtp (deben ser del mismo dominio)
System.Net.Mail.MailMessage correo = new System.Net.Mail.MailMessage();

correo.From = new System.Net.Mail.MailAddress("correo@gmail.com");

correo.To.Add("correo@gmail.com");
correo.Subject = txtAsunto.Text;
correo.Body = txtTexto.Text;
correo.IsBodyHtml = false;
correo.Priority = System.Net.Mail.MailPriority.Normal;

System.Net.Mail.SmtpClient smtp = new System.Net.Mail.SmtpClient();
smtp.Credentials = new System.Net.NetworkCredential("correo@gmail.com", "contraseña");

smtp.Host = "smtp.gmail.com";
smtp.Port = 587;
smtp.EnableSsl = true;

try
{
smtp.Send(correo);

}
catch (Exception except)
{

}
correo.Dispose();

}

Dim UploadFichero As HttpPostedFile = UploadFicheroColeccion(0)
UploadFichero.SaveAs(HttpContext.Current.Server.MapPath("files\") & Path.GetFileName(UploadFichero.FileName))
UploadFicheroColeccion = Nothing
strNombreFile = Path.GetFileName(UploadFichero.FileName)
UploadFichero.InputStream.Dispose()
UploadFichero.InputStream.Close()
UploadFichero = Nothing

' OBTENER RUTA Y NOMBRE DEL ARCHIVO
RutaFichero = HttpContext.Current.Server.MapPath("files") & "\" & strNombreFile
 Dim Width, Height As Integer
 Dim Img As System.Drawing.Image
 Dim baseMap As Bitmap
 Dim letterBrush As SolidBrush = New SolidBrush(Color.FromArgb(50, 255, 255, 255))
 Dim shadowBrush As SolidBrush = New SolidBrush(Color.FromArgb(50, 0, 0, 0))
 Dim fontTitle As Font = New Font("verdana", 18, FontStyle.Bold)
 Dim txtMarcaAgua As String = incFuncionesObject.fObtenerValorConfiguracion(2190)
 Img = System.Drawing.Image.FromFile(RutaFichero)
 Width = Img.Width
 Height = Img.Height
 baseMap = New Bitmap(Width, Height)
 Dim myGraphic As Graphics = Graphics.FromImage(baseMap)
 With myGraphic
 .InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic
 .DrawImage(Img, 0, 0, Width, Height)
 .SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
 .DrawString(txtMarcaAgua, fontTitle, shadowBrush, Width / 4, Height - 29)
 .DrawString(txtMarcaAgua, fontTitle, letterBrush, (Width / 4) + 2, Height - 31)
End With
 Img.Dispose()
 '' Grabar la imagen físicamente
 baseMap.Save(RutaFichero)
 baseMap.Dispose()
 Img = Nothing

y con esto ya tienes lista esta útil funcionalidad que más de un cliente ya nos ha solicitado.

SEO son las técnicas que usamos para hacer que un proyecto web aparezca en las primeras posiciones de los buscadores según ciertos criterios de búsqueda. Es decir, para una tienda online de electrónica, intentamos posicionar las páginas del site por el nombre de un producto en concreto, o potenciamos los criterios “tienda ofertas electrodomésticos” – por poner un ejemplo.

Pues buscando información por la Red hemos dado con un vídeo-infografía muy ilustrativo de la gran importancia que tiene que nuestro proyecto web esté bien considerado por los principales buscadores. Cuanto más fácil sea que un usuario llegue a tu web más posibilidades tienes de ganar dinero.