Guia del Principiante (SEO)

Las Redes Sociales y las PYMES

LAS REDES SOCIALES EN LA PEQUEÑA Y MEDIANA EMPRESA

Comenzaremos con explicar que son las redes sociales, se puede decir que son formas de poder interactuar socialmente, está definida como un intercambio entre personas, grupos e instituciones en un contexto de complejidad, la cual está en permanente cambio,  la cual identifica a un conjunto que tiene las mismas necesidades , problemática y se organiza para poder potenciar sus recursos.

Las redes sociales hoy en día son una fuente de valor agregado para las PYMES ya que permite crear conexiones, construir relaciones, mejorar el tráfico del sitio web, establecerse como líderes e innovadores, administrar una marca y su reputación online, se puede crecer de una forma más rápida y también son una ventaja competitiva a través del flujo de información, coordinación y cooperación asociativa.

En los últimos años se sabe que es mayor el interés  de utilizar las redes sociales como mecanismo para dar a conocer una empresa y o producto (Publicidad). Las redes sociales más utilizadas son el Facebook y el Twitter. De hecho se espera que en trascurrir de este año y el próximo se dé por medio de las empresas un mayor gasto de publicidad en estas.

Para las PYMES las redes sociales se han convertido en un nuevo canal de negocios en el cual se pueden captar nuevos clientes, seleccionar personal, comunicarse con clientes, poderse dar a conocer, crear una marca, y poder tener un conocimiento en tiempo real del sector, muchas veces una campaña de publicidad pude tener un efecto multiplicador con lo cual hace que una empresa pueda darse a conocer rapidamente.

Hay que tener en cuenta que no basta con inscribirse en las redes sociales y postear algo de vez en cuando, sino lo que realmente hay que hacer es desarrollar un plan de trabajo solido claramente definido, con objetivos claros, estrategia y recursos bien armados con los que cuenta la empresa esto incluye al personal de la empresa el cual debe estar bien preparado, con la disposición y supervisión adecuada,  así como también la forma de como captar, almacenar y aprovechar la información con lo que permita lograr las metas que se han propuesto.

Se entiende entonces que en los siguientes años, las PYMES tendrán que organizar planes con un criterio interdisciplinario el cual abandone el modelo acumulativo de información  para dar paso a un desarrollo de capacidades, habilidades y competencias. Hay que tener en cuenta que a partir de este cambio las empresas deberán estar mayor informadas y preparadas en el aprendizaje de e-learning con sus diversas programaciones. Teniendo como nueva estrategia el principio de que el cliente es el protagonista de el proceso de adquirir o comprar un producto o servicio.

El tema de las redes sociales, en realidad es una herramienta muy poderosa pero su efectividad dependerá de la capacidad que tienen las empresas para llegar al público objetivo.

Se sabe por medio de análisis hecho que las redes sociales con mayor uso son Twitter  y Facebook seguidas por Linkedln, Flickr o Tumbir.

En Latinoamérica son pocas las empresas que utilizan las redes sociales como herramientas de publicidad debido al eterno temor de que nos roben las ideas  es por esto la poca participación y aprovechamiento que hacen las PYMES de las redes sociales.

Las redes sociales señalan los expertos en la materia, se trata de compartir ideas, historias y tratar de comunicarse con el cliente a su nivel, lo que es fundamental .

La participación en las redes sociales tiene dos posibilidades en cuanto al resultado, el primero es si se tiene éxito es conveniente compartir esa información y los pasos seguidos para poder alcanzarlo, con lo cual otros puedan aprender de esta experiencia y por el otro lado el fracaso el cual también se debe compartir para que otros saquen sus conclusiones de lo que no se debe hacer y se mejore.

Un caso de red social seria el Facebook el mas utilizado en latinoamerica, este posee una adecuada combinación entre elementos corporativos que se consideran interesante para su posicionamiento y el mantenimiento de una relación diaria se podría decir de tu a tu con el publico objetivo, sin depender de un medio de comunicación o de implicancia de terceros, el público objetivo se entera de forma instantánea.

La mayoría de PYMES tiene miedo a que sus sitios en las redes sociales sean utilizadas por la competencia o personas mal intencionadas para poder criticarlas, pero el tema va por ser lo mas transparente posible trabajando con un estricto control de ética, existen empresas que alientan a sus clientes a que hagan sus quejas de forma pública para poder asi hacer los ajustes necesarios para una mayor satisfacción del cliente.

