Sitio Responsive: Proyecto de Ley sobre el abandono de mascotas

Caso de Estudio
Nombre	Proyecto de ley que sanciona el abandono de mascotas
Período	2014-2014
Palabras Clave	ley responsive
Estudiado en	Gráfica Digital 2014
Estudiado por	Alison Saravia, Carolina Nuñez

Antecedentes del Proyecto de Ley

Sanciona el abandono de animales domésticos

• Fecha de ingreso del proyecto: Martes 01 de abril 2014
• Estado: Primer trámite constitucional
• Materia: Abandono de animales
• Cámara de origen: Cámara de diputados
• Autor: Enrique Van Rysselbergue Herrera

" Uno de los problemas más frecuentes de nuestras comunas es la existencia de perros sin dueño que deambulan por las ciudades transmitiendo enfermedades y en ocasiones agrediendo a personas. Pero que esos animales deambulen por la ciudad es en gran parte responsabilidad de las personas que alguna vez fueron sus dueños y que por distintas razones y medios se deshicieron de ellos abandonándolos. Hasta el momento es sancionado legalmente el maltrato animal, pero el abandono de mascotas se mantiene si ningún tipo de sanción legal. Esto incentiva a que algunos dueños de animales se deshagan de las crías de sus macotas en vertederos, en lugares alejados de sus comunas o en sencillamente en áreas rurales. Del mismo modo existe el abandono de perros que han sido criados por sus dueños y que son abandonados por representar una molestia. El efecto concreto es que esos animales sobreviven y deambulan por las ciudades o los campos generando problemas de seguridad y sanitarios que por lo general no son resueltos por las comunas en que ocurren.

Por esta razón es que queremos presentar un proyecto de ley en el que se sancione a la persona que sea sorprendida abandonando a sus mascotas o bien a cualquier animal doméstico que no sea de su propiedad. Los infractores serán castigados con la pena de presidio menor en sus grados mínimo a medio y una multa de dos a treinta unidades tributarias mensuales. La pena se incrementará en un grado si el abandono del animal tuviera lugar en una zona rural."

Proyecto de Ley

Si bien nuestra legislación cuenta con la ley 20.380, el artículo 291 y el artículo 291 bis del código penal parece suficientemente clara, en las sanciones aplicables al maltrato o crueldad o envenenamiento, lo cierto es que es escasamente aplicada por los Tribunales de Justicia, pues adolece de varias falencias. Uno de los defectos de la ley 20.380 consiste en que jamás se dictó el reglamento que establezca la sanciones ni menos como debe ser aplicado su articulado, constituyéndose por ello en una ley inaplicable, que establece los conceptos y principios generales respecto al maltrato animal. Además una de las principales falencias del artículo 291 bis, es que no señala que conductas constituyen maltrato o crueldad animal, por lo cual se debe recurrir a las normas de interpretación que establece el Código Civil, el cual dice que las palabras deben entenderse en su sentido natural y obvio, es decir, aquel que común y generalmente se le da a la palabra en cuestión.

Agréguese los siguientes incisos segundo y tercero al artículo 291 bis que código penal.

Código Penal Chileno Artículo 291 BIS señala: Maltrato Animal

“El que cometiere actos de maltrato o crueldad con animales será castigado con la pena de presidio menor en sus grados mínimo a medio y multa de dos a treinta unidades tributarias mensuales, o solo con esta última.” ”Los que propagaren indebidamente organismos, productos, elementos o agentes químicos, virales, bacteriológicos, radiactivos, o de cualquier otro orden que por su naturaleza sean susceptibles de poner en peligro la salud animal o vegetal, o el abastecimiento de la población, serán penados con presidio menor en su grado máximo.“

Sobre la actual Ley contra el maltrato animal vigente en Chile (Nº 20.380)

Resumen

La Ley N° 20.380, publicada en el Diario Oficial de 3 de octubre de 2009, trata sobre la protección de los animales.

Esta ley, originada en moción de senadores, establece normas destinadas a conocer, proteger y respetar a los animales, como seres vivos y parte de la naturaleza, con el fin de darles un trato adecuado y evitarles sufrimientos innecesarios.

En términos generales, sobre el cuidado de los animales dice, que toda persona dueña de un animal debe darle alimento y albergue de acuerdo a sus necesidades mínimas y no restringir su libertad de movimiento de forma innecesaria, en especial si le causa sufrimiento o alteración de su desarrollo normal. Esto también se aplica al transporte de animales, que debe realizarse de tal forma que no cause maltrato y que esté acorde con la especie y medio de transporte utilizado.

Establece cuáles son los recintos que deben contar con instalaciones adecuadas según las especies y además tener la correspondiente protección para las personas. Autoriza hacer experimentos con animales, siempre y cuando los conduzcan personal calificado que reduzca al mínimo el sufrimiento del animal.

Sobre el control de la población de animales callejeros, dice que las autoridades deben hacer campañas de educación respecto a la tenencia responsable de animales. Faculta para controles sistemáticos de la fertilidad de perros y gatos y se autoriza el sacrificio de animales pensando en el beneficio del animal.

Por último, establece la creación de un Comité de Bioética Animal permanente para definir las directrices bajo las cuales se podrán desarrollar experimentos en animales vivos. Un reglamento definirá las distintas categorías de animales domésticos y silvestres, según especie.

Sitio Responsive

Mapa de navegación para sitio responsive

Archivo:Mapa navegación gd.jpg

En un primer momento se decide crear un mapa de navegación para dar cuenta de cuál era el material disponible (información) con el que se trabajaría como base para crear la página responsive sobre el proyecto de ley.

(Luego nos dimos cuenta que el error era el modo en el que lo estábamos pensando. Es decir, en vez de pensarlo como una página "autónoma", lo estábamos pensando como un sitio con una cantidad de información mayor a la requerida. Por otro lado, las secciones que habíamos pensado como Muro de opinión- firma y difunde y contacto, no venían al caso ya que la página no estaba pensada para eso, sino que solo para informar al usuario respecto del proyecto de ley.)

Wireframes

Primera propuesta

La primera propuesta de Wireframes, al ser hecha en base al mapa de navegación que realizamos anteriormente, no funcionaba para lo que se quería lograr.

• 

  Móvil 1

• 

  Móvil 2

• 

  Escritorio

Se toma la decisión de volver a pensar cuál es realmente la información más relevante que se quiere mostrar en la página. Cuando esto ya está claro procedemos a crear nuevas propuestas de wireframes.

Segunda propuesta

• 

  Wireframe Escritorio

• 

  Wireframe Tablet

• Móvilleyanima01l.jpg

  Wireframe Móvil

Esta vez realizamos wireframes para los 3 dispositivos, para comenzar a pensar en las secciones que irían modificándose o eliminándose a medida que el tamaño cambiaba.

Tercera propuesta

• 

  Escritorio

• Wireframe móvil01.png

  Móvil 1

• Wireframe móvilmenu01.png

  Móvil 2

Wireframes finales

Después de las propuestas de wireframes iniciales, optamos por eliminar varias de las secciones que proponíamos ya que realmente no eran relevantes. Por ende se fue simplificando cada vez más hasta llegar a la siguiente propuesta final:

• 

  Escritorio

• 

  Tablet

• 

  Móvil

Estos funcionan y son coherentes. La entrega de información para el usuario es precisa y real. Las secciones que componen el sitio son:

• La Ley: Ésta sección más que nada informará al lector cuál es el proyecto de ley y cuáles son sus antecedentes. Dentro de esta sección existe la opción de descargar documentos directos del sitio de la Cámara de diputados.

También dentro de esta sección se dan a conocer conceptos básicos con sus respectivas definiciones que son muy útiles para el usuario en caso de que quiera hacer alguna denuncia al respecto.

• Cronograma: Cronograma es un recuento de hitos importantes sobre el tema del maltrato animal, que van desde el año 1989 hasta la actualidad.

• Organizaciones Nacionales: Una lista con las organizaciones de protección animal más importantes de nuestro País.

• Organizaciones Internacionales: Lista con las organizaciones de protección animal más importantes a nivel mundial.

• Preguntas Frecuentes: Se enumera un listado de preguntas frecuentes en relación al tema del maltrato y abandono animal.

Interfaz

Definición de Tipografía

La tipografía utilizada para la creación de la página responsive es la Source Sans Pro. La selección de ésta se basa en su cualidad de ser una tipografía sin serif, lo cual es una ventaja por su buena legibilidad en dispositivos digitales.

Se utiliza en sus variables Regular,Bold,Semibold.

• 

  Título del sitio. Regular+Bold

Ejemplo de cómo se visualiza el título con las variantes Regular + Bold

Definición de paleta de colores

En un principio el acuerdo fue utilizar colores opacos(grises, negros,azules oscuros), no muy "alegres" por decirlo así para que no se perdiera el foco central, que era el de informar acerca de un proyecto de ley.

Pero finalmente la decisión fue que además de existir un gris (utilizado más que nada en títulos y textos) existieran 2 colores que fueran complementarios. En este caso el azul y el naranja, pero en tonalidades más pasteles que se lograron bajándole la opacidad a cada uno.

Imágenes utilizadas

Las imágenes que fueron utilizadas para crear la interfaz del sitio fueron las siguientes:

Otros recursos

Además de las imágenes utilizadas, creamos un par de pequeños íconos para indicar la descarga de documentos sobre el proyecto de ley, y una especie de "patas" de perro con la intención de lograr que el sitio fuera más "amigable" con los usuarios.

Interfaz

Primera etapa,avance I:

• 

  Escritorio

• 

  Tablet

• 

  Móvil

Segundo Avance:

• 

  Escritorio

En el segundo avance se incorporan imágenes a la sección de las definiciones de términos.

Interfaz final:

• 

  Escritorio

• 

  Tablet

• 

  Móvil

• ACERCA DE LA INTERFAZ FINAL:
  

Los cambios más relevantes que existen cuando se pasa de un dispositivo a otro es en el caso de Escritorio a Móvil.

La opción de descarga de documentos desaparece en el dispositivo Móvil, y también la sección de Cronograma.

En el dispositivo Tablet se mantienen las mismas secciones que están en Escritorio; lo que irá cambiando será la cantidad de columnas ( de 3 columnas pasa a dos columnas de texto) y la disposición y tamaño de los elementos (imágenes y texto).

Finalmente, en dispotivo móvil todo se reduce a una sola columna.

HTML Y CSS

Para comenzar a entrar en los códigos html y css, primero se decide tomar como base un trabajo realizado anteriormente para ir modificando cosas ahí mismo e ir viendo qué pasaba y qué cambiaba. De esta forma volvíamos a tener una cercanía con éste complejo lenguaje.

Los resultados no fueron satisfactorios ya que necesariamente había que partir de cero para tener un archivo de códigos más limpio y coherente.

Primer avance HTML

El primer avance sólo contempla la primera sección del sitio (La ley), y los resultados fueron los siguientes:

Primer avance

Cabe destacar que el primer avance fue realizado sin tomar en cuenta en lenguaje de Bootstrap, lo cual fue desfavorable ya que todo quedo medio desordenado (en términos de código). Y lo que hace Bootstrap es ayudar a controlar las cajas de texto.

Getbootstrap

Bootstrap funciona con un lenguaje propio, el cual simplifica funciones en pos de utilizar etiquetas particulares. Por ejemplo para crear la estructura del sitio, el uso de columnas es lo primordial. Así es como funciona bootstrap, por ejemplo si yo hago un div que sea "col-4" es una media 4 de 12. Si tienes una caja de 12 y dentro le pones una que mide la mitad (6), Ese caja de 6 también sería un 12, porque dentro le podrías meter dos cajas de 3, 3+3 =6, así es como "col 12" es el total de un div. (Se puede observar este caso en la parte celeste con la imagen del perro al lado izquierdo)

Cuando pasa a formato tablet y móvil, queda "col-10" con el título y abajo las "col-6" con la descripción, una debajo de la otra. Si fueran 2 "col6" sueltas, la que no tiene título quedaría mas arriba.

En las secciones deBootstrap denominadas "Example: Stacked-to-horizontal" y "Nesting columns" se dan ejemplos del uso de columnas.

Sitio Proyecto de Ley sobre abandono animal Responsive

Parte de la página en Responsive

Por falta de tiempo se decide darle mayor importancia a la manera en que se comporta la página al reducirla de tamaños (Responsiva).

Para hacer el sitio se utilizaron bastante las referencias que están en el mismo sitio de Bootstrap. por ejemplo, para hacer la columna con 3 fotos se utilizó el código "thumbnail" [1]

La interfaz final no se pudo mantener 100% igual en su versión HTML y CSS con Responsive, ya que al trabajar en base al lenguaje de Bootstrap, se hacía más fácil (y más rápido) utilizar los estilos que presenta por defecto e ir modificándolos.

Con el leve conocimiento previo que teníamos (Previo al curso de Gráfica Digital) se nos hizo bastante difícil llegar a lo que tenemos de una semana a otra, aún así esperamos se tome en cuenta el progreso. (Entendemos que el taller actual se encontraba trabajando con códigos en el ramo de construcción, y por ende tenían más cercanía con el lenguaje).