Introducción a CSS II

Clase 9 de 67 • Curso de HTML5 y CSS3 2015

Guillermo Fragachan

student•

ok veo mucha gente quejándose de si es mejor reset o normalize, desde mi punto de vista depende de cual sea tu propósito por lo que normalize suele ser mejor para muchos proyectos, en este caso ella quiere que aprendamos a usar css por ende reset es mejor porque así ella puede profundizar en la estructura de css sin tantas confunciones (debido a que todo lo que sale en el stylesheet es lo que se va a ver), como no lo haría con normalize, pero ambas opciones están y cada quien use la que mejor e parezca, yo en mi caso normalize pero me parece conveniente que en la clase enseñen con reset

Edgardo Raúl Galletto

student•

Pero si mal no recuerdo según Freddy Vega "reset.css" es del diablo. Recomienda encarecidamente "normalizr.css". Yo utilizo "normalizr.styl" porque lo incluyo en mi mini-framework en "Stylus".

Jhon Carlos Colorado Angulo

student•

Es muy claro Freddy siempre nunca a recomendado "reset.css" siempre nos ha dicho que utilicemos normalize.css y la verdad es lo mejor.

Daniel Zambrano

student•

La razon es simple con los reset.
Tienes ciertos estilos que necesitas que se mantengan por default entre todos los navegadores

b, strong { ... }  
i, em { ... }

Esos no los quieres resetear, solo quieres que ciertas propiedades se vean iguales para todos.

Edgardo Raúl Galletto

student•

Otra cosa, reset.css resetea todo a cero, no se puede distinguir otros elementos unos de otros, en cambio en normalizr.css se normalizan los etilos en todos los navegadores. Ahora podrás diferenciar un encabezado h1, de un h2 y así sucesivamente.

Erick Neftalí Sarmiento Cortes

student•

Como puedo convertir una imagen jpg o png
a svg?

Juan Carlos Ramirez Ustarroz

student•

vectorizandola con corel o algun programa similar

Ricardo Celis

teacher•

inkscape es open source y funciona

Paulo Andres Gonzalez

student•

Cuando queremos saber cual es el color Hexadecimal, estos están basados en colores RGB, hay que tener en cuenta que por ej., la empresa o cliente nos mandan archivos de su Identidad corporativa como, .ai, .eps e inclusive un .jpg pueden estar en colores de impresión como CMYK y hay muchísima diferencia, en algunos casos. Por seguridad siempre recibir los archivos de los colores institucionales o de identidad corporativa en colores RGB ( o solicitarles si tienen su respectivo manual de uso)

Aldo Sáez Jofré

student•

Tal como dice Manu, siempre es recomendable separar la presentación de la maquetación, Aún así, es muy importante colocar el atributo width y height en el tag <img>. Esto nos sirve para que nuestro navegador reserve el espacio de la imagen mientras se carga esta misma, ya que nuestro navegador no sabe el tamaño que ocupará nuestra imagen. Esto es útil para no romper el diseño del sitio, y no percibir que los elementos se acomodan y se mueven, cuando el sitio se carga de forma lenta.

Adriana Ceballos

student•

Es mejor usar normalize.css?

Raúl Segura Nabarret

student•

Si, reset.css te elimina todo el formato de estilos como su nombre lo dice, en cambio normalize.css, como su nombre también lo dice, normaliza todos los estilos en los navegadores. Saludos.

Christian David Ramírez Bolívar

student•

Normalize, tiene una variedad más ámplia de modificación, además asegura un correcto funcionamiento en los navegadores más populares Adriana, 100% recomendado.

Alessandro Degiusti

student•

No es mejor poner crear un archivo diferente llamado "reset.css" y enlazarlo? Me parece más ordenado y limpio.

Juan Castro

teacher•

Profe una pregunta...
En el curso que dio @freddier en el 2013 de HTML y CSS, dijo que reset.css era del diablo, que usáramos normalize.css...
Por qué deberíamos usar reset y no normalize?

Luigi Pizarro Caceda

student•

Esa misma pregunta tenía que hacerle yo a @marulango yo hace mucho tiempo cambie reset.css por Normalize, hasta donde he leído Normalize es mucho mejor porque no resetea el CSS por defecto de los navegadores a cero para que después nosotros tengamos que hacer todo de nuevo, si no que lo normaliza según párametros estandard, por ejemplo los H1 se ven como titulos más grandes y en negrita.

En la versión de Bootstrap 4 que se viene pronto, el equipo detrás de Bootstrap pretende reemplazar Normalize con su nuevo sistema Reboot http://v4-alpha.getbootstrap.com/content/reboot/ que se basa en Normalize pero agrega otras cosas

Arturo Schlecht Cabedo