Peter Drucker dijo “Una empresa tiene dos y solo dos funciones básicas: marketing e innovación. El marketing y la innovación producen resultados, el resto son costos, el marketing es toda empresa vista desde la perspectiva de resultado final, es decir desde el punto de vista del cliente”

Nuevas Tendencias Web 2013

Nuevo Año Nuevas Tendencias para este 2013

.:Programacion Web:.

Cada año, los expertos en y diseño y programación web dan sus respectivos puntos de vista sobre las tendencias que marcaran este año, las cuales se podrán ir observando con el pasar del año.

Si bien cabe mencionar es que estas son tendencias,  no necesariamente significa en ningún momento que se van a dar si o si, sino más bien como ya mencione anteriormente son puntos de vista de cuales van hacer las técnicas que posiblemente se vayan a masificar en los sitios web (websites)

  Diseño Web Adaptativo (Responsive Design)

“Es una Técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en las hojas de estilo CS, consigue adaptar el sitio web al entorno del usuario” Wikipedia

Desde ya hace un tiempo que se conoce esta técnica (diseño web adaptativo), ahora, porque es que es considerada como una tendencia para este año 2013, la explicación es debido a que la metodología detrás de esta técnica está todavía en una fase de muchos cambios para poder hacerla más estable y se considera que este año los diseñadores y programadores la estaremos utilizando en gran medida.

Se dice también que este año va ser marcado por esta tendencia debido a que en el año 2012 ha sido un año inusual para las PC ya que las ventas proyectadas fueron menos de las esperadas, entonces que compraron los consumidores?

La estadística nos dice que las Tablets superaron las expectativas de ventas en más de 100 millones el año 2012, se puede decir que este año 2013 podría ser mayor la ventas de estas en comparación de las Laptops, Notebook y por supuesto de los Smartphones, cada día los mayores ingresos a los sitios web se da a través de las Tablets.

Debido a esto es que la mejor solución para diseñar y programar los sitios web es hacer que estas trabajen bien en los diferentes dispositivos y ahí es donde ingresa el diseño web adaptativo (Responsive Design)

En términos sencillos esta técnica usa “media queries” para poder averiguar qué resolución tiene y con esto saber que dispositivo está utilizando, se deben utilizar imágenes flexibles y diseño fluido para que estos puedan ser ajustados a las diferentes pantallas.

La idea es que al diseñar y programar un sitio web este funcione a la perfección en los diferentes dispositivos.

Para Ethan Marcotte, autor de Responsive Web Design, las explicación es “Más que nunca, nuestro trabajo de diseñar debe ser visto a lo largo de un cumulo de experiencias. El Diseño Web Adaptativo (Responsive Design) nos ofrece un camino a seguir permitiéndonos diseñar para el reflujo y flujo de las cosas”.

2         Tipografía para el Diseño

Anteriormente los diseñadores y programadores estábamos siempre centrándonos en las imágenes, el JavaScript para poder empezar a construir el sitio web. En estos últimos años se ha podido observar los primeros avances en lo referente a esta tendencia (Tipografía). Ahora el uso de la Tipografía como elemento central será mayor en el diseño web. Se tienen ya cosas como el @font-face para poder colocar fuentes desde el servidor la mayoría de veces las fuentes para el diseño del sitio web son a menudo mucho menos pesadas que las imágenes o sus homólogos en la secuencia de comandos.

Esta nueva tendencia abre un gran paso a la creatividad para el diseño de tipo, los sitios web deberán mostrar mayor creatividad tipográfica, con lo cual los diseñadores se están comenzando a inclinar por un diseño web más simple y amplio solo diseñando con la tipografía con la cual se puede comunicar cosas como muy bien lo hacen las imágenes.

3       Adiós Flash

Este año será el fin del uso del Flash en los sitios web, desde el 2012 que el programa flash viene perdiendo más adeptos, se puede decir que el Flash está en su última etapa debido a una serie de inconvenientes, los más resaltantes como ya todos sabemos es que no sirve para el SEO (Search Engine Optimization) , y muchos dispositivos móviles no lo soportan.

Se tienen nuevas tecnologías que son menos pesadas y maximizan los recursos del sitio web como también el tiempo de espera al cargar podríamos mencionar HTML5/CSS3, el jquery, etc.

