Saltar al contenido

admin

Comprobación de Páginas Web

  • admin 

 

Cuando creamos una página web se debe realizar la oportuna comprobación de Páginas Web.

¿Es la página web lo suficientemente rápida? Si no es, ¿que acciones pueden acelerar su rapidez y operación? Por no hablar de la importancia de las keywords y el posicionamiento SEO.

Con unos pocos de conocimientos y haciendo un seguimiento de lo que indican los informes sucesivamente se pueden hacer cambios que permitan incrementar y mejorar la calidad y el posicionamiento de la Web.

 

Herramientas de Comprobación de Páginas Web:

a) Rapidez de la web

 https://my.pingdom.com/

 

b) Validador del sitemap.xml

 

c) Comprobación de SEO

 

d) Check de la web en general

 

Además hay una serie de extensiones para chrome muy útiles. Particularmente me gusta SeoQuake.

 

Apple Touch Icon

Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

This file should be saved as a .png, have dimensions of 57 x 57, and be stored in your home directory, unless the path is specified in the HTML using the below code.

<link rel=»apple-touch-icon» href=»/custom_icon.png»/>

When this file is used, by default, the Apple product will automatically give the icon rounded edges and a button-like appearance.

 

Referencia:  http://www.computerhope.com/jargon/a/appletou.htm

How To Create And Install A favicon.ico

  • admin 

What is a Favicon

Favicon is short for «Favourites Icon» («Favorites Icon» for you Americans ;). The name is derived from the bookmark list for Microsoft Internet Explorer which is called Favorites/Favourites list. When you add a site to your Favourites/Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If present, this file will be used to provide an icon that is displayed next to the bookmark text.

Other browsers such as Mozilla have also added support for favicons. Depending on the browser, the favicon can appear in a variety of places, not just in the bookmarks list (in fact, it may not even appear in the bookmark list at all). It may be shown in the address bar or the title of a browser tab, for instance.

How to create a Favicon

To create a favicon.ico simply create a 16×16 .PNG file and convert it to an icon resource with png2ico. If you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16×16 image but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger icon may be shown. If the icon resource only contains a 16×16 image, this will be scaled to the appropriate size, so technically there is never a need to add alternative resolutions. However, doing so can increase the quality of the displayed icon.

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don’t overdo it. Adding a 32×32 alternative should be enough to make sure the image will look good even in contexts with larger icons. Adding even more and larger alternatives is unnecessary bloat. Try to keep the number of colors below 16 and create a 16-color icon using the --colors 16 switch of png2ico (or even create a b/w icon with the --colors 2 switch). This will result in a smaller file that loads faster.

When you create the images to include in your favicon.ico, don’t forget that the icon may be composed against various background colors so you should use transparency rather than a solid background if you want to avoid that your icon appears inside a box. Note, that icon resources only support binary transparency, i.e. a pixel may be visible or invisible but not something like 30% translucent.

Installing your Favicon

To add your new favicon.ico to a web page put it on the server into the same directory as the web page it is for (e.g. www.example.com/foo/favicon.ico for www.example.com/foo/index.html). That is the first place a browser will search. If it doesn’t find an icon there, it checks the top-level directory of the server (www.example.com/favicon.ico for the www.example.com server), so by putting it there you can have a default favicon for all the pages in your domain. Depending on browser and configuration, the favicon.ico is not always rendered, even if it is in one of the above locations, unless the web page explicitly declares its presence. To declare that your web page has an icon, you add the following 2 lines into the <head> section of your page:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

 

Referencia: http://www.winterdrache.de/freeware/png2ico/favicon.html

Utilización de WinCVS

  • admin 

Fuente: http://ibiblio.org/pub/Linux/docs/LuCaS/Tutoriales/WINCVS/html/wincvs.html

Configuración del cliente en Windows

A continuación describiremos el proceso de configuración en el cliente, así como el conjunto de comandos necesarios para crear un espacio de trabajo y hacer las operaciones usuales, con el depósito central.

Definición del depósito central

* En este caso usaremos como ssh al que viene con cygwin. Por lo tanto es necesario que para ejecutar wincvs, lo hagamos desde cygwin. Para ello una vez dentro de la línea de comandos cygwin desplacése hasta el directorio donde se encuentra wincvs y ejecútelo. En nuestro caso esto se hace de la siguiente forma

Administrador@sistemas141~: cd /cygdrive/d/Software/GNU/Wincvs
Administrador@sistemas141~: wincvs &

Desde wincvs realice Admin / Preferences (Alternativamente puede usar Ctrl–F1)

* En la pestaña General en la sección Enter the CVSROOT digite una línea como la siguiente:is25201@naoma.uniandes.edu.co:/home/is25201/deposito/Tenga en cuenta que debe modificarse dicha línea de tal forma que se utilice un usuario válido en el servidor. (En nuestro caso es is25201@naoma.uniandes.edu.co), adicionalmente se debe incluir la ruta completa desde la raíz de la máquina, donde se ubica el depósito central (En nuestro caso es /home/is25201/deposito)
* En la sección Authentication seleccione la opción correspondiente SSH server, adicionalmente active la opción.En caso de querer usar la autenticación por medio de pserver, es necesario que la línea de CVSROOT sea como la siguiente :pserver:anonymous@naoma.uniandes.edu.co: /home/is25201/deposito. Adicionalmente en la sección Authentication seleccione la opción correspondiente «passwd» file on the cvs server

Ventana de configuración de la<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> variableCVSROOT en el cliente

Configuración de la variable CVSROOT en el cliente

* En la pestaña WinCvs es necesario definir el directorio donde se realizará la extracción. En nuestro caso tendremos una línea como la siguiente c:\temp

Creación de un espacio de trabajo

A continuación crearemos un espacio de trabajo, usando el archivo de ejemplo FirstMVC, para ello realice los siguiente

  • Baje el archivo y descomprímalo en un directorio adecuado.
  • Ubíquese dentro del directorio donde descomprimió el archivo usando el explorador de wincvs.

    Explorador ubicado en el módulo a importar.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> cliente

    Directorio del archivo descomprimido

  • Vaya al menú Create, al submenú Import Module y seleccione el directorio adecuado (es decir aquel donde está descomprimido el archivo), después de lo cual debe obtener una ventana con nombre Import Filtery luego presione continue.

    Diálogo de resultados de la importación del módulo.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    Resultados de la importación del módulo.

  • Se deberá obtener una ventana de Import Settings. En dicha ventana realice lo siguiente:

* En la sección Select the module name and paht on the remote server, coloque el nombre de como quiere que se llame tal directorio en el depósito central, en nuestro caso lo llamaremos mvc
* En la sección Initial vendor and release tags, en el campo Vendor tag coloque el nombre del grupo (en nuestro caso es SIGMA y en el campo Release tag coloque la versión (en nuestro caso es MVC_1_0).
* Finalmente, en la sección Enter the log message, coloque una descripción de dicho directorio, en nuestro caso es Ejemplo de una aplicación MVC sencilla.

Ventana de descripción del<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> checkin<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Descripción del checkin.

* En caso de utilizar ssh, obtendrá una nueva ventana en la cuál le pedirán que acepte la clave del servidor al que se conecte y luego tendrá que digitar su clave. Este tipo de situación se repetirá cada vez que haga una operación con el depósito central, pero puede modificarse usando como se describe en este enlace, sin embargo este tipo de instrucciones no sirven en el caso de Window 2000TM. Deberá obtener el mensaje:

No conflict created by this import

 

 Extracción de un módulo

Entenderemos por checkout al proceso mediante el cuál extraemos una copia local de un módulo del depósito central, con el fin de posteriormente podamos editarla.

Selección del módulo

Para hacer checkout de un módulo realice el siguiente conjunto de instrucciones

* Seleccione Create->Checkout Module.
* En la pestaña Checkout Settings, en la sección Enter the module name and path on the server coloque el nombre del módulo que desea hacercheckout, en nuestro caso mvc.
* En la sección Local Folder to Checkout, seleccione el directorio donde desea extraer dicho módulo, en nuestro caso, c:\temp\mvc .
* Deberá obtener el siguiente mensaje

***CVS exited with normal code ***

Edición de los archivos del módulo.

Es necesario tener la información del módulo que se ha extraído, en el directorio local con el ánimo de poder observar la información de éste, para ello:

* Realice View->Browse Location->Change y posiciónese sobre el directorio sobre el que acabó de hacer checkout, obteniendo en una ventana la información de los archivos de cvs.

* Elección de archivos de checkout.

* Para que pueda editar los archivos en su editor de texto favorito[1], seleccione el archivo y hagaTrace->Edit->Select, o haga click sobre el icono del lapiz.En nuestro caso, editaremos el archivo ListView.java.

* Modifique dicho archivo con su editor de texto, arreglando el estándar de codificación.

Edición usando emacs del estándar de codificación<br /><br /><br /><br /><br /><br /><br /><br /><br />

Edición del archivo.

* Una vez grabados los cambios sobre tal archivo, usted observará que en wincvs el archivo correspondiente se presenta con color rojo, indicando que tal copia local, no se ha actualizado en el depósito central.

Actualización del depósito central.

Una vez modificado nuestro archivo deseamos actualizarlo en el depósito central, tal acción recibe el nombre de commit o checkin.

Sin embargo dicho proceso puede tener variantes de acuerdo a si tenemos la versión más actualizada del archivo que está en el depósito central. A continuación describimos las variantes en cada caso.

Actualizacion en ausencia de conflictos de versiones

La actualización de un archivo en el depósito central no tendrá conflictos, en caso de que tengamos en nuestro espacio de trabajo la última versión del módulo del depósito central.

Para hacer dicha actualización debemos realizar lo siguiente:

* Seleccionar el o los archivos sobre los que se desear realizar commit.
* Para actualizar en el depósito central hay que realizar Modify->Commit Selection (o simplemente Control–M).En la pestaña Commit Settings, en la sección Enter Log Settings, indique la razón del cambio, es decir, Arreglo del estándar de codificación.

Diálogo de<br /><br /><br /><br /><br /><br /> commit del archivo.<br /><br /><br /><br /><br /><br />

commit del archivo.

 

Esto actualiza su depósito y verá que su archivo aparece de nuevo con estatus de poder ser editado, adicionalmente cambia su versión a 1.2.

Actualización en caso de conflictos de versiones

Suponga que se desea hacer commit de su archivo, sin embargo otra persona de que su cambio fuera envíado, ha hecho checkin, creando una nueva versión y por ende dejando que los cambios que usted ha hecho sobre su archivo desactualizados.

En caso de que intente hacer commit de este archivo, obtendrá el siguiente error:

Up to date checked failed for ListView.java

Diálogo de error al hacer<br /><br /><br /><br /><br /><br /> commit del archivo.<br /><br /><br /><br /><br /><br />

Error al hacer commit del archivo.

Por ende tendrá que realizar el siguiente conjunto de pasos:

  • Tiene que actualizar el archivo de su espacio de trabajao, para lo cuál realice Modify->Update Selection y luego de Aceptar.
  • El archivo se marca con una C, indicando que no hubo problemas en el mezclado de dichos archivos.
  • Al editar el archivo se obtiene un archivo con las modificaciones hechas a ambas versiones, por lo que se debe decidir que partes de ambas se desean mantener.
  • Grabe las modificaciones que decidió mantener y ahora puede hacer commit de tal archivo, creándose una nueva versión.

emacs editando el<br /><br /><br /><br /><br /><br /> archivo con las dos versiones.<br /><br /><br /><br /><br /><br />

Edición del archivo con dos versiones.

Uso de los tag’s

Mediante un tag se puede nombrar un conjunto de archivos relacionados a través de un nombre específico, facilitando el uso de éstos. Usando dicho nombre se pueden extraer posteriormente este conjunto de archivos.

A continuación describimos las actividades relacionadas con el uso y creación de dichos tag’s.

Creacion de los tag’s

Siga los siguientes pasos:

* Seleccione los archivos y/o directorios relacionados, en nuestro caso los archivos fuentes del programa, es decir todos los archivos con extension .java

Ventana para escoger archivos del<br /><br /><br /><br /> tag.<br /><br /><br /><br />

Escogiendo archivos del tag.

* Realice Create->Create a tag by module.
* En la pestaña Create tag settings, en la sección Enter the tag name and which module to tag entre en el campo New Tag Name el nombre del tag deseado (en nuestro caso CodigoFuente) y en el campo Module to tag el nombre del módulo actual, es decir mvc.

Observación de los tag’s disponibles

Para ver los tag’s que existen sobre un archivo debe hacer lo siguiente

* Seleccione el archivo del cuál desea ver los tag’ asociados, en nuestro caso escogeremos ListView.java.
* Realice Query->Graph Selection, o alternativamente Ctrl–G
* Al salir una ventana, simplemente presione aceptar.

Grafo de los<br /><br /><br /><br /> tags de un Archivo<br /><br /><br /><br />

tags de un archivo.

Extracción de los archivos asociados con un tag

Para crear un espacio de trabajo con archivos asociados a un tag debe hacer lo siguiente:

* En la pestaña Checkout Settings, en el campo Enter the module name and path on the server, coloque el nombre del módulo (en nuestro caso es mvc).
* En la pestaña Checkout Settings, en el campo Local folder to checkout to, dé el nombre del directorio donde desea extraer los archivos, por ejemplo c:\temp\CodigofuenteMVC.
* En la pestaña Checkout Options, en el campo By Revision/Tag/Branch seleccione o escriba el nombre del tag.
* Por último presione en aceptar.

UML Casos de Uso (Use Case)

Fuente: http://users.dcc.uchile.cl/~psalinas/uml/casosuso.html#actor
Introducción

El diagrama de casos de uso representa la forma en como un Cliente (Actor) opera con el sistema en desarrollo, además de la forma, tipo y orden en como los elementos interactuan (operaciones o casos de uso).

Un diagrama de casos de uso consta de los siguientes elementos:

Elementos

  • Actor: 

     

    Una definición previa, es que un Actor es un rol que un usuario juega con respecto al sistema. Es importante destacar el uso de la palabra rol, pues con esto se especifica que un Actor no necesariamente representa a una persona en particular, sino más bien la labor que realiza frente al sistema.

    Como ejemplo a la definición anterior, tenemos el caso de un sistema de ventas en que el rol de Vendedor con respecto al sistema puede ser realizado por un Vendedor o bien por el Jefe de Local.

  • Caso de Uso: 

     

    Es una operación/tarea específica que se realiza tras una orden de algún agente externo, sea desde una petición de un actor o bien desde la invocación desde otro caso de uso.

  • Relaciones: 

    • Asociación 

      Es el tipo de relación más básica que indica la invocación desde un actor o caso de uso a otra operación (caso de uso). Dicha relación se denota con una flecha simple.

    • Dependencia o Instanciación 

      Es una forma muy particular de relación entre clases, en la cual una clase depende de otra, es decir, se instancia (se crea). Dicha relación se denota con una flecha punteada.

    • Generalización 

      Este tipo de relación es uno de los más utilizados, cumple una doble función dependiendo de su estereotipo, que puede ser de Uso (<<uses>>) o de Herencia (<<extends>>).

      Este tipo de relación esta orientado exclusivamente para casos de uso (y no para actores).

      extends: Se recomienda utilizar cuando un caso de uso es similar a otro (características).

      uses: Se recomienda utilizar cuando se tiene un conjunto de características que son similares en más de un caso de uso y no se desea mantener copiada la descripción de la característica.

      De lo anterior cabe mencionar que tiene el mismo paradigma en diseño y modelamiento de clases, en donde esta la duda clásica de usar o heredar.

Ejemplo:

Como ejemplo esta el caso de una Máquina Recicladora:

Sistema que controla una máquina de reciclamiento de botellas, tarros y jabas. El sistema debe controlar y/o aceptar:

  • Registrar el número de ítemes ingresados.
  • Imprimir un recibo cuando el usuario lo solicita:
    1. Describe lo depositado
    2. El valor de cada item
    3. Total
  • El usuario/cliente presiona el botón de comienzo
  • Existe un operador que desea saber lo siguiente:
    1. Cuantos ítemes han sido retornados en el día.
    2. Al final de cada día el operador solicita un resumen de todo lo depositado en el día.
  • El operador debe además poder cambiar:
    1. Información asociada a ítemes.
    2. Dar una alarma en el caso de que:
      1. Item se atora.
      2. No hay más papel.

Como una primera aproximación identificamos a los actores que interactuan con el sistema:

Luego, tenemos que un Cliente puede Depositar Itemes y un Operador puede cambiar la información de un Item o bien puede Imprimir un informe:

Además podemos notar que un item puede ser una Botella, un Tarro o una Jaba.

Otro aspecto es la impresión de comprobantes, que puede ser realizada después de depositar algún item por un cliente o bien puede ser realizada a petición de un operador.

Entonces, el diseño completo del diagrama Use Case es: