Descripción de SmartSprites

Tabla de Contenidos

¿Qué es SmartSprites?

SmartSprites le permitirá fácilmente introducir y mantener sprites CSS en sus diseños. SmartSprites analiza las directivas especiales que puedes insertar en tu CSSoriginales para marcar imágenes individuales que se convirtió en sprites. A continuación, construye imágenes de sprites de las imágenes recogidas y se insertade forma automática. Las propiedades requeridas CSS en la hoja de estilo, de modo que los sprites se utilizan en lugar de las imágenes individuales.

En otras palabras, no tedioso de copiar y pegar en tu CSS al añadir, suprimir o modificar las imágenes sprited. Sólo el trabajo con CSS y las imágenes originales, como de costumbre y se han SmartSprites automáticamente a transformar a la versión de sprites potencia cuando sea necesario.

Otras características de SmartSprites:

• Versión alfa: Por favor, tengan paciencia, a los problemas que tengas.
• (¡NUEVO!) Soporte completo para GIF y PNG8/24: SmartSprites puede crear sprites, tanto en formatos GIF y PNG8/24, incluida la transparencia. Además, se puede optimizar la salida PNG para que PNG24 se utiliza sólo cuando es necesario.
• "Spriting" x-y las imágenes y repetida: SmartSprites apoya convertir las imágenes de fondo repetidas a lo largo de los ejes X e Y en sprites.
• Posición de la imagen inferior y derecho: SmartSprites se puede convertir en spritestambién las imágenes de fondo que se colocan a la derecha o el fondo del recipiente.
• Sprites vertical y horizontal: SmartSprites puede crear tanto vertical como horizontalmente puesto-hacia fuera sprites, necesarios para apoyar x-y los fondos y repetida y derecho e inferior posición.
• Personalizado márgenes sprite: Con SmartSprites puede personalizar la izquierda,margen derecho, superior e inferior de cada sprite individuales para un perfecto posicionamiento de píxeles.
• Varias imágenes de sprites y CSS: SmartSprites puede procesar varios archivos CSSy producir muchos sprites diferentes en un solo paso (por ejemplo, una vertical de los iconos, otro horizontal de pestañas).
• (¡NUEVO!) Un apoyo especial para Internet Explorer 6: SmartSprites puede generar de usar IE6 PNG8 sprites para mantener la transparencia siempre que sea posible.Opcionalmente, un color mate se puede configurar para cada sprite por separado.
• (¡NUEVO!) CSS y documentos relativos a la raíz las rutas de imágenes: rutas de acceso a las imágenes individuales y los sprites resultantes pueden ser específicos tanto en términos relativos al archivo CSS o de una manera absoluta, relativa al directorio raíz de documentos prestados.
• (¡NUEVO!) Integrado con JAWR: SmartSprites está integrado en JAWR, una completaCSS / JS agrupación y la solución de compresión para Java.
• Fácil integración con sistemas de construcción: el procesamiento transparente es la fuerza impulsora detrás de SmartSprites, mediante una tarea de hormiga dedicada. (¡NUEVO!) Puede ser muy fácil integrarlo en scripts automatizados de construcción.
• (¡NUEVO!) Eclipse plug-in disponible para construir sprites directamente desde suIDE.
• Licencia BSD abierta: Se puede utilizar y contribuir a SmartSprites no importa si usted está haciendo una de código abierto o un proyecto comercial.

Utilizando SmartSprites

1. Comenzar con la preparación de su diseño (HTML, CSS, imágenes) de la forma habitual. Uso background-image de adjuntar imágenes como iconos, logos, o por ejemplo, x-o fondos y repetido. Usted probablemente va a terminar con un patrón de CSS en la línea de lo siguiente:

   #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url(../img/web.gif); } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url(../img/logo.png); } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url(../img/top-frame.gif); }

   Cuando haya comprobado que el diseño original de obras como sangría, usted está listo para realizar anotaciones con las directivas de SmartSprite.

2. Anote en su CSS con las directivas de SmartSprites. Directivas SmartSprites debe estar encerrado entre / ** y * caracteres / (comentarios CSS), que hará transparente para el navegador, cuando estés trabajando en tu CSS original. Dentro de los comentarios, las directivas de seguir la sintaxis de CSS común de property: value. Después de añadir anotaciones, el CSS original, tendrá este aspecto (directivas resaltado):

   /** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */ #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url(../img/web.gif); /** sprite-ref: mysprite;*/ } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */ } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */ }

   La primera directiva (en rojo) dice SmartSprites que habrá un duende que se llama mySprite, que debe ser guardado en ../img/mysprite.png en relación con el archivo CSS. Las imágenes de este objeto se establecerán en forma vertical (en la parte superior de la otra).

   La directiva de la regla #web instruye SmartSprites para agregar la imagen ubicada en ../img/web.gif con la clase Sprite mysprite. SmartSprites también sustituirá a la línea de CSS con las propiedades se refiere a los sprites que creó.

   La directiva de la regla de #logo dice SmartSprites agregar ../img/logo.png al mismo sprite y alinearlo con el borde derecho de la imagen de sprite. De esta manera, la imagen se puede colocar hacia el borde derecho del cuadro para lograr el mismo efecto que con el original background-position: top right declaración.

   Finalmente, la directiva de la regla #main-box instruye SmartSprites repetir el ../img/top-frame.png todo el ancho de la imagen de sprite, de modo que el efecto de background-repeat: repeat-x se puede conservar . Además, SmartSprites compensará la imagen del borde inferior de la imagen en el sprite vecinos de 5px, por lo que el efecto de background-position: 5px top también se conserva.

   A continuación se muestra una descripción detallada de las directrices SmartSprites, que usted puede encontrar un poco pesado, pero que le permitirá utilizar todo el poder de SmartSprites. Hay dos tipos de directivas SmartSprites:

   1. Sprite Directiva de la imagen, en rojo, se utiliza para declarar una imagen de sprite, que combina un cierto número de imágenes individuales. Directiva imagen Sprite debe comenzar con /** sprite: y debe estar contenido en una sola línea. Un único archivo CSSpuede contener cualquier número de las directivas de la imagen sprite. La directiva de la imagen de sprites especifica las siguientes propiedades:

      • ID Sprite, la sintaxis: sprite: unique-id, necesario. Un identificador único por lo que será la imagen de sprites se refiere. Para cada sprite de Identificación única, SmartSprites creará una imagen de sprite.

      • Ubicación de la imagen de Sprite, la sintaxis: sprite-image: url('path/name.(png | gif | jpg)'), necesario. CSS archivo ruta de acceso relativa a la imagen de sprites que se creará. SmartSprites deducirá el formato de la imagen en función de la extensión utilizada. Actualmente son: GIF, PNG y JPG.

        La ruta puede contener una serie de referencias a variables de la forma ${variable}. Las variables siguientes son compatibles y será reemplazado por el contenido correspondiente:

        • sprite: Sprite ID

        • md5: hash MD5 del archivo de imagen creado por SmartSprites sprites. El hash sólo cambiará si el contenido de la imagen sprite o cambios de formato de archivo.

        • date: fecha y hora tomada en el momento de la generación de la imagen sprite. La marca de tiempo será diferente cada vez que se ejecuta el procesamiento SmartSprites, aunque las imágenes de sprites no cambian

        La ruta de la imagen sprite puede contener ? carácter para que la cadena de consulta basado en almacenamiento en caché. La parte de la ruta de carácter ? hasta el final del camino se tendrá en cuenta al determinar el nombre real de la imagen de sprites que se escribe en el disco.

        Tenga en cuenta que usted puede poner las variables en cualquier parte de la ruta de la imagen sprite, por ejemplo,

        sprite-image: url('../img/logo-${md5}.png') sprite-image: url('../${date}/${sprite}.png') sprite-image: url('../sprite.png?${md5}')

      • Sprite diseño de la imagen, la sintaxis: sprite-layout: vertical | horizontal, el valor opcional, por defecto: horizontal. Especifica si las imágenes individuales que se establezcan en la imagen de sprites en vertical (en la parte superior de la otra) u horizontalmente (uno al lado del otro).

      • Color mate, la sintaxis: sprite-mate-color: #ff8822, valor opcional, por defecto: #ffffff. Especifica el color mate que se utiliza para representar transparencias parciales en sprites guardados en formatos GIF o PNG8. Nota: Actualmente, sólo los 6 dígitos hexadecimales especificaciones de color son compatibles. Véase también la profundidad de color PNG e IE6 de usar las opciones de PNG.

      • El modo de compatibilidad con IE6, la sintaxis: sprite-ie6-mode: auto | none, el valor opcional, por defecto: auto. Específica si una imagen compatible con IE6 para este objeto se debe generar cuando sea necesario (auto) o no se debe generar en absoluto (none). Consulte la opción de usar IE6 PNG para más detalles.

   2. Sprite Directiva de referencia, marcado en naranja, se utiliza para decir que una imagen SmartSprites individuo específico debe ser colocado en la imagen sprite especificado. La directiva de referencia sprite debe contener en una sola línea, una propiedad CSS background-image especifica un archivo CSS ruta de acceso relativa a la imagen individual y un comentario CSS comienzan con /** sprite-ref:. La directiva de referencia sprites especifica las siguientes propiedades:

      • Referencia Sprite, la sintaxis: sprite-ref: sprite-id, necesario. Una referencia a uno de los sprites declarado por las directivas de la imagen sprite. La imagen individual se colocará en el sprite con el identificador de siempre.

      • Alineación Sprite sintaxis: sprite-alignment: left | right | top | bottom | repeat, valor opcional, por defecto: left para los sprites con disposición vertical, top para los sprites con diseño horizontal. Define el borde de la imagen sprite para que se esta imagen individuales alineadas. Para los sprites alineados verticalmente, los valores permitidos son left y right, mientras que para los alineados horizontalmente - top e bottom. Sprite alineación puede ser útil cuando la imagen de fondo original se colocó hacia la derecha o inferior de la caja (por ejemplo background-position: top right).

        Un valor de alineación especial es repeat. En este caso, el contenido de la imagen individual se repetirá en toda la anchura de un sprite vertical o toda la altura de un sprite horizontal. Esto le permitirá usar sprites para los fondos que han background-repeat establecido en repeat-x o repeat-y.

        Advertencia: la anchura (altura) del sprite resultante será no menor que el mínimo común múltiplo de los anchos de todas las imágenes individuales con la alineación configurada para repeat en esa vertical (horizontal) sprite. Por ejemplo, si a usted se le "repite" las imágenes individuales de ancho (altura) 3px, 5px, 7px y 11px en una vertical (horizontal) sprite, la anchura (altura) de sprites que se 1155px. Por lo tanto, el uso de sprite-alignment: repeat con precaución.

      • Márgenes de Sprite, la sintaxis: sprite-margin-(left | right | top | bottom): OFFSETpx, valor opcional, por defecto: 0px. El desplazamiento de esta imagen desde el borde izquierdo, derecho, superior e inferior o la imagen de vecinos en el sprite. Esta propiedad puede ser útil cuando la imagen original no se coloca exactamente en el borde de la caja, un ejemplo, había background-position: 5px left.Nota: sólo los valores de píxeles se les permite. Versión taquigráfica de la propiedades los márgenes conocidos CSS todavía no es posible aquí.

      Cuando haya terminado de realizar anotaciones en el CSS con las directivas deSmartSprites, usted puede tener SmartSprites generar las imágenes de sprites y los archivos modificados CSS para usted. Antes de hacer esto, usted tendrá que instalar algún software requiere SmartSprites y SmartSprites sí mismo.

3. Obtener SmartSprites y el software que necesita.

   1. Descargar e instalar Java JDK versión 5 o superior (se recomienda JDK 6).

   2. Descargar SmartSprites y descomprimir el archivo.

   Ahora usted está realmente listo para correr SmartSprites.

4. Ejecutar SmartSprites.

   1. En Windows

      smartsprites --root-dir-path c:/example

      En Linux

      ./smartsprites.sh --root-dir-path /home/user/example

   2. Tras el procesamiento completa que debe ver en los mensajes de pantalla similar a:

      process: [java] INFO: Reading image from: C:\example\img\web.gif [java] INFO: Reading image from: C:\example\img\logo.png [java] INFO: Reading image from: C:\example\img\top-frame.gif [java] INFO: Creating sprite image of size 48 x 75 for mysprite [java] INFO: Creating CSS style sheet: C:\example\css\style-sprite.css [java] SmartSprites processing completed in 328 ms

      Si usted nota cualquier línea que contenga una advertencia (WARN:), por favor leacuidadosamente y corregir el problema. De lo contrario, su diseño no puede verse como la versión original.

      Al completar con éxito, SmartSprites creará todas las imágenes de sprites en las ubicaciones especificadas por las directivas de la imagen sprite. Además, al lado de cada archivo de procesador de CSS, SmartSprites creará un correspondiente archivo CSS con un sufijo -sprite. Los archivos originales de CSS se mantendrá sin cambios.Para cambiar el diseño de sprites CSS, vincular estos archivos CSS en lugar de los originales en el código HTML.

      Para nuestro ejemplo, el CSS generado tendría un aspecto similar a este:

      #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url('../img/mysprite.png'); background-position: left -0px; } #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url('../img/mysprite.png'); background-position: right -17px; } #main-box { background-repeat: repeat-x; background-position: 5px left; background-image: url('../img/mysprite.png'); background-position: left -64px; }

      Tenga en cuenta que todas las directivas SmartSprites se han omitido en el archivo generado CSS. Si sigue viendo alguno de ellos en el archivo de salida, significa que estas directivas específicas había algunos errores sintácticos o semánticos, y han sido ignorados. Los mensajes de advertencia le ayudará a identificar los problemas.

      Observe también que SmartSprites actualmente no elimina la original background-position de las propiedades, sino que añade su propia los de abajo para sombra. Su diseño se puede romper si usted tiene background-position o background-image las propiedades que aparecen debajo de la línea con la directiva de referencia de SpriteSmartSprite.

5. Comprobar si el diseño de su aspecto es el mismo. Lo más probable es, que no de inmediato. Ver el FAQ para algunos consejos.

6. Ajustar las opciones globales. SmartSprites tiene una serie de opciones adicionales que puede especificar en la invocación de línea de comandos para ajustar aún más sus diseños.

   • --root-dir-path: directorio en el que SmartSprites proceso se debe hacer, si no esnecesario css-files o si output-dir-path especificado, por defecto: no se especifica.

     SmartSprites procesará todos los archivos con la extensión *.css se encuentra en root-dir-path o cualquier subdirectorio de la misma. Para más fino control sobre el procesado css-files, vea la opción-css archivos.

     Si la ruta del directorio raíz siempre es relativa, serán resueltas en el directorio de trabajo actual.

   • --css-files: las rutas de los archivos CSS de proceso, se requiere si no root-dir-path especificado, por defecto: no se especifica.

     SmartSprites procesará todos los css-files que figuran con esta opción. Si los archivos CSS se va a utilizar junto con output-dir-path, root-dir-path también se debe especificar para que SmartSprites puede preservar la estructura de directorios se encuentran en root-dir-path de output-dir-path. Si root-dir-path y output-dir-path se utilizan, css-files de fuera de root-dir-path será ignorado.

     Relativa rutas de los archivos CSS siempre con esta opción se resolverá en el directorio de trabajo actual. Tenga en cuenta que no va a expandirse SmartSprites ningún comodín (como style/*.css), que asume la expansión se realiza a nivel decomando de la shell de línea.

     Para especificar la lista de archivos CSS para procesar en la tarea de AntSmartSprites, utilice uno o más elementos de conjunto de fileset anidados. Por favor,consulte el archivo build.xml en el archivo de distribución para un ejemplo.

   • --output-dir-path: directorio de salida para procesar los archivos CSS y CSS-relativaimágenes sprite, opcional, por defecto: no especificado.

     Si uno no está vacío de output-dir-path se especifica, root-dir-path que no esté vacía debe ser también proporcionada. La estructura de directorio relativo a la root-dir-path se conserva en el directorio de salida. Por ejemplo si los archivos CSS en el directorio css/base de root-dir-path, los resultados procesados se escribirá output-dir-path/css/base. Además, CSS, relativa imágenes de sprites se escribirá en el directorio de salida. Imágenes del sprite con-documento-root direcciones URL relativasse escriben en relación con document-root-dir-path. Si el directorio de output-dir-path no existe, será creado. Si la ruta de salida del directorio siempre es relativa, serán resueltas en el directorio de trabajo actual.

     Usted puede dejar la output-dir-path vacío, en cuyo caso los archivos CSS se escribirájunto a los archivos originales de CSS con el css-file-suffix, y las imágenes de spritesse escribirá en relación con los archivos originales de CSS. Si usted está usando un producto que no esté output-dir-path, es posible que desee utilizar un vacío css-file-suffix.

   • --document-root-dir-path: Ruta del documento raíz de documentos relativos a la raíz(comenzando con /) urls de imágenes en CSS, opcional, por defecto: no especificado.

     Todos los documentos relativos a la raíz de la imagen y URL de sprites se tomarán con respecto a document-root-dir-path. También el documento relativos a la raíz URL sprites serán escritos relativos a document-root-dir-path. Puede dejar este vacío si su propiedad CSS utiliza sólo CSS direcciones URL relativas de la imagen. Si la raíz del documento siempre la ruta del directorio es relativo, que se resolverá en el directorio de trabajo actual.

   • --log-level: Mensaje de nivel de registro, opcional, por defecto: INFO.

     Mensajes menos importantes que a log-level no se mostrará. SmartSprites tiene 3 niveles de mensajes de registro (en el orden creciente de importancia):

     • INFORMACIÓN: mensajes de información, se puede hacer caso omiso

     • IE6NOTICE: avisos relacionados con la pérdida de calidad posible en la creación de usar IE6 imágenes sprite, véase también el IE6 opción de usar PNG

     • ADVERTENCIA: las advertencias relacionadas con la sintaxis, IO y el sprite prestación problemas de pérdida de calidad que pueden causar la convierte sprite a base de diseños que parecen rotos

   • --sprite-png-profundidad: La profundidad de color de los sprites en el formato PNG,opcional, por defecto: AUTO.

     • AUTO: La profundidad de color PNG será elegido automáticamente. Si la imagen de sprites no contiene transparencias parciales (canal alfa) y tiene menos de 256 colores, PNG8 se utilizará. De lo contrario, el sprite se guardará en PNG24.

     • DIRECTO: sprites PNG siempre se guardan en el formato PNG24.

     • Indexados : sprites PNG siempre se guardan en el formato PNG8. Si la imagen de sprites contiene transparencias parciales (canal alfa) o tiene más de 255 colores, la pérdida de calidad de imagen puede ocurrir y advertencias se emitirán. Véase también la propiedad en sprite-matte-color.

   • --sprite-png-ie6: permite la generación de imágenes de sprites de usar IE6, opcional, por defecto: disabled.

     Si sprite-png-ie6 se especifica, para cada imagen PNG con transparencias parciales de sprites (canal alfa) o más de 255 colores y transparencias, SmartSprites generará una reducción de color correspondiente PNG8 de archivos para IE6. Una regla CSS IE6 adicionales-sólo se añadirá a la generada archivo CSS para asegurarse de que IE6 (y sólo IE6) utiliza la versión reducida de colores:

     #web { width: 17px; height: 17px; background-repeat: no-repeat; background-image: url('../img/mysprite.png'); -background-image: url('../img/mysprite-ie6.png'); background-position: left -0px; }

     Véase también la propiedad sprite-matte-color.

   • --css-file-encoding: la codificación de asumir para la entrada y salida de los archivos CSS, por defecto: UTF-8. La lista de los valores permitidos, por favor vea la lista de codificaciones soportadas en Java.

   • --css-file-suffix: sufijo que se añade al nombre del archivo procesado CSS, opcional, por defecto:-sprite.

7. Integrar SmartSprites con scripts de construcción. SmartSprites viene con una hormiga que realiza el procesamiento de sprites y tiene exactamente las mismas opciones que la invocación de línea de comandos. Por ejemplo, una invocación de la tarea, por favor, eche un vistazo a la secuencia de comandos build.xml, cuyo process de la tarea lee los parámetros de smartsprites.properties y genera sprites. Tenga en cuenta que, a diferencia de la interfaz de línea de comandos, la tarea Ant resuelve todas las rutas relativas en el directorio en el que se encuentra la secuencia de comandos build.xml.

Eclipse plug-in

Para invocar SmartSprites directamente desde su IDE de Eclipse:

1. Instalar el plugin de Eclipse SmartSprites de:

   http://update.bitexpert.de/eclipse/3.5

2. Haga clic derecho en el archivo CSS en el Explorador de proyectos y seleccione Herramientas externas> Generar Spritemap para generar sprites.

El plug-in ha sido desarrollado por bitExpert AG. El código fuente del plugin:

Algunas preguntas frecuentes

1. Después de la conversión de los sprites, mi diseño no se parece al original en absoluto. ¿Qué pasa?. Esto puede ocurrir :-) En primer lugar, compruebe si hay mensajes de advertencia SmartSprites, estos indican que algunas de las directrices han sido ignorados debido a errores sintácticos o semánticos. Antes de una mayor investigación, asegúrese de que usted no recibe ningún aviso.

   En segundo lugar, asegúrese de que cada directiva SmartSprites encaja del todo en una sola línea, incluida la secuencia */ cerrar el comentario. De lo contrario, puede obtener resultados impredecibles.

   En tercer lugar, como se muestra en la sección anterior, SmartSprites por el momento no se elimina la original background-position propiedades, sino que añade su propia los de abajo para sombra. Su diseño se puede romper si usted tiene background-position o background-image propiedades que aparecen debajo de la línea con la directiva de referencia de Sprite SmartSprite. SmartSprites emite una advertencia en tales casos. Si este sucede, mueva las propiedades primordial antes de la directiva de referencia de sprites en su archivo original de CSS y ejecutar SmartSprites nuevo.

   Finalmente, es posible que desee revisar algunos consejos SmartSprites en el Blog de Josh y los sprites CSS excelente arranque notas publicadas por un usuarioSmartSprites en el grupo de discusión.

2. Otras imágenes del sprite "mostrar a través de" en los lugares. ¿Por qué?. Esto puede ocurrir cuando la caja se aplica una imagen sprited que es más grande que la imagen sprited de sí mismo. En esta situación, otras imágenes del sprite que se encuentran por debajo a la derecha de la misma también será visible.

   Para solucionar este problema, puede cambiar el tamaño de la caja para hacer sus dimensiones iguales a las dimensiones de la imagen. Si esto no es posible, utilice los márgenes de sprite (por ejemplo, sprite-margin-bottom) para crear un espacio en blanco alrededor de la imagen en el sprite, de modo que el resto de imágenes debajo de ella (oa la derecha de ella) no se vean.

3. Repetición de imágenes en sprites no funciona. ¿Es un error?. Recuerde que las imágenes repetidas en sentido horizontal (background-repeat: repeat-x) debe será añadido a un trazado vertical sprite (sprite-layout: vertical), y las imágenes repetidas verticalmente (background-repeat: repeat-y) deben de estar en posición horizontal establecido de sprite (sprite-layout: horizontal). No hay manera de que puedan trabajar de otra manera, por lo tanto, dos diseños de imagen de sprite enSmartSprites.

4. ¿Hay algún ejemplo más grande de la utilización de SmartsSprites puedo echar un vistazo a? Sí, en el directorio test/ real-world-example, ejemplo de la distribución. Este es el diseño original que estaba trabajando cuando se me ocurrió la idea deSmartSprites.

5. ¿Hay alguna tutoriales sobre SmartSprites? Sí, usted puede encontrar en la sección de tutoriales.

6. He encontrado un error, ¿cómo puedo informar? Por favor, use nuestro gestor de incidencias.

7. ¿Tiene planes de todas las nuevas características de SmartSprites? Sí, por favor consulte nuestra hoja de ruta para obtener más información.

Sobre

Esta traducción puede contener errores. La versión original es la única versión normativa. Por todo, muchas gracias al autor por permitirnos traducir el contenido y ser accesible a todo.

About   |   Copyright © 2019 cctranslations.org. All rights reserved.