4       Imágenes Completas para un mejor impacto visual

Cada vez es más frecuente encontrar sitios web con fondos (Backgrounds) que interactúan,  lo que significa en términos simples que el fondo (backgrounds) es el sitio web.

Con lo que se gana que todo trabaje bien cohesionado en oposición de que los elementos estén separados y el ojo deba estar saltando.

Esto puede ayudar a enfatizar la empresa o marca ya que en el fondo es llamar la atención, con lo cual eliminas la necesidad de fotos inconexas que no hacen nada para la empresa o marca.

Lo que de todas maneras se necesita para esta tendencia son fotos de muy alta calidad ya que si se colocaran imágenes con baja calidad lo único que se va hacer es distraer al navegante sin sacarle ningún provecho al sitio.

5       Grandes Botones

Con el mayor aumento de tiempo en internet por dispositivos como el Smartphone y Tablet y no utilización del mouse para navegar se hace indispensable que el tamaño de los botones sea de mayor tamaño con lo cual se asegura al navegante que está ingresando en el link adecuado, ya que es muy molesto en este momento cuando uno ingresa y al ser los botones tan pequeños la mayoría de veces al tocar el botón nos equivocamos.

Se tiene que reconocer que el número de usuarios de pantalla táctil está en aumento y es natural que debamos hacerles las cosas más fáciles para navegar o utilizar, ya que si fue difícil estos se irán rápido de nuestro sitio web.

6       Parallax Scrolling

Hay una creciente tendencia en la creación de sitios web con parallax scrolling, que es una técnica de animación utilizada en sitios web, dando un resultado 3D a partir de elementos 2D.

Esta técnica consigue crear un efecto de profundidad mediante una superposición de diferentes capas.

Pueden ingresar por ejemplo:

               www.iutopi.com

Escrito por Labhostperu.com

CSS3 Segunda Parte

Continuacion de Lo Nuevo del CSS3

.:Programacion Web:.

Sombras en CSS3 {box-shadow}

Lo que nos permite hace esta propiedad es agregarle al contenedor una sombra. Se puede no colocar o colocar una o mas sombras en donde cada una se compondria de [longitud (2,4) && color?] && inset.

Los valores que puede tener las longitudes van desde 2 a 4 valores lo que significa:

• El valor inicial sera para la separacion horizontal de la sombra, los valores ques on positivos dibujaran una sombra con separacion por el borde derecho de la caja una negativas sera por el borde contrario, si colocar cero entonces la sombra coincidiria con la misma caja.

• El segundo valor se considera para la separacion vertical, comenzando la separacion desde abajo para los valores positivos y de arriba para los valores negativos y de nuevo si el valor es cero concide con la caja.

• El tercer valor es para darle un radio del difuminado, aca no se permite ningun valor negativo, y si el valor fuese cero no habria difuminado.

• El cuarto y ultimo valor es para la propagacion del difuminado, los valores que son positivos haran una propagacion del difuminado en todas las direcciones, mientras que los valores que son negativos lo contraen

la propiedad del color es una propiedad opcional y si no se le colocara entonces el navegador lo elegiria, es muy probable que lo eliga de la propiedad {color} establecida para algun elemento.

Si se colocara la palabra inset entonces se dibujaria la sombra en el interior de la caja.

Ejemplo:

 <div id="ejemplo-box-shadow" style="-webkit-box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
background-color: red; 
border: black solid 1px; 
box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
height: 75px; 
width: 200px;"></div>

Hay que tener en cuenta que se le puede hacer a la caja los bordes redondeados con solo agregarle la propiedad {border-radius} antes comentada.
Compatibilidad con Firefox, Opera, Google Chrome, con Safari para que funcione necesita -webkit-


Colores

Comenzaremos diciendo que los que hemos trabajado con el CSS conocemos que normalmente se utiliza para darle color a los elementos la propiedad RGB ( que no es otra cosa que los valores que se le coloca a los colores rojo, verde y azul, para que nos de otra gama de colores), y que lo normal es que se coloquen los colores en valores hexadecimales esto quiere decir por ejemplo para el color blanco sera #FFFFFF y en valor de RGB sera (255,255,255), con el CSS2 se podia usar cualquiera de estas dos formas, hoy con el CSS3 tambien se le puede agregar un cuarto valor que seria el de opacidad, entonces esta seria RGBA siendo A el alfa el cual vas de 0 a 1 siendo 1 totalmente opaco y 0 totalmente transparente.


Ejemplo

Color Normal

div { 
   background: rgb(0, 0, 0); 
   width: 50px;
   height: 50px;
}

Resultado un cuadrado negro

Color con Transparencia

div { 
   background:  rgba(0, 0, 0, 0.5); 
   width: 50px;
   height: 50px;
}

El Resultado final sera un cuadrado con 50% de transparencia:

Lo nuevo del CSS3

LO NUEVO DEL CSS3

.:ProgramaciónWeb:.

Todo desarrollador web, utiliza el CSS que es una tecnología desarrollada por el World Wide Web Consortium de siglas W3C la cual combinada con lenguajes de estructura tales como HTML, XHTML o XML, brindan a los navegadores la posibilidad de presentar la información de diferentes formas con lo cual se puede dar diferentes diseños a esta.

CSS es compuesta de diferentes tipos de selectores los cuales al aplicarlos a elementos estructurales de la programación nos permite darle diferentes estilos visuales tales como bordes, sombreados, imágenes de fondo, colores, etc.

Pero la realidad es que lo que para nosotros que somos desarrolladores y programadores lo que nos interesa saber es cuales son la novedades de este CSS3 y obviamente cual es la compatibilidad con los navegadores más comunes como Firefox, Safari, Goggle Chrome y nuestro “Gran Amigo” Internet Explorer.

Empecemos con la compatibilidad en los diferentes navegadores, cabe señalar que el CSS3 está en fase de desarrollo hay algunos selectores que todavía no pueden ser usados en los diferentes navegadores.

En lo referente a Firefox por la misma cantidad de usuarios que maneja se sabe que desde su versión 3.1 ya se da soporte a una amplia gama de funcionalidades que nos brinda el CSS3, el Goggle Chrome más o menos brinda el mismo soporte, en cuanto a funcionalidad se refiere, Safari en particular nos da un extenso soporte a las nuevas funciones del CSS3, hay que tener en cuenta que desde el lanzamiento de estos navegadores los usuarios de Windows han estado reemplazando al Internet Explorer por alguno de estos antes mencionados.

En el caso particular del Internet Explorer ya se tiene conocimiento que no se pueden usar todas las nuevas funciones, aunque se dice que el nuevo Internet Explorer  10 ya brindara soporte a CSS3, pero habrá que seguir esperando, en particular yo no recomiendo ya utilizar el Internet Explorer aunque si todavía aun así quieren seguir utilizándolo existen algunos parches para poder simular algunos de los efectos. En el caso del resto de personas a los que nos ayuda poder implementar estas nuevas funciones lo que podemos hacer es crear un código alterno para que de todas maneras la página web se pueda mostrar en el Internet Explorer.

Problemas aun con CSS

Uno de los mayores problemas que se tiene es que más del 50% de usuarios sigue utilizando como navegador al Internet Explorer .

Lo otro es que el nuevo CSS3 está todavía en fase de desarrollo eso quiere decir que hay código que está en proceso de experimentación y para cada uno de los navegadores todavía se utiliza de diferente forma por ejemplo en el caso de si se le quiere agregar un borde de color para Mozilla seria -moz-border-color, para Chrome seria -webkit-border-color, etc. Esto traería como consecuencia como antes se mencionó que para cada uno de los navegadores se deberá colocar un código para cumplir la misma función con lo cual se tendrá un exceso de código CSS.

Siempre trata de no utilizar 100% de código CSS, lo que debes hacer es ir adaptando los diferentes selectores que te brinda la programación para que estos se han vistos de igual forma en los diferentes navegadores y no tengas que codificar en exceso solo para poder dar un efecto.

Ahora para lo que se creó este tema en el Blog los nuevos selectores que nos brinda el CSS3

Lo primero con lo que vamos a empezar es con el link de la página de CSS3 la que nos proporcionara los estatus actuales donde usted podrá ver cómo es que cada uno de los módulos esta, si ya se terminó, si está en fase de prueba, si está estable, etc.; el enlace es www.w3.org/style/CSS/current-work.
Estos son algunos de los módulos:

• Modelo de Cajas
• Background y Bordes
• Colores
• Tipografía y efectos de textos
• Layout Multicolumna
• Animaciones y Transiciones

Ahora iremos adentrándonos en cada uno de los módulos en una vista general

Backgrounds y Bordes

• Fondos en CSS3 { background }
• Bordes en CSS3 {border}, {border-radius}, {border-image}
• Sombras en CSS3 {box-shadow}
• Salto de la decoración de caja {box-decoration-break}

Estas son las nuevas propiedades de CSS3

La propiedad Border CSS3

CSS3 {border-radius} Esquinas con bordes redondeados.

CSS3 {border-image} Son bordes con imágenes, todavía no tiene un soporte en los navegadores completo, las propiedades parciales son:

                CSS3 {border-image-source} Archivo del borde de la imagen

                CSS3 {border-image-slice} Recorte del borde de la imagen.

                CSS3 {border-image-width} Grosor del borde de la imagen.

                CSS3 {border-image-outset} Extensión del borde de la imagen.

   CSS3 {border-image-repeat} Repetición del borde de la imagen.

Esquinas redondeadas {border-radius}

Esta es una nueva propiedad del CSS3 con la cual podemos poner esquinas redondeadas en los bordes. {border radius} es una propiedad resumida del {border x radius} donde la x puede ser top, bottom, left o right radius, esto quiere decir que se declara cada esquina por separado.

Ejemplo 1:

<div style="background-color: red;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border: red solid 1px; color: white; float: left;
    font: bold 1.2em 'Lucida Sans';
    padding: 0.5em;
    text-align: center;
    width: 10em;">
   BORDER-RADIUS
</div>

Ejemplo 2:

<div style="border-radius: 20px; border: solid 1px;
   margin-left: 15em;
   padding: 0.5em;
   text-align: center;
   width: 10em;">
   BORDER-RADIUS
</div>

BORDER-RADIUS

BORDER-RADIUS

Bordes con imágenes CSS3

    {border-image-source} : Es una imagen que se sube para colocarlo en el borde

    {border-image-slice}: Es un recorte de la imagen para poder formar la matriz    lateral y esquinas. En Firefox y otros navegadores es necesario un valor.

    {border-image-width}: Se puede añadir junto al recorte (slice) una / y luego introducir un ancho de borde de imagen.

    {border-image-repeat}: Opcionalmente se puede colocar una repetición del mosacio de imágenes en la lateral. El valor inicial es stretch. Los navegadores no admiten el valor space.

Es gracioso como la tecnología va cambiando y haciéndonos la vida más fácil, me acuerdo que hace unos años atrás cuando se quería trabajar con bordes redondeados uno tenía que primero colocar 4 imágenes (borde superior izquierdo, borde superior derecho, borde inferior izquierdo, borde inferior derecho y los bordes laterales y superior). Con la finalidad de facilitar la carga de las imágenes, tanto los bordes superior, inferior y laterales se creaban con un ancho de 1 px, toda vez que estas imágenes se repetían.

              

  

Asimismo, como se puede apreciar las esquinas y los bordes llevaban el color de fondo igual que el de la pagina, ya que la gran mayoría de usuarios hacia uso de Internet Explorer 6, el cual no manejaba transparencias de archivos png. En algunas ocasiones para superar este inconveniente, se hacia uso de scripts de java para manejar transparencias en el referido navegador.

Aquí se muestra el resultado final

Otro ejemplo

Aqui se muestra una imagen que llamaremos border.png

 

#round

{

             -moz-border-image:url("border.png") 30 30 round; /* Firefox */

             -webkit-border-image:url("border.png") 30 30 round; /* Safari */

             -o-border-image:url("border.png") 30 30 round; /* Opera */

               border-image:url("border.png") 30 30 round;

}

#stretch

{

            -moz-border-image:url("border.png") 30 30 stretch; /* Firefox */

            -webkit-border-image:url("border.png") 30 30 stretch; /* Safari */

            -o-border-image:url("border.png") 30 30 stretch; /* Opera */

              border-image:url("border.png") 30 30 stretch;

}

 

Archivo borde de imagen {border-image-source}

Se debera utilizar una url la cual hara referencia a un archivo de imagen el cual podra ser utilizado en el borde en lugar del estilo simple dado anteriormente.

Las propiedades de {border-image} no estan implementads del todo en los navegadores, por lo que se recomienda utilizar para cada uno de los navegadores sus respectivas propiedades.

Esto quiere decir que debera ser de esta forma:

• -moz-border-image para Firefox
• -webkit-border-image para Safari y Chrome
• -o-border-image para Opera