student•

https://youtu.be/x7cEaBPZsP8
reset o normalize?¿

Carlos Mario Mora Restrepo

student•

Cual es la diferencia entre reset.css y normalize.css ?

Mikee Ramirez

student•

A lo que yo tengo entendido reset te manda todos los valores a 0 en todos los navegadores, recuerda que cada navegador tiene estilos predifinidos y por eso al momento de maquetar si no utilizamos se vera distinto en cada navegador, y queremos que se vea igual en todos los navegadores, pero reset como manda todo a 0, hay que definirlos nuevamente, en cambio normalize lo que hace es que en todos los navegadores se vean exactamente igual lo que estas haciendo, solo es cuestion de acomodar el archivo de normalize antes de tus css.
Te dejo el siguiente articulo escrito por leonidas en cristalab http://www.cristalab.com/tutoriales/por-que-nunca-usar-reset.css-sino-normalize.css-c113822l/
Saludos!

Usuario anónimo

user•

normalizr.css Please ¡

Christian David Ramírez Bolívar

student•

También quisiera hacer una sugerencia, inclínense por el software de diseño, es mucho más fácil organizar una maqueta en photoshop y poderla trabajar, es un tiempo muy bien invertido estudiarlo para la maquetación web, hay muchos tutoriales.

Es muy fregado inventar un sitio sin haber hecho una maquetación seria, que un cliente no haya aprobado.

Christian eduardo Trinidad Celestino

student•

puse ese codigo para que me salga por defecto pero en algunos div sigue los puntos

Juan Carlos Ramirez Ustarroz

student•

usa normalize mejor

Josue Chavez

student•

que pasa si el logo no se ve?, sale un recudro con una montañita, está mal mi código o la imagen??

Mikee Ramirez

student•

Valida la que la ruta que pusiste en el tag img sea correcta

<img src="assets/logo.svg"/>

Valida que la carpeta tenga el mismo nombre y sin ninung espacio despues, tambien valida que sea exactamente el mismo nombre de archivo.
Saludos!

Roger Carlos Ariel Alba

student•

Tal y como dijo Mike, revisa que la dirección de la carpeta sea la correcta a donde van tus imagenes.
lo lograste?

Carlos Lizarazo

student•

Entendido:
HTML lo usaremos en la estructura de nuestras paginas
CSS lo usaremos en las modificaciones del contenido

JUAN PABLO GOMEZ GONZALEZ

student•

#00FF00 == #00ff00 True!!!!!

Manuel Galindez

student•

Pueden usar normalize para darle reset a los valores por defecto, e incluso te hace otras cosas mas aparte de solo el resetear los margenes.

Jhonatan Ferney Ospina

student•

Manu un pregunta para limpiar los estilos tambien serviria escribir esto??
*{
margin: 0;
padding: 0;
border-sizing:border-box;
text-decoration: none;
}

Luigi Pizarro Caceda

student•

Es bastante básico pero si. Mejor prueba normalize https://necolas.github.io/normalize.css/ ;)

Fabian

student•

Hola Maru buenos días, Como puedo crear un menú desplegable sobre el mismo ejemplo Gatos y Perros?

Jhonatan Ferney Ospina

student•

Podrias crear un menu despegable agregando mas elementos li>a href=" " que estos seria considerados como sub elementos, mediante los estilos depues lo podras hacer mas dinamico dando le un icono por ejemplo en fontello y depues mediante pseudo elementos como checked podrias hacer que el menu aparesca o desparesca espero que le sirva viejo fabian!!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/estilos.css"> <title>Gatos y Perros de la internet</title> </head> <body> <header> <img src="assets/logo.svg" alt=""> <nav> <ul> <li><a href="#">Gatos</a> <li><a href="#">sub 1</a></li> <li><a href="#">sub 2</a></li> <li><a href="#">sub 3</a></li> <li><a href="#">sub 4</a></li> </li> <li><a href="#">Perros</a></li> <li><a href="#">Acerca</a></li> </ul> </nav> </header>

Mauricio Rodriguez

student•

Hola, trabajo con Brackets y ahora resulta que no puedo visualizar en mi navegador los cambios que voy haciendo en el index ni en el html ¿sabe alguien por qué? Brackets dice que tengo un error en vista previa pero no se a qué se deba :S

Roger Carlos Ariel Alba

student•

Brackests funciona con Chrome así que tienes que usar chrome para el live preview, además te recomiendo mantener actualizado y usar unicamente los pliguns necesarios, en mi caso no uso mas que Emmet.
En su defecto, prueba cerrar y volver a abrir y por ultimo reiniciar, por el moemento eso a mi me ha funcioando, espero te sirva.

Saludos!

Introducción a CSS II

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM