Blog en el cual se emitirán temas relacionados a lenguajes de programación en modo básico y a la instalación de programas y consejos de los mismos para una mejor experiencia del usuario básico o intermedio.

API SellerCenter Linio Consulta POST





Este es el tercer post en la cual doy una pequeña introducción a la integración con la API SellerCenter de Linio.
Cabe mencionar que en mi primer post hablé sobe como generar la URL para las consultas ha realizar a través de la misma, en el segundo post comparto un ejemplo para realizar Consultas GET.

Puedes descargar el código que he compartido de manera libre en GITHUB 
Recuerda que puedes utilizar de manera libre este código, al igual que llegó a ti, comparte el post para ayudar a más desarrolladores.
Evitaré la explicación de las vistas, solo me enfocaré en las funciones en la cual es "lo fuerte".

Código de la función en la cual ejecuta la Consulta POST:
Si te haz fijado el código de la Consulta POST es idéntico al de la Consulta GET a excepción en la línea 71
curl_setopt($ch, CURLOPT_POSTFIELDS, $_POST['request_xml']);
Esta porción de código se agrega solo cuando la consulta es POST por lo que tenemos que enviar datos en la URL al servidor de Linio, este es el caso para la creación de productos, subir imágenes, etc

A través de un formato XML enviamos datos al servidor.




  • Creación de Conexión API SellerCenter Linio (Primer Post)
  • Creación de formulario de Consulta GET (Ver Ejemplo)
  • Creación de formulario de Consulta POST (Ver Ejemplo)


  • API SellerCenter Linio Consulta GET


    En una publicación anterior les había compartido el como hacer la conexión con la API SellerCenter de Linio, en esta segunda parte comparto como realizar una Consulta GET.

    Puedes descargar el código que he compartido de manera libre en GITHUB 
    (Proyecto Actualizado)
    Recuerda que puedes utilizar de manera libre este código, al igual que llegó a ti, comparte el post para ayudar a más desarrolladores.
     Evitaré la explicación de las vistas, solo me enfocaré en las funciones en la cual es "lo fuerte".
    Código de la función en la cual ejecuta la Consulta GET:

    Ahora explicaré las líneas las cuales ustedes modificaran en su proyecto luego de descargar el código.

    Línea 26:
    'UserID' => '',
    Dentro de las comillas simples ingresaran el usuario que se crearon.

    Línea 55:
    $api_key = '';
    Dentro de las comillas simples ingresan su API_KEY

    Si se fijan en las líneas 32 y 35 son los datos recibidos del formulario.

    Ha continuación una imagen donde pueden ver los UserID y el ApiKey








  • Creación de Conexión API SellerCenter Linio (Primer Post)
  • Creación de formulario de Consulta GET (Ver Ejemplo)




  • Creación de formulario de Consulta POST (Ver Ejemplo)



  • API Seller Center Linio Marketplace




    Dirigido para aquellos que han desarrollado proyectos web de comercio electrónico u otros desarrolladores que andan en busca de integrar sus proyectos con mercados aún más grandes como de comercio a nivel de latinoamerica y el mundo entero, LINIO por ejemplo.

    Si no sabes lo que es LINIO puedes ver el siguiente vídeo


    Este post no está enfocado a precisar que es LINIO y su forma de trabajo, pero sí, para los que andaban buscando la manera de integrar sus proyectos de comercio electrónico con empresa como ésta, pues presento un tuto de como integrar la API de SELLER CENTER con LINIO MARKETPLACE.

    A través de esta API los vendedores registrados podrán hacer consultas como estado de sus ventas, sus órdenes, administrar sus productos, entre muchas cosas.

    ¿Cómo funciona la API de Seller Center?
    La función en básica, esta API genera una URL con datos que se envían a un servidor dedicado, según la consulta te enviará la respuesta en formato JSON o XML, esta opción lo puedes configurar.

    ¿Dónde y cómo configuro estos datos?
    Primero necesitamos una clave de API. Se crea una bajo Configuración / Gestión de usuarios:



    La siguiente es la implementación de referencia de PHP:
    <?php
    
    // Pay no attention to this statement.
    // It's only needed if timezone in php.ini is not set correctly.
    date_default_timezone_set("UTC");
    
    // The current time. Needed to create the Timestamp parameter below.
    $now = new DateTime();
    
    // The parameters for our GET request. These will get signed.
    $parameters = array(
        // The user ID for which we are making the call.
        'UserID' => 'look@me.com',
    
        // The API version. Currently must be 1.0
        'Version' => '1.0',
    
        // The API method to call.
        'Action' => 'FeedList',
    
        // The format of the result.
        'Format' => 'XML',
    
        // The current time formatted as ISO8601
        'Timestamp' => $now->format(DateTime::ISO8601)
    );
    
    // Sort parameters by name.
    ksort($parameters);
    
    // URL encode the parameters.
    $encoded = array();
    foreach ($parameters as $name => $value) {
        $encoded[] = rawurlencode($name) . '=' . rawurlencode($value);
    }
    
    // Concatenate the sorted and URL encoded parameters into a string.
    $concatenated = implode('&', $encoded);
    
    // The API key for the user as generated in the Seller Center GUI.
    // Must be an API key associated with the UserID parameter.
    $api_key = 'b1bdb357ced10fe4e9a69840cdd4f0e9c03d77fe';
    
    // Compute signature and add it to the parameters.
    $parameters['Signature'] =
        rawurlencode(hash_hmac('sha256', $concatenated, $api_key, false));


    Para hacer una solicitud GET en PHP, podría escribir algo como esto:

    <?php
    // ...continued from above
    
    // Replace with the URL of your API host.
    $url = "https://sellercenter-api.linio.com.pe/?";
    
    // Build Query String
    $queryString = http_build_query($parameters, '', '&', PHP_QUERY_RFC3986);
    
    // Open cURL connection
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url."?".$queryString);
    
    // Save response to the variable $data
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    $data = curl_exec($ch);
    
    // Close Curl connection
    curl_close($ch);


    Con estas configuraciones podrás generar una URL para enviar como consulta


    • Creación de Conexión API SellerCenter Linio (Primer Post)
    • Creación de formulario de Consulta GET (Ver Ejemplo)
    • Creación de formulario de Consulta POST (Ver Ejemplo)



    CSS para Firefox 37




    La mayoría de programadores principiantes o intermedios al momento de maquetear un proyecto web realizamos las pruebas en navegadores como Chrome y Firefox (En versiones actualizadas),  y siempre fue un dolor de cabeza ver que te ha tomado tiempo para que tu proyecto se vea bien en estos navegadores que cuando probamos en IE (Internet Explore) en sus versiones anteriores estos css no sirvieron en absoluto para IE.

    Sin embargo en esta oportunidad no he venido hablar de IE, de lo contrario de Firefox en su versión 37. ¿Porqué hago esto?, En estos últimos días me ha tocado "meter mano" de lado front. la maquetación se veía bien tanto en Chrome, Firefox, Safari, Opera, Android, iOS, pero el requerimiento del cliente fue que en Firefox en versión 37 algunos elementos estaban des alineados y me tomó mucho tiempo encontrar la "tic" para la solución.

    Así que ahora, para facilitarte la vida compartiré las tics CSS.

    Para programar Estilos CSS en Firefox 37 en adelante, solo deberás colocar lo siguiente:

    /**** ... a continuación de tu código css ****/
    @supports (-moz-appearance:none) and (display:contents) {
     /**** aquí tus nuevos estilos ****/
    }

    Si quieres estilos específicamente para Firefox 37:
    /**** ... a continuación de tu código css ****/
    @supports (-moz-appearance:none) and (display:contents)  and (not (ruby-position:over)){
     /**** aquí tus nuevos estilos ****/
    }

    Esto es lo que deberías agregar a tus Estilos CSS y evitarte el dolor de cabeza.
    Comparte para ayudar a otros programadores.

    TeamViewer


    Es un programa que permite tener el control de otra computadora a través de una conexión remota (con conexión a internet). Podrás acceder a otra PC así este al otro lado del mundo.

    TeamViewer es un programa creado para asistencia remota, es decir para poder brindar soporte a usuarios. A través de el se puede dictar clases, tener vídeo llamada. solo necesitamos un acceso a internet y acceso, por su puesto, a la PC que intentamos ingresar.

    ¿Cómo funciona?
    Es fácil, ante todo puedes descargar el programa haciendo click aquí, lo cual te cargará una ventana esperas 5 segundos y le darás click en SALTAR PUBLICIDAD, este programa está en español y la instalación tiene la siguiente secuencia:

    Luego de descargar el programa, tienes que descomprimir con winrar, si no tienes instalado winrar puedes descargarlo dando click aquí, la instalación de este programa es todo por defecto (siguiente, siguiente...)

    PASO 01: Extraer instalador

    Debemos extraer el instalador para poder ejecutarlo. Luego veremos que extrae un archivo con ícono azul, le daremos doble click a ese nuevo archivo generado para poder iniciar la instalación.

    PASO 02: Proceso de instalación
    Atento con los pasos siguientes, pues este programa es de uso comercial (tienes que pagar la licencia) o de uso no comercial (uso gratuito), por lo tanto debemos configurar de manera correcta.



    Atención las flechas rojas, pues son las opciones que debes seleccionar. Luego click en Aceptar - Instalar. te saldrá una pequeña ventana para confirmar la instalación, le das en SI y luego se instalará automáticamente el programa y tendrás un resultado siguiente:


    Presta mucha atención. éste es el resultado del programa ya instalador. Observa que lleva tres textos con letras rojas, estos los puse a propósito para explicarte, pero en tu caso llevaran algunos números y letras.
    AQUI TU ID - Esto será tu identificador de tu máquina
    AQUI TU CONTRASEÑA - Esto será tu contraseña de manera provisional, esta cambia cuando tu lo deseas.
    Cuando quieres solicitar soporte a un compañero, tienes que brindarle estos datos, para que pueda tener acceso a tu PC.

    ¿Luego que termino la sesión, como quitar el acceso a mi compañero?
    Fácil, cuando pasas el puntero del mause por los dígitos de tu contraseña, notarás que aparece una opción (una flecha en forma de círculo), al dar click sobre esa opción tu contraseña se actualizará y así tu amigo ya no tendrá acceso a tu PC

    ¿Y cómo hago si Yo quiero tener acceso a la PC de mi amigo?
    Tranquilo, aun falta explicarte la tercera opción ID DE TU AMIGO aquí tienes que solicitarle el ID de tu amigo para que puedas tener acceso a su PC , luego de esto te saldrá una pequeña venta para que ingreses su contraseña.

    A tener en cuenta. Observa el punto verde de la parte inferior - izquierdo de la imagen anterior, esta en verde cierto? Esto significa que estamos listo para realizar la conexión. Tienes que estar atento con esta "notificación" antes de iniciar.




    Recuerda que antes de ello tienes que tener instalado winrar  o puedes descargarlo haciendo click aquí.
    Y descargar TeamViewer haciendo click aquí.

    Puedes visitar la página oficial: https://www.teamviewer.com


    Si te pareció interesante, comparte el post con las opciones aquí debajo a la derecha

    Creación de Página Web Básica (II) Etiquetas


    Creación de Página Web Básica (II) : Etiquetas

    Hemos iniciado un curso de creación de página web básica y esta es nuestro segundo post, si te perdiste la primera sesión aquí los temas:
    El lenguaje HTML se basa en etiquetas, por eso es importante entender la sintaxis.
    Las etiquetas van dentro de los símbolos < y >  como por ejemplo las etiquetas que vimos en la primera parte del curso: html, head, body, title
    • <html>
    • <head>
    • <title>
    • <body>
    Las etiquetas van a la par, una etiqueta que abre y otra que cierra 
    • <html> ... </html>
    • <head> ... </head>
    • <title>  ...  </title>
    • <body> ... </body>
    Los puntos suspensivos refiere que entre las etiquetas va algún contenido o más etiquetas

    A continuación veamos otras etiquetas más usadas en la elaboración de una página web:

    Encabezados
    Nos permiten organizar los títulos en sus diversos tamaños, y se representa de la siguiente manera
    • <h1> ... </h1>
    • <h2> ... </h2>
    • <h3> ... </h3>
    • <h4> ... </h4>
    • <h5> ... </h5>
    • <h6> ... </h6>
    Párrafo
    La etiqueta de párrafo nos permite ingresar texto a nuestra web.
    • <p> ... </p>
    * Los navegadores ignoran el salto de línea al presionar intro o enter y para ello existe la etiqueta:
    • <br>
    Esta etiqueta no necesita etiqueta de cierre.

    Imágenes
    Para ingresar imágenes utilizamos la etiqueta : <img /> seguido del atributo src="..." donde va la dirección donde guarda la imagen el cual debe ir todo el nombre, incluida la extensión de la imagen.
    • <img src="MiPrimeraWeb/imagenes/foto.jpg" />
    Listas
    Para ingresar listas utilizamos la siguiente sintaxis
    <ul>
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ul>
    Esto nos mostrará como resultado una lista de 3 contenidos, donde <ul> </ul> es la etiqueta que inicia una lista y <li> </li> es cada contenido de la lista que se debe ingresar, puede tener uno a mochos.

    Tablas
    Para la distribución del contenido en ocasiones suelen utilizar tablas. Las tables tienes las siguientes etiquetas básicas: table, tr, td. La estructura es la siguiente:
    <table>
        <tr>
            <td> ... </td>
            <td> ... </td>
            <td> ... </td>
        </tr>
        <tr>
            <td> ... </td>
            <td> ... </td>
            <td> ... </td>
        </tr>
    </table>
    Iniciamos con la apertura <table> luego la etiqueta <tr> </tr> que representa la fila de la tabla, en el ejemplo hay 2 etiquetas <tr> </tr> lo cual quiere decir que existe 2 filas en la tabla. En seguida tenemos 3 etiquetas <td> </td> dentro de cada fila, eso quiere decir que existe 3 columnas por cada fila.

    A continuación veamos un ejemplo de cada uno de ellos en el archivos que editamos en la primera lección del curso.





    Descarga el proyecto haciendo click aquí 
    Descargar proyecto del vídeo click aquí

    Creación de Página Web Básica


    Para la creación de Páginas Web es necesario saber que es HTML


    HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.
    Una vez definido el lenguaje a utilizar, nos estaremos preguntando que herramientas vamos a utilizar para ello. Existen múltiples herramientas, desde la más compleja hasta la más simple como un bloc de notas.


    Ustedes pueden seguir este tutorial abriendo un bloc de notas Inicio - Programas - Accesorios - Bloc de Notas.

    Crearemos un nuevo archivo con el nombre index.html dentro de una Carpeta llamada MiPrimeraWeb.



    Fíjense en las flechas rojas los pasos a seguir.

    Debemos tomar en cuenta que una páginas web consta básicamente de dos partes, Cabecera y Cuerpo (Por llamarlo de una manera didáctica). Y estas partes indicaremos en el código.




    Como ven en la imagen anterior, en el archivo: index.html primero indicamos el lenguaje que vamos a utilizar con la etiqueta: html, luego indicamos los datos de cabecera con la etiqueta head, note que dentro de head lleva inscrito otra etiqueta : title que nos servirá para poner nombre a nuestra proyecto de página web, en seguida tenemos la etiqueta body dentro del cual llenaremos todo nuestro contenido.

    Hemos modificado un par de líneas que verás a continuación, luego de editarlas presionamos las teclas CONTROL + G (o sino podemos ir a archivo guardar) y damos doble click a nuestro archivo index.html dentro de la carpeta MiPrimeraWeb para ver los resultados.



    De este modo tenemos creado nuestro primer proyecto web básico.



    Descargar proyecto del vídeo click aquí

    Recuerda el temario a desarrollar en el curso:






    Que debo saber antes de instalar un nuevo Sistema Operativo a mi Computadora


    Para Instalar un nuevo Sistema Operativo en mi Computadora es necesario conocer las características básicas con la que cuenta. Esto podemos apreciar en el menú Inicio - Equipo - Propiedades 

    El sistema que tenemos para el ejemplo, es un Windows 7 . Por tanto las características o propiedades son las siguientes:

    • Sistema Operativo : Windows 7 Ultimate
    • Procesador : Intel Core i7 
    • RAM : 8 GB
    • Tipo de Sistema : 64 bits


    Otras características básicas que debemos conocer son los dispositivos que están instalados, o también conocidos como los drivers o controladores. Estos los podemos encontrar de esta manera: menú Inicio - Equipo - Administrar. a partir de aquí, Windows muestra una ventana con todos los controladores que el usuario ha instalado o las que vinieron instaladas por defecto.


    Estos son de vital importancia, desde mi punto de vista, para volver a instalar los drivers que necesitan, claro que la versión de estos dependerá de la nueva versión del Sistema Operativo a Instalar.

    También se debe tomar en cuenta la capacidad de nuestro disco duro, esto para poder hacer las particiones convenientemente. De aquí depende la capacidad que requiere el Sistema Operativo a Instalar.


    Comparte este post con tus amigos