miércoles, 23 de mayo de 2012

2 RAZONES POR LAS QUE LA WEB DEL SIFONAVI SE CAE Y SOLUCIÓN | Por Alex Maxi


Bueno realize una llamada a SIFONAVI para indicarle al personal técnico sobre el problema. No quisieron derivarme con algún encargado  del área y me dieron un dirección electrónica a la que envíe un mail hace más de 18 horas sin respuestas. Así que decidí crear este blog  y se lo comento a ustedes :

ACTUALIZACIÓN: SI-FONAVI HA SOLUCIONADO ESTE ERROR, HAN ELEGIDO COLOCAR UN GIF DE 24 KB EN VEZ DEL INNECESARIO FORMATO PNG EN LA PÁGINA. ES VÁLIDO Y ERA NECESARIO HACER ALGO AL RESPECTO PERO.. ES UNA SOLUCIÓN DE DISEÑO POCO SERIA. AQUÍ MI POST ORIGINAL:

Esta es la web del SIFONAVI actualmente:




En Internet, el servidor envía información a tu PC para que puedas ver la web de esa manera.


Entonces cuando entras a la página de SIFONAVI ¿Cuánta información se está enviando desde el servidor de SIFONAVI?


Veamos:


Código de la página: 22 kb Ok
Figura de Ayuda: 3 kb Ok.
Imagen Catpcha: 2 kb  Ok.
Imagen DNI: 25 kb ?? Hmm...
Banner superior de Logo SI-Fonavi: 216 kb ...?? Grave Error

Aquí comienza el dolor de cabeza.



Este error es sólo la confirmación de una epidemia que tiene lugar ya bastante tiempo en Perú.  El divorcio entre diseñadores y programadores, ¿resultado? incompetencia en la creación de aplicaciones. Unos no quieren ver una sóla línea de código y los últimos piensan que el diseño es dispensable.Que pueden hacer web y aplicaciones feas con tal que funcionen (Ej. Las aplicaciones de Scotiabank y BCP) ... Los programadores TIENEN que manejar herramientas de diseño y bueno, lo del FONAVI es un ejemplo del programador que te cobra miles de dolares por su aplicación y no le interesa la interfaz porque internamente funciona ni tampoco le interesa aprender a optimizarla.






Ok. Tu dirás ¿ 216 kb ? No es nada. 


Si tuvieras una web en la que entrarán 100 personas al día, tendrías algo de razón.
Pero si prevees que miles entrarán a una página al mismo tiempo, pasar eso por alto sería un gran error ( aún teniendo 100 visitantes al día no se justificaría la ineficiencia en la utilización de recursos).


Observa:


216kb x 20,000 hits = 4320000 => 4.6 GB Transferidos (Esto es bastante para una web) sólo contando las personas que concretaron la inscripción el 21 de Mayo.


Si reducieramos el tamaño de la imagen a 15 kb (que es lo que debería pesar todo el banner) la cantidad de KB transferidos hubiera sido:


15 kb x 20,000 hits= 300000 => 0.3 GB Transferidos


Hubieramos ahorrado 4.3 Gygabytes de Transferencia en algo tan simple. Esto es casi reducir la cantidad de bytes transferidos por el servidor en 15 VECES.


Es decir esos 20,000 usuarios utilizaron la misma capacidad de envío del servidor que con un código eficiente hubiera servido para 300,000 !!!


Reducimos el trabajo de envío del servidor 15 veces y evitas que caiga como lo ha hecho y está siendo hasta ahora.


SOLUCIÓN
Atención SIFONAVI: no es el dinero lo que me interesa, si desean poner un pequeño pie de página donde diga "Optimizado por Alex Maxi" está bien.


PARA REDUCIR LA CARGA DEL SERVIDOR DEL FONAVI  Y HACERLO APROX. 15 VECES MÁS EFICIENTE EN EL ENVÍO DE DATOS SE TIENE QUE HACER LO SIGUIENTE:




(1) Insertar en Sección Head bajo "<style type="text/css">:



#supbanner {
 position:relative; 
        background-image:url('images/sifonavi_font.jpg'); 
        width:960px;
        height:131px;
}


#suplogo {
 position:absolute; 
        background-image:url('images/sifonavi_logo.jpg'); 
        width:260px;
        height:90px;
        left:550px;
        top:50px;
}


#suplogon {
        font-family:"Arial Black";
 font-size:18px;
        color:#505050;
 position:absolute;  
        left:25px;
        top:100px;
}


(2) Agregar estas imágenes optimizadas para web en el directorio IMAGES ( click en guardar imagen y subir con el nombre "sifonavi_logo.jpg" para la primera y "sifonavi_font.jpg" para la última) - AVISO LEGAL: No estoy utilizando esta imágenes con fines comerciales o reclamando derechos sobre ellas, estas imágenes pertenecen al Gobierno del Perú y por lo tanto son propiedad de todos los peruanos han sido modificadas para ser reducir su peso en Kilobytes.

http://2.bp.blogspot.com/-m4EM-d-WMls/T7yJpqz0YpI/AAAAAAAAABY/8RxQBa-_Fdo/s1600/sifonavi_logo.jpg



http://4.bp.blogspot.com/-Xb9bjW_xA6s/T7yB79N2HRI/AAAAAAAAABA/i-qBjoC4tr0/s400/sifonavi_font.jpg


(3) Cambiar este código:



"<div class="header">
             <a href="#"><img src="images/sifonavi_top1.png" width="960" height="131" id="logo-fonavi" style="background: #C6D580; display:block;" /></a>

            </div>"

(3) Por éste:




"<div class="header">
             
<div id="supbanner">
<div id="suplogo">
</div>
<div id="suplogon">
Bienvenidos al Sistema de Información SIFONAVI
</div>

            </div>
</div>"



(4) Por último, cambiar la imagen del DNI por ésta optimizada (8 Kb): AVISO LEGAL: No estoy utilizando esta imágenes con fines comerciales o reclamando derechos sobre ellas, estas imágenes pertenecen al Gobierno del Perú y por lo tanto son propiedad de todos los peruanos han sido modificadas para ser reducir su peso en Kilobytes.

http://4.bp.blogspot.com/-HBfa1IaKpoA/T7yKIxy4mtI/AAAAAAAAABg/AKI4VMUsv3Q/s200/sifonavi_top1.jpg


OK, ESO ES TODO HICIMOS AL SERVIDOR ENVIAR INFORMACIÓN 15 VECES MÁS RÁPIDO, 15 VECES MÁS EFICIENTE, MENOS DINERO DE PERUANOS INVERTIDO EN AMPLIACIONES INNECESARIAS DE TRANSFERENCIA DE DATOS.




Alex Maxi 
Programación y Aplicaciones Web | E-mail: alemaxi@hotmail.com